Наш урок CSS вёрстки открывает новую серию уроков, в которых будет рассказано о различных способах создания шаблонов сайтов. Начнём с самого простого, стандартного типа шаблонов. Его особенности:
- 3 колонки
- Стандартные поля заголовков
- Простое меню
- Отсутствие таблиц
- Отсутствие графики
Думаю, что этот шаблон будет очень удобен при изучении вёрстки на "дивах" (div).
Итак, попробуем сделать его...
Основой веёрсти такого типа является CSS.
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
/* Задание стилей всего шаблона */
body {
font: 80% Arial;
text-align:center;
}
/* Задание стилей новой строки */
p {margin:0 10px 10px;}
/* Задание стилей ссылок */
a {
padding:5px;
text-decoration:none;
color:#0053a1;
}
/* Задание стилей ссылок при наведении */
a:hover {
text-decoration:underline;
color:#067a00;
}
/* Задание стилей блока заголовка */
div#header {
background-color:#005387;
color:#fff;
height:80px;
line-height:80px;
padding-left:20px;
}
/* Задание стилей всего шаблона */
div#all {
text-align:left;
width:750px;
margin:0 auto;
}
/* Задание стилей навигации */
div#navigation {
background:#e3f4ff;
float:left;
width:150px;
margin-left:-750px;
}
/* Задание стилей списка */
div#navigation ul {
margin:15px 0;
padding:0;
list-style-type:none;
}
/* Задание стилей элемента списка */
div#navigation li{margin-bottom:5px;}
/* Задание стилей правого столбца */
div#extra {
background:#c1e7ff;
float:left;
width:150px;
margin-left:-150px;
}
/* Задание стилей "подвала" */
div#footer {
background-color:#013657;
color:#fff;
clear:left;
height:25px;
}
div#footer p {
margin:0;
padding:5px 10px;
}
/* Задание стилей всего шаблона */
div#templ {
float:left;
width:100%;
}
/* Задание стилей центрального столбца */
div#content {margin: 0 150px;}
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<title>Российская школа CSS. Учебный шаблон 1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="all">
<div id="header"><h1>Учебный шаблон №1</h1></div>
<div id="templ">
<div id="content">
<p><strong>Основное содержание</strong></p>
<p>Какой-то текст</p>
</div>
</div>
<div id="navigation">
<p><strong>Навигация</strong>
0;/p>
<ul>
<li>→ <a href="http://www.css-school.ru/">Школа CSS</a></li>
<li>→ <a href="#">Ссылка 1</a></li>
<li>→ <a href="#">Ссылка 2</a></li>
<li>→ <a href="#">Ссылка 3</a></li>
<li>→ <a href="#">Ссылка 4</a></li>
<li>→ <a href="#">Ссылка 5</a></li>
</ul>
</div>
<div id="extra">
<p><strong>Дополнительно</strong>
;</p>
<p>Различные полезные блоки, реклама и т.д.</p>
</div>
<div id="footer">
<p>© Copyright</p>
</div>
</div>
</body>
</html>
4) Сохраняем и смотрим, что получилось.
Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.x - 3.x; Oprea 9.xx
ДемоПо материалам сайта:
Российская школа CSS
