Переходим к верстке. Возьмем стартовый шаблон для резинового макета с двумя колонками из папки \float\float2 данного учебника. Скопируем файлы index.html и style.css в нашу папку на рабочем столе.
В файле index.html изменим заголовок веб-страницы:
<title>Example</title>
И запишем в контейнере <div id="main"></div> между тегами <div class="content"></div> заголовок и абзац:
<div id="main">
<div class="content">
<h1>Строительные материалы и оборудование</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <a href="">cillum dolore eu fugiat nulla pariaturds.</a> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
В остальных блоках удалите текст (шапка, левая колонка, подвал).
Теперь пропишем общие свойства для данной страницы в файле style.css:
body {
background: #f3f9fa url("img/bg.jpg") repeat;
font: 14px/22px Arial;
color: #444;
}
background – универсальное свойство, при помощи которого можно одновременно задавать несколько значений для фона. В нашем случае мы указали цвет фона #f3f9fa, путь к фоновому изображению url("img/bg.jpg"), и повторение фонового изображения на странице repeat.
font – универсальное свойство, при помощи которого мы можем одновременно задать несколько значений для шрифта. Обязательными являются размер и семейство шрифтов. Также вы можете указать начертание, стиль, межстрочный интервал и т.д. В нашем примере мы указали размер – 14px, межстрочный интервал – 22px и семейство шрифтов – Arial.
color – цвет текста.
Сразу зададим свойства для ссылок, заголовков и абзацев:
a {
color: #0083df;
}
a:hover {
text-decoration: none;
}
h1 {
font: normal 26px/26px Arial;
margin-bottom: 20px;
}
h2 {
font: normal 22px/22px Arial;
margin-bottom: 20px;
}
h1,h2,h3 {
color: black;
}
p {
margin-bottom: 15px;
}
:hover – псевдокласс, определяющий стиль ссылки при наведении на нее курсора мыши. Мы указали свойство text-decoration со значением none, т.е. при наведении курсора мыши на ссылку у нее будет пропадать подчеркивание.
По умолчанию все заголовки имеют жирное начертание, но в нашем макете заголовки первого и второго уровня имеют обычное начертание, поэтому первым значением у свойства font мы указали normal, затем идет размер, межстрочный интервал и семейство шрифтов.
Для всех заголовков мы указали черный цвет: h1,h2,h3 {color: black;}.
Для абзацев мы указали отступ снизу, равный 15px: p {margin-bottom: 15px;}.
Удалите свойство background-color у селекторов #wrap, #header, #footer. И свойство padding у селектора .content.
Переходим к верстке шапки.
Комментарии