Прослушала первый курс по вашему совету HTML и CSS. Уровень 1. Создание сайтов по стандартам W3C Специалист Очень понравилось все очень доходчиво Сейчас начну второй Сайт переверстала Оцените стало лучше Конечно я пока много не умею и оставила некоторые вещи на потом но хочется услышать критику специалистов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Букеты из мягких игрушек</title> <meta name="description" content="Букеты из мягких игрушек"> <meta name="keywords" content="Оригинальные подарки, Необычные подарки."> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="text"><h1><a href="http://www.toy-prezent.ru"> Оригинальные букеты<br>из мягких игрушек</a></h1></div> <div id="text-shapka"> <a href="8.html">Регистрация/Вход</a> <a href="9.html">КОРЗИНА</a><br> <a href="8.html" class="tag">Имя</a><br> <a href="8.html" class="tag">Пароль</a> </div> <div id="center"> <div id="left"> <ul> <li><a href="index.html" class="tag2">Фотогалерея</a></li> <li><a href="2.html">Контакты</a></li> <li><a href="3.html">Доставка</a></li> <li><a href="4.html">Оплата</a></li> <li><a href="5.html">Робокасса</a></li> <li><a href="6.html">О компании</a></li> <li><a href="sitemap.html">Катра сайта</a></li> </ul> </div> <div id="right"> <div id="content"> <h2>Букеты из мягких игрушек</h2> <ul> <li>Букеты из мягких игрушек - все они несут совершенно разные эмоции. Но какими бы разными они не были, все же у букетов из игрушек есть одно общее свойство – они наши безотказные «улучшатели настроения». Как волшебные гномы они дарят чувства уюта и покоя, мир кажется добрым и радостным. А все наши проблемы не такими уж и страшными.</li> <li>И, наконец, самое важное - он произведение искусства.</li> <li>Так пускай повсюду на земле, словно чудо, появляются букеты из игрушек! </li> </ul> <br> <div class="photo"> <p>Очарование</p> <p><a target="_blank" href="1.JPG"><img src="1.JPG" alt="Букет из игрушек" title="Букет из игрушек Очарование"></a></p> <p>d40см - 2 000руб<br><b><a href="7.html">Купить</a></b></p></div> <div class="photo"> <p>Королева сердец</p> <p><a target="_blank" href="2.jpg"><img src="2.jpg" alt="Букет из мягких игрушек" title="Букет из мягких игрушек Королева сердец"></a></p> <p> d45см - 3 000руб<br><b><a href="7.html">Купить</a></b></p></div> <div class="photo"> <p>Ласковая фея</p> <p><a target="_blank" href="3.JPG"><img src="3.JPG" alt="Букеты из игрушек" title="Букеты из игрушек Ласковая фея"></a></p> <p> d30см - 1 500руб<br><b><a href="7.html">Купить</a></b></p></div> <div class="photo"> <p>Колдунья</p> <p><a target="_blank" href="4.jpg"><img src="4.jpg" alt="Букеты из мягких игрушек" title="Букеты из мягких игрушек Колдунья"></a></p> <p> d32см - 1 500руб<br><b><a href="7.html">Купить</a></b></p></div> <div class="photo"> <p>Флоренция</p> <p><a target="_blank" href="5.jpg"><img src="5.jpg" alt="Оригинальный букет из игрушек" title="Оригинальный букет из игрушек Флоренция"></a></p> <p> d28см - 1 700руб<br><b><a href="7.html">Купить</a></b></p></div> <div class="photo"> <p>Лунная соната</p> <p><a target="_blank" href="6.jpg"><img src="6.jpg" alt="Необычный букет из игрушек" title="Необычный букет из игрушек Лунная соната"></a></p> <p> d30см - 1 500руб<br><b><a href="7.html">Купить</a></b></p></div> </div> </div> <div id="footer">© Copyright © www.toy-prezent.ru - <a href="http://www.toy-prezent.ru">Букеты из мягких игрушек</a> тел.8 (495) 760 03 08 </div> </div> </body> </html> и код css html { background: #E5B882; /* Цвет фона */ } body { font: 10pt Myriad Pro, Helvetica, sans-serif; /* Шрифт на веб-странице */ margin: 0; /* внешний отступ */ padding-top: 10px; /* отступ с верху */ } #container{ width:1024px; /* Ширина слоя */ margin:auto; /* Выравнивание по центру */ position:relative; } #header{ background:url(../img/head.jpg) ; /* Цвет фона шапки */ height:249px; } #footer{ background: #C0555A; /* Цвет фона подвала */ color: #fff; /* Цвет текста */ margin:0; /* внешний отступ */ padding: 5px 5px; /* внутренний отступ от текста*/ } #footer a{ color:#fff; /* Цвет посещенных ссылок как фон под кнопками белый*/ } #footer a:hover{ color:#A5C839; /* Цвет посещенных ссылок зеленый*/ } h1 { color: #C0555A; /* Цвет текста */ font-size: 16pt; /*Заголовок размером 15 пункта*/ } h2 { font-size: 13pt; /* Размер шрифта */ color: #800040; /* Цвет текста */ text-align: center; /* Выравнивание по центру */ } #text { position:absolute; top:40px;left:160px; font-size: 12pt; } #text a{ color:#C0555A; /* Цвет посещенных ссылок как фон под кнопками бордовый*/ } #text-shapka { position:absolute; top:145px;left:30px; text-align: left; /* Выравнивание по левому краю */ line-height: 2.3; /* Межстрочный интервал */ } #text-shapka a {color:#fff; /* Цвет ссылок белый*/ } #text-shapka a:hover{ color:#A5C839; /* Цвет посещенных ссылок зеленый*/ } #text-shapka a.tag{color:#f00; /* Цвет текста красный*/ } #center{ background: #f0f0f0; /* Цвет фона серый */ margin:10px 0; /*чтобы отодвинуть фон от края*/ } #left{ float:left; /* Обтекание по правому краю */ width:390px; background: #C0555A; /* Цвет фона левой колонки коричневый */ margin: 10px 5px; /* внешний отступ */ font-size: 13pt; /*Заголовок размером 15 пункта*/ } #left a { background: url("../img/knopka grin.png") no-repeat ; } #left ul li a { padding: 9px 50px 12px 15px; /* Отступ кнопки между собой */ background: url("../img/knopka red.png")no-repeat; text-transform: uppercase; /* текст будет большими буквами */ display: block; } #left ul li a.tag2 { background: url("../img/knopka grin.png")no-repeat; } #left ul li a:hover { background: url("../img/knopka grin.png") no-repeat ; color: #f00; /* Цвет ссылок при наведении на них курсора мыши красный*/ } li {list-style:none; } #right{ margin:0 407px; /*чтобы отодвинуть фон от края*/ background:#fff; /* Цвет фона белый */ width:615px; padding-top: 10px; /* Расстояние до текста */ } a { text-decoration: none; /* Отменяем подчеркивание у ссылки */ } a:link { color: #fff; /* Цвет непосещенных ссылок белый*/ } a:hover { color: #f00; /* Цвет ссылок при наведении на них курсора мыши красный*/ } a:visited { color: #fff; /* Цвет посещенных ссылок белый*/ } a.tag2 { color: #000; /* Цвет ссылок черный*/ margin-left: 35px; text-align: center; /* Выравнивание текста по центру */ } .photo { height: 175px; width: 155px; border: 0;/* Рамка вокруг фотографии*/ padding: 10px 5px; /* Поля сверху и снизу */ display: inline-block; /* Строчно-блочный элемент */ background: #A5C739; /* Цвет фона зеленая*/ margin-bottom: 15px; /* Отступ снизу */ margin-left: 25px; /* Отступ слева */ -moz-border-radius: 5px; /* Для Firefox 3 */ -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */ border-radius: 5px; /* Для современных браузеров */ text-align: center; /* Выравнивание текста по центру */ } .photo img { border: 2px; /* Параметры рамки*/ height: 130px; width: 145px; } .photo p { margin: 0; /* Убираем отступы вокруг абзаца */ } #content a {color:#F8EED4; /* Цвет ссылок беж*/ } #content a:hover{color:#C0555A; /* Цвет посещенных ссылок как фон под кнопками бордовый*/ } p{ margin-left: 45px; /* Отступ слева */ } #content a.mail {color:#C0555A; /* Цвет посещенных ссылок бордовый*/ } #content a.mail:hover {color:#A5C839; /* Цвет посещенных ссылок бордовый*/ } #karta a { color:#C0555A; /* Цвет посещенных ссылок как фон под кнопками бордовый*/ } #karta a:hover { color:#A5C839; /* Цвет посещенных ссылок зеленый*/ } #zakaz { margin-left: 45px; /* Отступ слева */ margin-top: 35px; /* Отступ сверху */ }
