Русские документы
Ежедневные компьютерные новости 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.