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

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

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

Вот она, самая простая линия, для ее вставки просто поставьте в строчку Тег 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 самых полезных сайтов Интернета
...
Часть 28 - Вставляем картинки в свои сообщения
Часть 29 - Справочник html по изображениям
Часть 30 - Как сохранить гифку из Одноклассников

Метки: шпаргалки уроки для блогов мои уроки полезности

Процитировано 178 раз
Понравилось: 129 пользователям

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

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

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

Liudmila_Sceglova обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:17 (ссылка)

Благодарю!Уютного воскресного вечера!

Ответить С цитатой В цитатник

RozArija обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:22 (ссылка)

спасибо

Ответить С цитатой В цитатник

Ангелина2010 обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:47 (ссылка)

Благодарю!

Ответить С цитатой В цитатник

О_себе_-_Молчу обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:47 (ссылка)

Если взять рамочку "картинки в ряд", то можно получить:

Ответить С цитатой В цитатник

LiveInternetLiveInternet

-Рубрики

-Приложения

-Всегда под рукой

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

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

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

-Статистика

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

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