Блочная верстка. Урок 6. Размещение контента.
Теперь нужно разместить логотип нашего сайта. Это можно сделать двумя способами: поместив изображения логотипа в фон блочного элемента, либо разместив его в специально предназначенном для этого элементе, который описывается тегом img. Кроме того, как правило, логотипы делают кликабельными с ссылкой на главную страницу сайта.
Делается кликабельный логотип очень просто. Для этого теги элемента, содержащаго изображение логотипа заописываются внутри тега a. В данном случае, следуя основам семантической вестки, мы разместим изображение логотипа в специально предназначенном для этого элементе с тегом img.
Внутри заголовочного блока запишем следующие строки:
<a
href="/">
<img id="logo" src="zub.jpg" alt="Логотип сайта" />
</a>
Теперь займемся созданием подвала нашего сайта. Прежде всего давайте сделаем визуальное отделение подвала от контента страницы. Воспользуемся самым простым решением и отделим нижнюю часть страницы простой горизонтальной линией. Для этого воспользуемся тегом hr, придав ему стиль трехмерной линии.
<hr class="delimetr" />Соответсвенно запишем стиль, придающий линии выпуклый вид.
.delimetr {
padding-bottom: 1px;
background-color: #9b9b9b;
border-bottom:1px solid #F4F4F4;
}Ссылки в подвале нашей страницы запишем в виде списка. Опять же, если вам интересует кроссбраузерность, нужно будет обратить внимание на некоторые нюансы.
#footer ul
{
margin:1em;
float:left;
}
#footer ul li
{
padding:5px;
display:inline;
}
#footer ul li a
{
color:green;
text-decoration:none;
<ul>
<li><a href="">Главная сайта</a></li>
<li>|</li>
<li><a href="">Карта сайта</a></li>
<li>|</li>
<li><a href="">Гарантии</a></li>
</ul>Запишем правила CSS, определяющие стиль:
#footer ul
{
margin:1em;
float:left;
}
#footer ul li
{
padding:5px;
display:inline;
}
#footer ul li a
{
color:green;
text-decoration:none;
}
Уведомление об авторских правах, согласно макету, у нас должно быть расположено с правой стороны. Самый простой способ сделать это – вынести его в отдельный элемент, и прижать этот к правой стороне.
<span id="copyright">(С) Вася Пупкин</span>В таблицу стилей внесем следующее правило:
#copyright {
margin: 1em;
float: right;
}Из-за того, что мы использовали плавающий элемент, могут возникнуть небольшие проблемы с позиционированием. Поэтому после блока определяющего подвал страницы нужно запретить обтекание.
<div class="lastik"></div>
Наша страница практически готова, осталось разместить лишь контент.
<img class="pics" src="stomatolog.jpg" alt=""
/>
<p>Далеко-далеко в одном сказочном городе живут <span class="delete">3,2... ой,</span> 32 маленьких веселых
зубика. Веселые они потому, что никогда не болеют. Зубики очень любят принимать
ванны и чиститься щеточкой, поэтому эмаль у них всегда здоровая и блестящая.</p>
<p>Иногда к ним из космоса прилетают нехорошие дяденьки: кариес и зубной камень.
Тогда зубики быстренько бегут к доброй тетеньке стоматологу из стоматологической
клиники «Веселый зубик», и она оказывает им высококвалифицированную помощь в борьбе со злобными
врагами.</p>
<p>Тетенька стоматолог уже очень долгое время помогает зубикам, она постоянно
совершенствует свое мастерство в борьбе против злостных врагов маленьких
зубиков. Также тетенька стоматолог делает зубиков красивыми и помогает им быть
здоровыми.</p>
<p>В этой клинике работают и другие дяденьки и тетеньки стоматологи. Они тоже очень
часто помогают зубикам. Все они очень любят зубиков и обращаются с ними очень
вежливо и заботливо.</p>
Здесь вначале располагается растянутое по ширине изображение (для класса "pics" задано правило width: 100%), а весь текст разбит на абзацы. Учитывая то, что нам был нужен зачеркнутый участок текста, а тег del в используемом нами типе документа не существует, мы выделили этот текст тегами span и задали для него правило:
.delete { text-decoration:line-through }
Теперь наша страница полностью готова для просмотра на экране монитора.
Обсуждение статьи
