урок CSS. Этот – будет посвящен одному из способов создания блока статистики (горизонтальных столбцов).
Итак, приступим к уроку...
Для выполнения нам не понадобятся картинки. Значит, по традиции, создаём файлы index.html и style.css.
В код html страницы записываем стандартный начальный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Российская школа CSS. Урок CSS 24. Блок статистики</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
Теперь – зададим блок статистики и закроем код страницы. Сделаем это при помощи блоков div:
<h1>Деловая активность в Россиии (по годам в процентах)</h1> <div class="s1"><b>2003 - 52%</b></div> <div class="s2"><b>2004 - 64%</b></div> <div class="s3"><b>2005 - 61%</b></div> <div class="s4"><b>2006 - 68%</b></div> <div class="s5"><b>2007 - 79%</b></div> </body> </html>
Теперь посмотрим, что у нас получилось:
Не очень красивая и наглядная статистика получилась. Тем не менее, первую половину работы мы сделали. Теперь осталось самое интересное – задать стили, которые и сформируют реальный вид блока.
Записываем в style.css стандартное начало и стили для всей страницы:
/*
=============================================================
© 2008 Урок CSS . Блок статистики
style.css - Набор стилей для урока
=============================================================
*/
body {
width:600px;
margin:0 auto;
}
Готово. Теперь запишем стили для заголовка и всего блока статистики:
h1 {
font:20px Arial;
color:#005271;
font-weight:bold;
}
div {
margin:0;
display:block;
width:590px;
height:30px;
background:#5aa1bb;
border-bottom:1px solid #fff;
}
Дальше – общие стили для свободного пространства блоков:
div b {
float:right;
display:block;
background:#6ac3ec;
margin-left:auto;
height:30px;
line-height:2em;
text-align:right;
padding-right:5px;
}
Замечательно. Теперь запишем стили для самих строк статистики:
.s1 {background:#ff9600;}
.s2 {background:#61ab00;}
.s3 {background:#dfc200;}
.s4 {background:#0018ff;}
.s5 {background:#b50000;}
div.s1 b {width:48%; background:#ffcd86;}
div.s2 b {width:36%; background:#bbf479;}
div.s3 b {width:39%; background:#f6eb8e;}
div.s4 b {width:32%; background:#abc9ff;}
div.s5 b {width:21%; background:#ffa6a6;}
Замечу, что .s* - стили для заполненной части строки, а div.s* b - для пустой. Также, вместо цвета, Вы можете использовать любой рисунок, например градиент (это делается через background-image).
Вот и всё… Теперь можно оценить, какое чудо совершили стили, превратив черно-белый список в яркую и наглядную статистику.
На этом – наш урок заканчивается. Спасибо за внимание!
| 
Главная