Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

Вставка

Доброго Вам времени суток, уважаемые подписчики!

Представляю Вашему вниманию девятнадцатый выпуск информационной рассылки сайта "Веб дизайн в примерах". В этом выпуске рассмотрим выделение части контента сайта с помощью вставок.


Вставка - один из простых способов подчеркнуть ключевые моменты на странице.

Вставки - это выделенные часть текста размещающиеся сбоку от основного текста. Вставка - один из простых способов подчеркуть ключевые моменты на странице (тезисы, см. пример). Ее можно также использовать для того, чтобы привести дополнительную справочную информацию без разрыва нити повествования в основном тексте (см. пример). Вставку можно использовать и просто как блок ссылок на тематические ресурсы.

С точки зрения верстки, вставки представляют собой плавущие объекты и создаются с использованием свойства таблиц стилей float. Для начала опишем класс incut (с английского переводится как вставка).

<style>
.incut {
float:right;
width:200px;
margin:10px;
padding: 5px;
border: 1px dotted #aaa;
background-color: #eee;
text-align:justify;
font-size:12px;
}
</style>

Поясним приведенный выше код. Свойство float:right - означает, что плавающий объект будет выравнен по правому краю. Для выравнимания по левому краю используется float:left. width задает ширину вставки, margin и padding отступы от внешней и внутренней границы вставки соответственно. Свойство border задает тип рамки (в нашем случае толщиной в один пиксель пунктирной серой линией). Свойство background-color задает цвет фона (у нас он светло серый), а свойства text-align и font-size выравнивание и размер такста соответственно. Создать вставку можно задав описанный выше стиль incut для тега <div>. Использованная в этой рассылке вставка имеет вид:

<div class="incut">
Вставка - один из простых способов подчеркнуть ключевые моменты на странице.
</div>
Новости сайта/полезные ссылки

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").

Реклама

Plug&Pray
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0176 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net