Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 24. Создание блока статистики
Не нравится(-) 103 Нравится(+)
25-10-2008, 22:56 - GZ Design (Уроки CSS)
Урок CSS 24. Создание блока статистики

Здравствуйте уважаемые посетители Российской школы CSS! Позвольте представить Вам очередной урок 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>

Теперь посмотрим, что у нас получилось:
Урок CSS 24. Создание блока статистики

Не очень красивая и наглядная статистика получилась. Тем не менее, первую половину работы мы сделали. Теперь осталось самое интересное – задать стили, которые и сформируют реальный вид блока.
Записываем в style.css стандартное начало и стили для всей страницы:
/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №24. Блок статистики
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).

Вот и всё… Теперь можно оценить, какое чудо совершили стили, превратив черно-белый список в яркую и наглядную статистику.
Урок CSS 24. Создание блока статистики


На этом – наш урок заканчивается. Спасибо за внимание!


Автор урока: Григорий Загребельный, Российская школа CSS
Совместимость: Internet Explorer 5 - 7; Mozilla Firefox 1.xx - 3.xx Opera 7.хх - 9.xx.


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 18319 раз(а) и написали 13 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!