Розмітка хмари тегів (исходники)

Сьогодні в черговий раз мені пощастило зіткнутися з версткою хмари тегів. Такого, знаєте, стандартного, без надмірностей і дизайнерських наворотів. Зазвичай конструкція даного блоку ставала в підсумку схожою на:

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

  • аварія
    </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>

  • аварія
    </ul>
  • Схожі статті:


    Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

    Коментарів поки що немає.

    Ваш отзыв

    Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    *

    *