Хаки и Скрипты Next Generation CMS : Изображения : Линии

irbees2008 Опубликовано - 21 - января Изображения

Адаптировал: irbees2008
Уровень сложности исполнения: Справочник

Линии можно применять, например, для того, чтобы делить пост на логические разделы, отделять друг от друга цитаты, мысли, афоризмы.
Замечу, что цветные линии отображаются на 100% корректно только в IE
Вот она, линия:

ее код:

Код:

<hr />

Далее выравниваем по центру и длиной будет 60%

Код:

<hr align=center width=60%>

По умолчанию линия имеет толщину 2 пиксела и некоторую объемность.

Необъемная линия:

Код:

<hr noshade>

Задаем длину 60% и размер 3

Код:

<hr noshade width=60% size="3">

Добавим цвета и размер

Код:

<hr size=3 color="#FF0000">

Зададим только цвет

Код:

<hr color="#00B344">

Зададим ширину в 3px а размер 50

Код:

<hr noshade  align="center" width="3" size="50">

размер ,длина ,выравнивание ,цвет

Код:

<hr size="5" width="60%" align="center" color="blue">

Код:

<hr color="blue" size="7" style="border: dotted 5pt; border-color: red ">

Код:

<hr color="red" size="9" style="border: dotted 5pt; border-color: blue ">

Код:

<hr color="black" size="4" style="border: dashed 5pt; border-color: aqua ">

Повторюсь, что цветные линии корректно отображает только IE, поэтому иногда проще использовать клавиатурные или спец. символы:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

оформленные в виде текстового абзаца:

Код:

<p align=center style=color:blue;>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>

Можно выпендриться как-нибудь эдак:

Код:

<img src="https://ngcmshak.ru/uploads/images/default/0_4cbd6_af6edb8e_orig.gif" align=center>

эдак:

Код:

<img src="https://ngcmshak.ru/uploads/images/default/0_4dfe0_854d71d4_orig.gif" align=center />

эдак:

Код:

<img src="https://ngcmshak.ru/uploads/images/default/0_494d3_dc2d1f61_orig.gif" align=center />

или эдак:

Код:

<img src="https://ngcmshak.ru/uploads/images/default/0_48b51_eb1cfaf8_orig.png" align=center />

Эти линии представляют собой картинки (и их должны корректно отображать все браузеры).Собраний таких картинок в сети сейчас пруд пруди.Например, ЗДЕСЬ.Наберите в поисковике divider — и вперед
/Если нужно прижать линию к левой кромке записи, вместо align=center ставьте align=leftк правой — align=right

Можешь почитать и вот эту статейку "Меню с векторными иконками"

Это тоже интересно

05.06.13Вертикальные линии

Demo 18.02.2013 - 08:52 Очень помогло спасибо, а главное как все оказалось просто,

ответить

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.