Русские документы
Ежедневные компьютерные новости RSS rusdoc.ru  Найти :
Новости
Последние поступления
Книжный магазин
  Hardware:
Видеоустройства
Системные платы
Процессоры
Мобильные устройства
Аудиосистема
Охлаждение системы
Накопители информации
КПК и ноутбуки
Телефоны и связь
Периферия
Система
Сети
Разные устройства
 
  Programming:
Web-разработка
Языки программирования
Технологии и теория
Разработка игр
Программная инженерия
 
  Software:
Операционные системы
Windows 7
Базы данных
Обзоры программ
Графика и дизайн
   
  Life:
Компьютерная жизнь
Разные материалы
   
Партнеры
Публикация
Правовая информация
Реклама на сайте
Обратная связь
Экспорт в RSS Экспорт в RSS2.0
    Читать в Яндекс.Ленте



Разметка облака тегов

Раздел: Programming / Вебмастеру @ 26.01.2009 | Ключевые слова: html верстка тег облако тэгов версия для печати

Автор: Gunger
Источник: habrahabr

Сегодня в очередной раз мне посчастливилось столкнуться с версткой облака тегов. Такого, знаете, стандартного, без излишеств и дизайнерских наворотов. Обычно конструкция данного блока становилась в итоге похожей на:

<ul class="tags">
    <li class="w1"><a href="#">amv</a></li>
    <li class="w2"><a href="#">anime</a></li>
    <li class="w3"><a href="#">music</a></li>
    <li class="w4"><a href="#">tnt</a></li>
    <li class="w5"><a href="#">авария</a></li>
</ul>

Классы w1, w2, w3 и т.д. расставляются по мере увеличения весомости тега и, следовательно, увеличивают размеры шрифта.

Для наглядности покажу, как это выглядит в браузере:

image
Сегодня же я изменил этот блок и получил неожиданный результат — именование классов в соответствии с общепринятыми обозначениями размеров одежды удобно и в данном случае (XS < S < M < L < XL < XXL < XXXL). Если нужно больше пунктов, это решается добавлением в конец или начало списка элемента с нужным количеством предшествующих знаков X. В итоге конструкция прекрасно видоизменяется, а мы радуемся ее приобретенной семантичности.

<ul class="tags">
    <li class="s"><a href="#">amv</a></li>
    <li class="m"><a href="#">anime</a></li>
    <li class="l"><a href="#">music</a></li>
    <li class="xl"><a href="#">tnt</a></li>
    <li class="xxl"><a href="#">авария</a></li>
</ul>

Это интересно:








версия для печатиРаспечатать статью


Вернуться в раздел: Programming / Вебмастеру


Реклама:
Читать наc на:

Add to Google
Читать в Яндекс.Ленте






Rambler's Top100
© Copyright 1998-2012 Александр Томов. All rights reserved.