Как сделать сплошную линию html

Как сделать сплошную линию html

Урок 16. Как вставить горизонтальную линию на HTML странице.

Автор: Андрей Краснокутский

С помощью тега hr ( Horisontal Rule ) на web-страницу можно вставить горизонтальную разделительную линию. Например вот так:

Вот что мы указали в коде листинга: Линия размером 50 процентов от общей ширины, с выравниванием по центру и толщиной в один пиксель.

Тега hr м ожет иметь следующие атрибуты:

Несколько примеров линий:

Линия размером 50 процентов с выравниванием по левому краю и с нулевой толщиной.

Линия размером 80 процентов, выравнивание по центру и толщиной 3 пикселя:

Вместо линии можно реализовать и квадрат:

Длина и толщина линии одинакова, за счет этого и рисуется квадрат. Он выполнен с выравниванием по центру и имеет красный цвет:

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

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Калян
Дата: 2010-12-03

А как вертикальную?

Комментарии добавил(а): Ника К.
Дата: 2011-01-10

Комментарии добавил(а): пффф
Дата: 2012-12-12

а как вставить картинку? чтобы был не просто горизонтальный разделитель, а картинка в виде гориз.разделит.

Комментарии добавил(а): артьём
Дата: 2014-05-20

спс по инфеи помогло

Комментарии добавил(а): Сергей
Дата: 2015-03-03

Классно! Спасибо автору за простые и понятные примеры!

Комментарии добавил(а): Олег
Дата: 2016-01-23

Пожалуй, можно разместить несколько квадратов в одну линию, но при этом надо применить таблицу. Создаётся строка, а в каждой колонке поместить по квадрату. Это, правда, только предположение. Но попробовать можно.

Добавить Ваш комментарий:

Как сделать сплошную линию html
Заработает каждый
от Школьника до Пенсионера!
» Как?»
Узнать сейчас >>>

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Источник

Как сделать сплошную линию html

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Как сделать сплошную линию html

Как сделать сплошную линию html

Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать горизонтальную линию в HTML.
С помощью горизонтальной линии можно аккуратно выделить меню, название заголовка, подчеркнуть комментарий. А бывает, смотришь на страничку, и чего-то не хватает, добавляешь горизонтальную линию – и вид странички значительно улучшается!
Поэтому, не стоит пропускать этот урок, если он вам показался примитивным и слишком простым. Я думаю, вы на практике сами все увидите и останетесь довольными, что не пропустили этот урок.
Чтобы создать горизонтальную линию в HTML, существует специальный тег:

Закрывающий тег не нужен.

Как сделать сплошную линию html

Атрибуты горизонтальной линии

ширина горизонтальной линии
Чтобы регулировать ширину, достаточно прописать к тегу «HR» атрибут «width» с размерами. Размеры задаются в пикселях ( px ) либо в процентах ( % ):

Как сделать сплошную линию html

толщина горизонтальной линии
Чтобы задать толщину горизонтальной линии, достаточно прописать к тегу «HR» атрибут «size» с размером:

Как сделать сплошную линию html

выравнивание горизонтальной линии

Чтобы выровнять горизонтальную линию по центру, справа или слева, достаточно прописать к тегу «HR» атрибут «align» с такими значениями:

«right» – вправо;
«center» – по центру;
«left» – слева (по умолчанию).

Как сделать сплошную линию html

отменить объемность горизонтальной линии

Чтобы отменить объемность горизонтальной линии, достаточно прописать к тегу «HR» «NoShade» :

Как сделать сплошную линию html

цвет горизонтальной линии

Чтобы задать цвет горизонтальной линии, пропишите к тегу «HR» атрибут «color» с кодом цвета (кодировку цветов мы еще не изучали, но вскоре будем):

Как сделать сплошную линию html

На сегодня это все! Жду вас на следующем уроке. Удачи! Как сделать сплошную линию html

Источник

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

В основном горизонтальные линии используются для декорирования HTML-страниц сайта, придавая им более привлекательный вид. Но также ими можно визуально разграничивать информацию соседних разделов, добавляя удобства читателям при ее изучении. В общем, рисуйте горизонтальные линии там, где вам нужно, вот и все.

Как нарисовать горизонтальную линию?

Пример рисования горизонтальных линий в HTML

Результат в браузере

Как видите, линии получаются очень тонкими, невзрачными и рисуются во всю доступную ширину, поэтому сейчас мы научимся их изменять, чтобы они выглядели более привлекательно.

Как изменить цвет, толщину и ширину горизонтальных линий?

style= «background:цвет» > — цвет линии (вернее ее фон).

style= «height:размер» > — толщина линии.

style= «width:размер» > — ширина линии.

style= «background:цвет; height:размер; width:размер» > — а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#). Ну, вы об этом уже знаете из урока по изменению цвета текста и фона.

А вот об изменении размеров мы поговорим подробнее. Как вы помните из урока по изменению шрифтов, в CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.

Если вы указываете размеры в пикселях, то толщина и ширина линии будет зависеть от разрешения монитора, на котором просматривают ваш сайт (чем выше разрешение экрана, тем тоньше и уже линия).

, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока

Пример изменения цвета, толщины и ширины горизонтальных линий.

Результат в браузере

Изменение положения горизонтальных линий

Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри атрибут align со следующими значениями:

Пример выравнивания горизонтальных линий.

Результат в браузере

Как убрать рамку вокруг линии?

Посмотрите на самый первый пример этого урока. Как вы считаете, какой цвет у этих линий? А вот и неверно. Они прозрачные, как и любые элементы страницы, у которых не указан фоновый цвет! Не верите? Тогда посмотрите на пример, где мы изменяли цвет линий. У самой первой мы не установили цвет, а только увеличили ее размер и разве эта линия не прозрачная? Так-то!

Теперь объясню. По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.

Источник

Прямая линия HTML

Прямая линия очень интересный элемент html. Как сделать сплошную линию html.

Несмотря на свою простоту, расположенная в нужном месте, она придаёт контенту неповторимый вид, а так же её саму можно сделать очень красивой

Это одиночный тег и не имеет закрывающей части, что можно использовать при веб программировании, так как одиночных тегов в html раз-два и обчёлся.

Изменять внешний вид линии, мы будем при помощи стилевых свойств, так как почти все теги и атрибуты HTML, создающие внешний вид элемента, на данный момент уже являются устаревшими.

Чтоб увеличить толщину линии в код вводится свойство height с цифровым значением, которое задаётся в любых доступных в веб размерах.

Причём рамка может быть любого вида доступного для рамок html.

Можно убрать боковые грани рамки и сделать линию как-бы трёхцветную.

Причём все три линии можно сделать разной толщины, цвета и формы.

Можно закруглить и даже заострить торцы линии.

Для этого в код вводится свойство border-radius с цифровым значением, которое задаётся в любых доступных в веб единицах.

Правда свойство transform всё ещё не работает без префиксов, что очень увеличивает код.

Изменяя цифры в значениях, можно всячески изменить внешний вид линии.

Желаю творческих успехов.

Как сделать сплошную линию html
Перемена

Стоит Ежик на пеньке и хвалит сам себя:
— Я сильный, я сильный, сильный я…
Тут порывом ветра унесло его в кучу дерьма. Ежик вылезает из кучи, отряхивается:
— Но легкий!

Как сделать сплошную линию html

3 комментария на «Прямая линия HTML»

В атрибут style добавьте свойства align: left; или align: right;. Если нужно спозиционировать более точно, то вместо них добавьте свойство margin: 0 0 0 0;
Первая цифра — отступ сверху, вторая — отступ справа, третья — отступ снизу, четвёртая — отступ слева. Если нужно задать отступ только с одной стороны, то в свойстве margin указывается эта сторона: margin-left: 0; и т.п. Если значение больше нуля то к нему добавляются единицы измерения: margin-left: 6px;. Только при использовании свойства margin, текст не будет обтекать линию. Если нужно чтоб обтекал, то свойства align: left; и margin применяются вместе.

Статья интересная, но у меня возник вопрос, если мне нужно линию разместить в левой части страницы или в правой, как мне ее с центра сдвинуть?

Источник

Сделать вертикальную линию через HTML и CSS

Как сделать сплошную линию html

В статье узнаете о создание вертикальной линий, которую можно сделать с помощью HTML и CSS, где к ней добавим выделенный фрагмент текста. Для того, чтоб создать линию, для этого существует несколько методов, по которым можно вывести ее. Но здесь нужно знать, что не все браузеры могут ее корректно показывать, так что мы выберем самый простой и понятный способ, где вертикальная линия будет визуально просматриваться.

Также здесь сразу добавим к ней текст, чтоб можно было выделять ключевые слова или категорий, которые находятся на сайте, и они безусловно должны по своему оформлению выделятся от основного описание. Так и под это как раз линия отлично подойдет, что можно выставить под любой гаммой цвета, а значит подогнать под свой стиль дизайна.

Если рассматривать полностью, то под создание такой линий существует несколько способов, для того, чтоб выставить на странице вертикальной линии. Здесь рассмотрим 2 основных метода, это на HTML и CSS, но какой вам больше подойдет, то здесь зависит от вашего требования. Если вы будете устанавливать на главной странице, то здесь лучше все сделать через стили. Но также применяется в разных статьях, как оформление, то безусловно на HTML буде намного логичнее поставить.

Для создание линии существует несколько методов, которыми вы можете задействовать:

1. Сделайте свойство border-right или border-left таблицы нужной шириной так, чтобы оно могло действовать как вертикальная линия.
2. Сделайте свойство border-right или border-left DIV желаемым типом ширины.
3. Аналогично можете все использовать при помощи стилистике, где в CSS, прописываем все параметры.

В этом методе все просто, здесь изначально обвертываем на странице в тег div, это все для того чтоб выделить элемент. Где также можете задействовать уже существующий каркас блока, где задаете границу с заданной стороны. Где появляется возможность вписать стиль в заданном вами теге.

Так получится на выходе:

Как сделать сплошную линию html

Все это сделали при помощи свойства border-left, где изначально выставили границу блока по левому краю, и после этого можно уже задать параметры, как под линию, так и под ключевую фразу, что будет прикреплена.

Здесь на заметку, так как с таким же успехом свойство border-top и border-bottom можно аналогично задействовать под задание горизонтальной линии.

Нужно разместить div вокруг заданной разметки, это делается, так где вы решили чтобы строка отображалась следующим образом при использование CSS.

По стилистике все просто, задаем требуемую высоту, также цвет фона и все остальное по оформлению.

Оба способа по свой сути похоже, только один лучше применять под оформление в материалах, а другой ставим на страницы для информации.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *