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

Воскресенье, 22 Ноября 2015 г. 22:19 + в цитатник

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

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

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

Вот она, самая простая линия, для ее вставки просто поставьте в строчку Тег 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 - Несколько оригинальных формул и ссылок для дневника
...
Часть 14 - Он-лайн графические редакторы
Часть 15 - Бродилка по РУБРИКАМ моего дневника.
Часть 16 - HTML шпаргалка по линиям

Серия сообщений "Разделители":
Часть 1 - Разделители для текста-золото
Часть 2 - РАЗДЕЛИТЕЛИ-БАБОЧКИ,АНИМИРОВАННЫЕ
...
Часть 25 - Коллекция оригинальных разделителей на тему ОСЕНЬ
Часть 26 - Разделяем текст линиями
Часть 27 - HTML шпаргалка по линиям
Часть 28 - Золотые разделители с кодами
Часть 29 - Новогодние разделители
...
Часть 35 - декор разделители для текста «золото серебро цветочный»
Часть 36 - ❄С Рождеством Христовым!❄надписи gif
Часть 37 - Коллекция НОВОГОДНИХ разделителей

Рубрики:

Уроки Галины Шадриной

Метки: HTML шпаргалка по линиям

<a href="https://www.liveinternet.ru/users/5142053/post377520013/">HTML С€РїР°СЂРіР°Р»РєР° РїРѕ Р»РёРЅРёСЏРј</a><br/>
Р›РёРЅРёРё РјРѕР¶РЅРѕ РїСЂРёРјРµРЅСЏС‚СЊ, РЅР°РїСЂРёРјРµСЂ, РґР»СЏ С‚РѕРіРѕ, С‡С‚РѕР±С‹  РґРµР»РёС‚СЊ РїРѕСЃС‚ РЅР° Р»РѕРіРёС‡РµСЃРєРёРµ СЂР°Р·РґРµР»С‹, РѕС‚РґРµР»СЏС‚СЊ РґСЂСѓРі РѕС‚ РґСЂСѓРіР° С†РёС‚Р°С‚С‹, РјС‹СЃР»Рё, Р°С„РѕСЂРёР·РјС‹.

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

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

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

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

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

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

&lt;hr noshade&gt;

РљРѕСЂРѕС‚РєР°СЏ РЅРµРѕР±СЉРµРјРЅР°СЏ 60%.

&... <a href="https://www.liveinternet.ru/users/5142053/post377520013/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Рубрики

-Музыка

-Приложения

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

-Друзья

-Статистика

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

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