<div id="header">
<div id="headertext1">Льяно-Эстакадо</div>
<div id="headertext2">насладись вкусом!</div>
</div>
Теперь зададим стили для новых блоков. Очевидно, что эти блоки плавающие, шириной около 1/3 от родительского блока (800px:3=270px)
и прижаты к правому краю (свойство float:right ).
Чтобы второй блок располагался ниже первого, а не прижимался к нему, запретим его обтекание справа (clear:right), а для того, чтобы он был немного смещен влево (как на картинке), уменьшим его ширину на 20px.
Наконец, зададим шрифт, его размер и цвет, а также отступы сверху:
#headertext1{
width:270px;
float:right;
font-size:24px;
font-family:Arial;
padding-top:30px;
color: #FFFFFF;
}
#headertext2{
width:250px;
float:right;
clear:right;
font-size:20px;
font-family:Arial;
padding-top:5px;
color: #FAF46E;
}
Теперь займемся блоками меню, их три: первые два содержат ссылки, третий - простой текст. Поступим так же, как с блоком
header, т.е. создадим в каждом по блоку и уже в них поместим наши ссылки и текст. Так как ссылки на нашей
странице оформлены по-разному, то ссылкам в этих блоках присвоим класс menu:
<div id="menu1">
<div id="textmenu1">
<a href="#" class="menu">Меню</a> |
<a href="#" class="menu">Заказ столика</a> |
<a href="#" class="menu">Отзывы</a>
</div>
</div>
<div id="menu2">
<div id="textmenu2">
<a href="#" class="menu">Уголок шеф-повара</a> |
<a href="#" class="menu">О нас</a>
</div>
</div>
<div id="menu3">
<div id="textmenu3">
Звоните нам по телефону (495) 123-4567
</div>
</div>
Теперь зададим стили. Блокам надо задать отступы слева и сверху так, чтобы их содержимое располагалось
по центру:
#textmenu1{
padding-left:270px;
padding-top:10px;
}
#textmenu2{
padding-left:300px;
padding-top:10px;
}
#textmenu3{
padding-left:250px;
padding-top:35px;
font-size:14px;
color:#FFFFFF;
}
У ссылок надо убрать подчеркивание, задать цвет и размер. Чтобы ссылки не прижимались друг к другу, зададим им отступы слева и
справа:
a.menu{
text-decoration: none;
color:#000000;
font-size:15px;
padding-left:10px;
padding-right:10px;
}
Теперь займемся блоком reklama, он состоит из трех блоков, причем текст будет располагаться в первых двух.
В них мы и добавим по блоку:
<div id="reklama">
<div id="reklama_top">
<div id="textreklamatop">Вы можете прямо сейчас заказать столик в ресторанах:</div>
</div>
<div id="reklama_text">
<div id="textreklamatext">
<a href="#" class="reklama"> Баттисета’с</a>
<a href="#" class="reklama"> Бифштекс Чарли Палмера</a>
<a href="#" class="reklama"> Драфт</a>
<a href="#" class="reklama"> Лимончелло</a>
<a href="#" class="reklama"> Мили</a>
<a href="#" class="reklama"> Эйфелева башня</a>
<a href="#" class="reklama"> Хьюго</a>
</div>
</div>
<div id="reklama_bottom"></div>
</div>
Обратите внимание, ссылки в этом блоке отличаются от других, поэтому и имеют свой класс reklama.
Займемся стилями. Для блока textreklamatop надо задать отступы, цвет и размер текста:
#textreklamatop{
padding:25px 25px 0px 10px;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
}
Блоку textreklamatext нет необходимости задавать стиль, а вот ссылкам внутри него надо задать отступы
слева и справа, цвет и размер. Ссылки являются строчными элементами, а у нас они должны располагаться одна под другой, для
этого зададим им свойство display:block. Чтобы ссылки располагались свободно, зададим расстояние между
строк свойством line-height. А для того, чтобы первая буква ссылок была зеленого цвета (как на картинке)
воспользуемся псевдоклассом first-letter:
a.reklama{
display:block;
line-height:30px;
text-decoration: none;
color:#000000;
font-size:14px;
padding-left:10px;
padding-right:10px;
}
a.reklama:first-letter{
color:#02663d;
}
Надеюсь, вы проверяете результат в браузере после каждого изменения?
Продолжим, нам осталось оформить только блоки content и footer. Они не требуют дополнительных блоков, им надо задать отступы, а для блока footer - горизонтальное выравнивание:
#content{
float:left;
width:507px;
padding:15px;
}
#footer{
clear:both;
width:800px;
height:28px;
background-image: url(images/footer.jpg);
background-repeat: repeat-x;
text-align:center;
padding-top:5px;
}
Теперь добавим сам текст:
<div id="content">
<img src="images/bludo1.jpg" align="left">
<a href="#">Бельгийская кухня</a><br>
Тонкое смешение местных традиций с иностранным
влиянием соседних земель - Франции, Германии, Италии,
Голландии, Испании и Скандинавии. Бельгийцы любят говорить,
что блюда их кухни готовятся с французским изяществом
и подаются с немецким великодушием.
<div style="clear:both"></div>
<a href="#">Итальянская кухня </a><br>
<img src="images/bludo2.jpg" align="right">
Для большинства людей - это пицца, ризотто, кьянти
и макароны (или паста). Однако при более детальном
знакомстве с рецептами итальянской кухни выясняем,
что в Италии нет как таковой национальной кухни, поскольку
и сама Италия как единое государство в современных границах
существует немногим более одного столетия.
</div>
<div id="footer">
© 2009 Все права защищены
</div>
Ссылки в тексте не имеют класса, это будут ссылки по умолчанию, т.е. те, которые будут использоваться на всех страницах
сайта, если не указано иное. Поменяем для них только цвет:
a{
color:#000000;
}
Нам осталось задать шрифт и размер для всего сайта. Для этого добавим эти свойства в стили тега body:
body{
width:800px;
padding-left:50%;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:12px;
}
И последний нюанс: сделаем так, чтобы при наведении курсора мыши на ссылки, их цвет менялся на зеленый:
a:hover{
color:#02663d;
}
Все. Наша страница выглядит также, как на картинке, а именно вот так.
А что, если мы хотим сделать резиновый дизайн? Об этом поговорим в следующем уроке.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Главная → Делаем сайт - блочная верстка →
Урок 2. Оформляем страницу
Оформляем страницу
Продолжаем тему блочной верстки сайта. Начнем с блока header, в котором надо разместить название сайта и слоган. Для этого в блок header поместим 2 соответствующих блока headertext1 и headertext2, а в них необходимый текст:Чтобы второй блок располагался ниже первого, а не прижимался к нему, запретим его обтекание справа (clear:right), а для того, чтобы он был немного смещен влево (как на картинке), уменьшим его ширину на 20px.
Наконец, зададим шрифт, его размер и цвет, а также отступы сверху:
Продолжим, нам осталось оформить только блоки content и footer. Они не требуют дополнительных блоков, им надо задать отступы, а для блока footer - горизонтальное выравнивание:
А что, если мы хотим сделать резиновый дизайн? Об этом поговорим в следующем уроке.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.