-Рубрики

 -Приложения

  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Кнопки рейтинга «Яндекс.блоги» Кнопки рейтинга «Яндекс.блоги»Добавляет кнопки рейтинга яндекса в профиль. Плюс еще скоро появятся графики изменения рейтинга за месяц
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо

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

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

Поиск сообщений в Шадрина_Галина

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

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 22.09.2013
Записей: 1405
Комментариев: 51750
Написано: 53768


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

Воскресенье, 22 Ноября 2015 г. 15:06 + в цитатник
0_af4d2_37a681d0_orig.jpg.gif
Линии можно применять, например, для того, чтобы делить пост на логические разделы, отделять друг от друга цитаты, мысли, афоризмы.

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


ее код:


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


ее код:

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


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




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




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




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




Цветную линию так же можно откорректировать по длине.




Можно немного пофантазировать и поставить более красивую линию. Цвет так же можно менять.




Меняем цвет.




И еще одна оригинальная линия.




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

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


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



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


Если нужно прижать линию к левой кромке записи, вместо 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>

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

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

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

Метки:  

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



Liudmila_Sceglova   обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:17 (ссылка)
Благодарю!Уютного воскресного вечера!
Ответить С цитатой В цитатник
RozArija   обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:22 (ссылка)
спасибо
Ответить С цитатой В цитатник
Ангелина2010   обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:47 (ссылка)
Благодарю!
Ответить С цитатой В цитатник
О_себе_-_Молчу   обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:47 (ссылка)
Если взять рамочку "картинки в ряд", то можно получить:





Ответить С цитатой В цитатник
юзи   обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:48 (ссылка)
Галочка, дорогая, спасибо тебе за подсказки и уроки, это очень ценно. Приятного и хорошего тебе дня, милая!
Ответить С цитатой В цитатник
Talya6   обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:52 (ссылка)
Очень интересно, Галочка. Спасибо.
Ответить С цитатой В цитатник
я_просто_Рита   обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:54 (ссылка)
Очень удобно!Галочка,спасибо!!!!!!!!!!!
Ответить С цитатой В цитатник
флора-2014   обратиться по имени Воскресенье, 22 Ноября 2015 г. 15:55 (ссылка)
Спасибо большое!
Ответить С цитатой В цитатник
Rietta   обратиться по имени Воскресенье, 22 Ноября 2015 г. 16:03 (ссылка)
Спасибо большое. Буду разбираться
Ответить С цитатой В цитатник
Галина_Ковальская   обратиться по имени Воскресенье, 22 Ноября 2015 г. 16:12 (ссылка)
Людмила! Ваши "Шпаргалки" беру себе. Спасибо.
Ответить С цитатой В цитатник
Лариса_Виноградова   обратиться по имени Воскресенье, 22 Ноября 2015 г. 16:45 (ссылка)
Галочка,как я люблю все твои хтмэлочки с уроками! Спасибо огромное!
Ответить С цитатой В цитатник
Марина_55   обратиться по имени Воскресенье, 22 Ноября 2015 г. 16:50 (ссылка)
Спасибо, Галочка!
Ответить С цитатой В цитатник
ЕЛАНОЧКА   обратиться по имени Воскресенье, 22 Ноября 2015 г. 17:16 (ссылка)
Спасибо,Галочка! Цитирую.
Ответить С цитатой В цитатник
Дневник_Девы   обратиться по имени Воскресенье, 22 Ноября 2015 г. 17:16 (ссылка)
С БЛАГОДАРНОСТЬЮ,Вероничка
Ответить С цитатой В цитатник
nmaklygina   обратиться по имени Воскресенье, 22 Ноября 2015 г. 17:28 (ссылка)
Красивые разделители! Благодарю!
Ответить С цитатой В цитатник
Галина__К   обратиться по имени Воскресенье, 22 Ноября 2015 г. 17:40 (ссылка)
Спасибо большое Галя,такая огромная работа сделана!
Ответить С цитатой В цитатник
svetukia1941   обратиться по имени Воскресенье, 22 Ноября 2015 г. 18:04 (ссылка)
Вот спасибочки,Галочка,очень нужный пост!!!
Ответить С цитатой В цитатник
Nadin_Aquarius   обратиться по имени Воскресенье, 22 Ноября 2015 г. 18:06 (ссылка)
Цитирую с благодарностью.
Ответить С цитатой В цитатник
Булайчик   обратиться по имени Воскресенье, 22 Ноября 2015 г. 18:51 (ссылка)
Спасибо за урок Галина!!!
Ответить С цитатой В цитатник
Anushka_M   обратиться по имени Воскресенье, 22 Ноября 2015 г. 19:46 (ссылка)
Галочка,спасибо!!!
Ответить С цитатой В цитатник
лариса_67   обратиться по имени Воскресенье, 22 Ноября 2015 г. 20:17 (ссылка)
благодарю
Ответить С цитатой В цитатник
TAISA_ANDRYEYEVA   обратиться по имени Воскресенье, 22 Ноября 2015 г. 22:10 (ссылка)
Отличная работа!!!Благодарю Вас,Галина!!!

(Добавил ссылку к себе в дневник)

Ответить С цитатой В цитатник
Алло_чка44   обратиться по имени Воскресенье, 22 Ноября 2015 г. 22:10 (ссылка)
Галина, огромное спасибо за такое количество шпаргалок! Все пригодятся!
Ответить С цитатой В цитатник
zoua45   обратиться по имени Понедельник, 23 Ноября 2015 г. 06:57 (ссылка)
Очень вам благодарна!
Ответить С цитатой В цитатник
GALINA_RAKITYANSKI   обратиться по имени Понедельник, 23 Ноября 2015 г. 08:04 (ссылка)
Спасибо,Галинка!
Ответить С цитатой В цитатник
Ваша_ТАНЯ_идущая_по_Судьбе   обратиться по имени Понедельник, 23 Ноября 2015 г. 09:28 (ссылка)
ГАЛЮНЯ,приветик,обожаю копаться с ТЕГАМИ,они меня успокаивают лучше любой мантры,...молодец,хорошую подборку сделала
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 24 Ноября 2015 г. 20:03ссылка
Добрый вечер Танечка! Люблю когда коды в одном месте, вот и копаюсь выискивая их.
ТАТЬЯНА_КАТАН   обратиться по имени Понедельник, 23 Ноября 2015 г. 09:38 (ссылка)
Шадрина_Галина, Доброго Вам дня,Галина!!! Ваши уроки бесценны,очень многому научилась и пользуюсь с благодарностью.Всего Вам светлого и доброго... smilie
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 24 Ноября 2015 г. 20:04ссылка
Спасибо за добрые слова! Удачи вам!
Mila-milay   обратиться по имени Понедельник, 23 Ноября 2015 г. 10:31 (ссылка)
Шадрина_Галина, благодарю Вас!
Ответить С цитатой В цитатник
Maksimych   обратиться по имени Понедельник, 23 Ноября 2015 г. 10:51 (ссылка)
Спасибо, Галина! Какой дельный и необходимый для пользования урок!!! Благо дарю и цитирую!
Ответить С цитатой В цитатник
Оксана_Тарасенко   обратиться по имени Понедельник, 23 Ноября 2015 г. 11:52 (ссылка)
Галочка,спасибо большое!!!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] 2 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку