Опубликовал HaZarD 27.04.2024 в раздел: Отдельные уроки | 0 комментов

Здравствуйте уважаемые посетители! Позвольте представить Вам очередной урок. Этот – будет посвящен одному из способов создания блока статистики (горизонтальных столбцов).
Итак, приступим к уроку...

Для выполнения задания, нам не понадобятся картинки. Значит, по традиции, создаём файлы 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>Блок статистики</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 стандартное начало и стили для всей страницы:

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).

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



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

Совместимость: Internet Explorer 5 - 7; Mozilla Firefox 1.xx - 3.xx Opera 7.хх - 9.xx.

0 Комментариев