HTML шпаргалка по линиям

Среда, 24 Февраля 2016 г. 19:44 + в цитатник

Цитата сообщения Шадрина_Галина

Прочитать целиком В свой цитатник или сообщество!

HTML шпаргалка по линиям

Линии можно применять, например, для того, чтобы делить пост на логические разделы, отделять друг от друга цитаты, мысли, афоризмы.

Вот она, самая простая линия, для ее вставки просто поставьте в строчку Тег hr (Horisontal Rule)

ее код: <hr>

Линию можно сделать не во всю страницу, а более короткую, разделительную. Ширину проставляем в %. В примере стоит 60%, вы можете поменять на свою.

ее код: <hr align=center width=60%>

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

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

<hr noshade>

Короткая необъемная 60%.

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

У линии можно проставить цвет. Красная линия

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

Зеленая линия

<hr color="#00B344"><br /> <textarea width="60%"" rows="1" cols="40"><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 ">

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

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

оформленные в виде текстового абзаца:
<p align=center style=color:blue;>~~~~~~~~~~~~~~~~~~~~~~~~</p>

Различные декоративные линии представляют собой картинки Собраний таких картинок в сети очень много. Например можете ВЗЯТЬ ЗДЕСЬ .

Если нужно прижать линию к левой кромке записи, вместо align=center ставьте align=left

к правой — align=right

Горизонтальные линии.

Тег hr (Horisontal Rule), который вставляет в текст горизонтальную разделительную линию. Может иметь следующие атрибуты:

width Определяет длину линии в пикселях или процентах от ширины окна Обозревателя.

size Оопределяет толщину линии в пикселях.

align Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения:

left - выравнивание по левому краю документа.

right - выравнивание по правому краю документа.

center - выравнивание по центру документа (используется по умолчанию).

hoshade Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.

color Определяет цвет линии. Работает те во всех браузерах.

Примеры и коды объемных линий:
ЕЕ код
<hr>

Короткая, прижатая к левому краю
ЕЕ код
<hr width="50%" align="left" size="0">

Задана длинна и ширина (объем)
ЕЕ код
<hr width="80%" size="4">

Объемная с заданной шириой
ЕЕ код
<hr hoshade width="80%" size="20">

Цветная объемная с заданной длиной
ЕЕ код
<hr hoshade width="80%" color="Blue" size="8">

Вместо линии можно сделать круг (точку):

ЕЕ код
<hr hoshade align="left" width="18" color="Red" size="18">

Расположить несколько кругов одну строку, к сожалению, нельзя.

Линия по центру, можно настроить ширину

ЕЕ код <hr align=center width=80%>

Ширина линии 50 %, расположенная в середине строки.

ЕЕ код <hr align=center width=50%>

Разделительная линия выровнена по левому краю;

ЕЕ код <hr width=100 align="left">

Разделительная линия выровнена по правому краю

ЕЕ код <hr width=100 align="right">

Цветные разделители справа и слева

<hr align="right" color="#0e5198" width="100">

<hr align="left" color="#871F78" width="100">

Разделитель выровнен по ширине

<hr width=100 align="justify">

Цветной разделитель, выровнен по заданной ширине

<hr align="justify" color="#0e5198" width="100">

Цветная разделительная линия по ширине страницы, где size=8-толщина разделителя;

<hr color="#0e5198";size=8>

Вот в основном и все коды по линиям. Просто копируйте нужный код понравившейся вам линии и ставьте в свободную строчку. И линия появится у вас.

Урок по линиям, (как и где менять толщину линии, ее цвет и размер СМОТРИМ ЗДЕСЬ

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 13 - Он-лайн графические редакторы
Часть 14 - Бродилка по РУБРИКАМ моего дневника.
Часть 15 - HTML шпаргалка по линиям
Часть 16 - Заморские сайты к НОВОМУ ГОДУ
Часть 17 - 100 самых полезных сайтов Интернета
Часть 18 - Как правильно вставлять код в окошко для кодов.
Часть 19 - Рамочки с флагом своей страны.
Часть 20 - Справочник по основным тегам HTML.

Рубрики:

Блог

Метки: блог

<a href="https://www.liveinternet.ru/users/-_stella/post385301002/">HTML С€РїР°СЂРіР°Р»РєР° РїРѕ Р»РёРЅРёСЏРј</a><br/>HTML С€РїР°СЂРіР°Р»РєР° РїРѕ Р»РёРЅРёСЏРј

Р›РёРЅРёРё РјРѕР¶РЅРѕ РїСЂРёРјРµРЅСЏС‚СЊ, РЅР°РїСЂРёРјРµСЂ, РґР»СЏ С‚РѕРіРѕ, С‡С‚РѕР±С‹  РґРµР»РёС‚СЊ РїРѕСЃС‚ РЅР° Р»РѕРіРёС‡РµСЃРєРёРµ СЂР°Р·РґРµР»С‹, РѕС‚РґРµР»СЏС‚СЊ РґСЂСѓРі РѕС‚ РґСЂСѓРіР° С†РёС‚Р°С‚С‹, РјС‹СЃР»Рё, Р°С„РѕСЂРёР·РјС‹.

Р’РѕС‚ РѕРЅР°, СЃР°РјР°СЏ РїСЂРѕСЃС‚Р°СЏ Р»РёРЅРёСЏ, РґР»СЏ РµРµ РІСЃС‚Р°РІРєРё РїСЂРѕСЃС‚Рѕ РїРѕСЃС‚Р°РІСЊС‚Рµ РІ СЃС‚СЂРѕС‡РєСѓ РўРµРі hr (Horisontal Rule)

РµРµ РєРѕРґ: &lt;hr&gt;

Р›РёРЅРёСЋ РјРѕР¶РЅРѕ СЃРґРµР»Р°С‚СЊ РЅРµ РІРѕ РІСЃСЋ СЃС‚СЂР°РЅРёС†Сѓ, Р° Р±РѕР»РµРµ РєРѕСЂРѕС‚РєСѓСЋ, СЂР°Р·РґРµР»РёС‚РµР»СЊРЅСѓСЋ. РЁРёСЂРёРЅСѓ РїСЂРѕСЃС‚Р°РІР»СЏРµРј РІ %. Р’ РїСЂРёРјРµСЂРµ СЃС‚РѕРёС‚ 60%, РІС‹ РјРѕР¶РµС‚Рµ РїРѕРјРµРЅСЏС‚СЊ РЅР° СЃРІРѕСЋ.

РµРµ РєРѕРґ: &lt;hr align=center width=60%&gt;

РџРѕ СѓРјРѕР»С‡Р°РЅРёСЋ Р»РёРЅРёСЏ РёРјРµРµС‚ С‚РѕР»С‰РёРЅСѓ 2 РїРёРєСЃРµР»Р° Рё РЅРµРєРѕС‚РѕСЂСѓСЋ РѕР±СЉРµРјРЅРѕСЃС‚СЊ.

РќРµРѕР±СЉРµРјРЅР°СЏ Р»РёРЅРёСЏ

&lt;hr noshade&gt;

Рљ... <a href="https://www.liveinternet.ru/users/-_stella/post385301002/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Рубрики

-Метки

-Цитатник

-Ссылки

-Фотоальбом

-Новости

-Поиск по дневнику

-Подписка по e-mail

-Друзья

-Постоянные читатели

-Статистика

HTML шпаргалка по линиям

width	Определяет длину линии в пикселях или процентах от ширины окна Обозревателя.
size	Оопределяет толщину линии в пикселях.
align	Определяет выравнивание горизонтальной линии. Параметр может принимать следующие значения: left - выравнивание по левому краю документа. right - выравнивание по правому краю документа. center - выравнивание по центру документа (используется по умолчанию).
hoshade	Определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.
color	Определяет цвет линии. Работает те во всех браузерах.