Стилі оформлення елементів сторінки

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

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

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

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

Списки

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

Цитаты и код

Чтобы получилась симпатичненькая цитатка <q> возьмите ее в такой тег. Полные цитаты оформляем с помощью тегов <blockquote> и <cite>

<blockquote>
Погляди вокруг и принюхайся хорошенько: здесь все лжецы, все до одного, и каждый лжет лучше, чем ты.
<cite>Джордж Мартин. "Битва королей"</cite>
</blockquote>

Погляди вокруг и принюхайся хорошенько: здесь все лжецы, все до одного, и каждый лжет лучше, чем ты.
Джордж Мартин. “Битва королей”

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

pre {
    margin: 15px 0;
    padding: 10px;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 18px;
    white-space: pre-wrap;
}

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


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

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

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

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

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


Списки

<ul class="zebra">
	<li>Это список <code>class="zebra"</code></li>
	<li>Это список <code>class="zebra"</code></li>
	<li>Это список <code>class="zebra"</code></li>
</ul>
  • Это список class="zebra"
  • Это список class="zebra"
  • Это список class="zebra"
<ul class="check">
	<li>Это список <code>class="check"</code></li>
	<li>Это список <code>class="check"</code></li>
	<li>Это список <code>class="check"</code></li>
</ul>
  • Это список class="check"
  • Это список class="check"
  • Это список class="check"
<ul class="line">
	<li>Это список <code>class="line"</code></li>
	<li>Это список <code>class="line"</code></li>
	<li>Это список <code>class="line"</code></li>
</ul>
  • Это список class="line"
  • Это список class="line"
  • Это список class="line"

Таблицы

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

<table class="zebra"><caption>Название таблицы</caption>
<thead>
<tr>
<th>Заголовок таблицы</th>
<th>Заголовок таблицы</th>
<th class="center">Заголовок таблицы по центру</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Подвал таблицы</td>
<td>Подвал таблицы</td>
<td class="center">Подвал таблицы по центру</td>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<td>Данные таблицы</td>
<td>Данные таблицы</td>
<td class="center">Данные таблицы по центру</td>
</tr>
<tr>
<td class="bold">Данные таблицы жирные</td>
<td>Данные таблицы</td>
<td class="center">Данные таблицы по центру</td>
</tr>
<tr class="odd">
<td>Данные таблицы</td>
<td>Данные таблицы</td>
<td class="center">Данные таблицы по центру</td>
</tr>
</tbody>
</table>
Название таблицы
Заголовок таблицы Заголовок таблицы Заголовок таблицы по центру
Подвал таблицы Подвал таблицы Подвал таблицы по центру
Данные таблицы Данные таблицы Данные таблицы по центру
Данные таблицы жирные Данные таблицы Данные таблицы по центру
Данные таблицы Данные таблицы Данные таблицы по центру

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

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

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

Формы

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

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

Разное

Кнопки

Можно вставлять различные кнопки которые меняют цвет в зависимости от темы

<a class="button-primary icon-download" href="#"><span class="icon-download"></span>Download now</a>
<a class="button-primary icon-buy" href="#"><span class="icon-buy"></span>Buy now</a>
<a class="button-primary" href="#">Кнопка кудысь</a>
<a class="button-default" href="#">Кнопка кудысь</a>

Download now
Buy now
Кнопка кудысь
Кнопка кудысь

Видео

Видео вставляем с помощью кода <iframe width="640" height="480" src="http://www.youtube.com/embed/rH61FLzLSxk?rel=0" frameborder="0" allowfullscreen></iframe>

Документы

Так же можно вставлять xls, doc и pdf файлеги шорткодом [ gview file="http://lisliceum.org.ua/wp-content/uploads/2012/09/11_shed.pdf" ]

Скачать (PDF, 142KB)

Доска объявлений

Нам – 15!Уважаемые выпускники лицея! Ждем ваших фотографий, сообщений о вашей жизни, ваших успехах.

Для красивого оформления небольшого объявления используем

<div class="board-right">
<strong>Нам – 15!</strong>
<p>Уважаемые выпускники лицея! Ждем ваших фотографий, сообщений о вашей жизни, ваших успехах.</p>
</div>

Как вы понимаете, если есть класс “board-right”, значит есть и класс “board-left” ;-).

Легенда

Некоторый текст можно заключить в красивую легенду (цвет один, но он в тему сайдбара, честно говоря больше делать было лень, да и не за чем)

<div class="legend">
<strong>Легенда блока</strong>
Ну а тут собственно сам текст блока.
</div>
Легенда блокаНу а тут собственно сам текст блока.

Ссылка со всплывающей подсказкой

Можно сделать прикольную ссылку со всплывающей подсказкой или просто всплывающую подсказку если вместо ссылки тупо вставить #

<a class="tooltip" href="#">
Ссылка кудысь
<dfn>Бла-бла-бла об этой ссылке или подсказка</dfn>
</a>


Ссылка кудысь
Бла-бла-бла об этой ссылке или подсказка

Позиции темы

Module Positions

Module Positions

Module Layouts

Module Layouts

Column Layouts

Column Layouts


Оставить комментарий

© Лисичанский многопрофильный лицей, 2013-2017
 by tux