В данном уроке рассматривается создание временной шкалы на основе только CSS и HTML. Использование изображений сознательно избегается для организации чистой и простой разметки. Такая временная шкала может быть полезна в резюме проекта или специалиста для наглядного отражения развития во времени. Что должно получиться в итоге? Давайте взглянем на изображение результата: Временная шкала с использованием CSS У нас получится прекрасная шкала времени на основе CSS. Но что случится, если по каким-то причинам у посетителя сайта не будет доступен CSS? Так как мы используем неупорядоченный список, то события все еще будут выглядеть довольно привлекательно. Даты событий заключены в скобки, что придает им отличный вид, и их всегда можно спрятать с помощью свойства CSS display: none;. Вот пример нашего списка без применения стилей: Графический дизайн и типографика (2007 - 2009) Фотографирую (2006 - 2010) Используют ООП в работах (2005 - 2010) Занимаюсь веб дизайном (2004 - 2010) Учился в школе (2004 - 2006) Рисую иллюстрации к фэнтези (2003 - 2010) Разметка Используется неупорядоченный список. Все очень просто и ясно. Для такого решения используются строчные стили, что всячески порицается гуру веб дизайна. Дело в том, что если с помощью PHP или другого серверного языка формировать список для временной шкалы, то в скрипте можно рассчитать правильные значения ширины и положения каждого блока и установить значения свойств width и left в строчных стилях. 01 <div class="timeline"> 02 03 <ul class="events"> 04 <li style="width: 42.48%; left: 57.2%;">Графический дизайн итипографика <em>(2007 - 2009)</em></li> 05 <li style="width: 56.68%; left: 43%;">Фотографирую <em>(2006 - 2010)</em></li> 06 <li style="width: 71.3%; left: 28.4%;">Используют ООП в работах <em>(2005 - 2010)</em></li> 07 <li style="width: 85.5%; left: 14.2%;">Занимаюсь веб дизайном <em>(2004 - 2010)</em></li> 08 <li style="width: 42.75%; left: 0pt;">Учился в школе <em>(2004 - 2006)</em></li> 09 <li style="width: 99.5%; left: 0pt;">Рисую иллюстрации к фэнтези <em>(2003 - 2010)</em></li> 10 </ul><!-- .events --> 11 12 <ul class="intervals"> 13 <li class="first"><em>2004</em></li> 14 <li><em>2005</em></li> 15 <li><em>2006</em></li> 16 <li><em>2007</em></li> 17 <li><em>2008</em></li> 18 <li><em>2009</em></li> 19 <li class="last"><em>2010</em></li> 20 </ul><!-- .intervals --> 21 22 23 </div> CSS CSS код такой же простой как и HTML. Используется свойство border-radius. Это свойство CSS3 и оно поддерживается еще не во всех браузерах. 01 ul.events { 02 list-style-type: none; 03 margin: 0; 04 padding: 0 0 20px 0; 05 } 06 07 ul.events li { 08 -webkit-border-radius: 11px; 09 -moz-border-radius: 11px; 10 border-radius: 11px; 11 background: #eee; 12 border: 1px solid #ddd; 13 color: #707070; 14 font-size: 1.2em; 15 font-weight: bold; 16 margin-bottom: 6px; 17 padding: 3px 0; 18 position: relative; 19 text-align: center; 20 } 21 22 ul.events li em { 23 color: #aaa; 24 font-weight: normal; 25 font-size: 0.9em; 26 } 27 28 ul.intervals { 29 list-style-type: none; 30 padding: 0; 31 display: block; 32 } 33 34 /* Ширина зависит от количества интервалов. Например, 100 / 7 = 14.29% -- затем вычитаем еще немного для окантовки */ 35 ul.intervals li { 36 background: #fff url(/images/1x1_eee.gif) repeat-x left 10%; 37 border-right: 1px solid #ccc; 38 color: #999; 39 float: left; 40 font-size: 1.2em; 41 margin: 0; 42 padding: 15px 0; 43 text-align: center; 44 width: 14.17%; 45 } 46 47 ul.intervals li.first { 48 border-left: 1px solid #ccc; 49 } Заключение Довольно таки приличная временная шкала получилась с использованием только CSS и неупорядоченных списков. Конечно, решение не очень изящное, но оно доступно для всех пользователей ( в том числе и для тех, у кого отключен JavaScript).