Первым делом - создадим файл CSS (можно сделать в блокноте) и html файл следующего вида:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Российская школа CSS. Учебный шаблон 2</title>
</head>
<body>
<div id="site">
Теперь нам надо задать стили для всего шаблона, его ссылок, линий и т.д. Запишем в CSS следующиё код:
/*
=============================================================
© 2008
Урок CSS вёрстки. Простой шаблон сайта 2
style.css - Набор стилей для урока
=============================================================
*/
/* Задание стилей страницы */
html, body {
margin:5px;
color:#333;
text-align:center;
font-family:Arial;
font-size:12px;
}
/* Задание стилей всего шаблона */
#site {
margin:0 auto;
padding:10px;
width:720px;
text-align:left;
}
#site h2 {
font-size:20px;
}
#site h3 {
font-size:15px;
}
/* Задание стилей ссылок всего шаблона */
a {
color:#e39601;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#fff;
}
/* Задание стилей горизонтальных линий */
hr {
margin:10px 0;
border:0;
width:90%;
background-color:#bcd2ff;
color:#bcd2ff;
height:1px;
clear:both;
text-align:center;
}
Итак, мы задали стили всего шаблона (общего блока). Пора приступать к созданию блока верхнего меню.
Продолжим наш html следующим кодом:
<div id="nav">
/ <a href="http://www.good-ok.at.ua/">GooD-OK- Стиль жизни</a> / <a href="#">Ссылка 2</a> / <a href="#">Ссылка 3</a> / <a href="#">Ссылка 4</a> /
</div>
А в CSS запишем такие стили:
/* Задание стилей блока навигации */
#nav {
background:#006abb;
padding:18px;
color:#fff;
font-weight:bold;
}
Итак, блок навигации готов. Продолжим наш шаблон блоком заголовка. Для этого - запишем в html следующий код:
<div id="header">
<h1>Название сайта</h1>
</div>
<h2>Заголовок 1</h2>
<p>Текст под заголовком 1</p>
<hr />
Отлично. Теперь запишем в CSS файл:
/* Задание стилей блока заголовка */
#header {
height:130px;
padding:30px;
background-color:#004982;
border-top:1px solid #fff;
color:#fff;
}
Пришло время для того, чтобы создать первые три блока содержания. Это довольно просто. Запишем в html такой код:
<div id="set1">
<div id="cell_1">
Содержание блока 1/3
</div>
<div id="cell_2">
Содержание блока 2/3
</div>
<div id="cell_3">
Содержание блока 3/3
</div>
</div>
<hr />
<h3>Заголовок 2</h3>
<p>Текст под заголовком 2</p>
Готово. Пишем в CSS такие стили:
/* Задание стилей блоков столбцов */
#set1 {
height:175px;
color:#fff;
text-align:center;
}
#set2 {
height:130px;
color:#fff;
text-align:center;
}
/* Задание стилей блока 1 (3 столбца) */
#cell_1 {
padding:10px;
float:left;
width:210px;
background-color:#006abb;
height:150px;
}
#cell_2 {
margin:0 14px;
padding:10px;
float:left;
width:210px;
background-color:#006abb;
height:150px;
}
#cell_3 {
padding:10px;
float:left;
width:210px;
background-color:#006abb;
height:150px;
}
Важно заметить, что мы задали сразу ширину обоих строк блоков (см. #set1 и #set2 соответственно).
Аналогично с первой строкой блоков- создадим вторую и закроем наш html:
<div id="set2">
<div id="box_1">
Содержание блока 1/4
</div>
<div id="box_2">
Содержание блока 2/4
</div>
<div id="box_3">
Содержание блока 3/4
</div>
<div id="box_4">
Содержание блока 4/4
</div></div>
<hr />
</div>
</body>
</html>
/* Задание стилей блока 2 (4 столбца) */
#box_1 {
padding:8px;
float:left;
width:150px;
background-color:#006abb;
height:100px;
}
#box_2 {
margin-left:16px;
margin-right:8px;
padding:8px;
float:left;
width:150px;
background-color:#006abb;
height:100px;
}
#box_3 {
margin-left:8px;
margin-right:16px;
padding:8px;
float:left;
width:150px;
background-color:#006abb;
height:100px;
}
#box_4 {
padding:8px;
float:left;
width:150px;
background-color:#006abb;
height:100px;
}
Ну вот и всё. Урок, конечно получился длинным, но думаю, что шаблон заслуживает его, ведь такой приём вёрстки довольно популярен сегодня.
Считаю, что более подробные пояснения были полезны многим нашем пользователям и сделали урок более понятным.
Главная