Пример страницы

Содержание


  • Базовые HTML элементы
  • Использование CSS классов

  • Базовые HTML элементы

    Для организации параграфов можно использовать <p> тег. Для организации ссылок используем <a> тег.

    Выделение текста

    Текст ниже будет выделен с использование различных тегов: <em> эмоциональный тег, <strong> жирный, <mark> еще такой тег, <del> типа мы ошиблись или <ins> что-то вставили. Можно еще использовать <abbr> тег аббревиатуры и <dfn> тег определения.

    Списки

    • Это простой список
    • Это простой список
    • Это простой список
    1. Это нумерованный список
    2. Это нумерованный список
    3. Это нумерованный список

    Цитаты и код

    Чтобы получилась симпатичненькая цитатка <q> возьмите ее в такой тег.

    Иногда в текст нужно вставить какаой-нибудь <code> код. Для больших кусков программы или чего-то там еще используется тег <pre>.

    А этот текст набран с помощью тега <small>, маленький он и есть маленький.


    Использование CSS классов

    Выделение текста

    Буквица смотрится как в сказочной книжке, просто в параграфе используем класс class="dropcap". Да…, еще можно вот так текст выделять просто пишем <em class="box">.

    Это текст в диве с классом class="box-content".
    Лично мне этот вариант нравится больше чем предыдущий, используем class="box-note".
    Так можно вставлять напоминалочку, пишем class="box-info".
    Ахтунг, варнинг, караул с классом class="box-warning".
    Энергосберегающая лампочка, а что… просто пишем class="box-hint".
    Нет ничего лучше чем скачать, особенно на халяву с классом class="box-download".

    Это пятнистенькая линеечка с классом class="dotted" кстати, где-то выше была обычная.


    Кнопки

    Кнопки в стиле метро шарашим такой конструкцией:
    < a class=»metro» href=»#» >Кнопка кудысь< /a >
    Кнопка кудысь

    Списки

    • Это список class="zebra"
    • Это список class="zebra"
    • Это список class="zebra"
    • Это список class="check"
    • Это список class="check"
    • Это список class="check"
    • Это список class="line"
    • Это список class="line"
    • Это список class="line"

    Таблицы

    Обычные таблицы рассматривать не будем (их делать проще простого), рассмотрим таблицу с классом class="zebra".

    Название таблицы
    Заголовок таблицы Заголовок таблицы Заголовок таблицы по центру
    Подвал таблицы Подвал таблицы Подвал таблицы по центру
    Данные таблицы Данные таблицы Данные таблицы по центру
    Данные таблицы жирные Данные таблицы Данные таблицы по центру
    Данные таблицы Данные таблицы Данные таблицы по центру

    Таблица с классом class="line".

    Заголовок таблицы Заголовок таблицы Заголовок таблицы
    Данные таблицы Данные таблицы Данные таблицы
    Данные таблицы Данные таблицы Данные таблицы
    Данные таблицы Данные таблицы Данные таблицы

    Список определений

    Список определений делается с помощью класса class="separator".

    Определение
    Список определений делается с помощью тегов <dl>, <dt> и <dd>.
    Определение
    Описание определения.
    Определение
    Описание определения.

    Формы

    Формы делать врядли придется, но пусть будет, используется clacc="box".

    Легенда формы
     

     

     

     


    Клавиатурные кнопки

    Для получения эстетического удовольствия добавил кнопки клавиатуры которые обрамляются тегами < key > название кнопки < /key >.
    Ctrl+F5
    Хм…, нужно будет их немного подкрасить 🙂