Как сделать линию на сайте
Как сделать линию на сайте
Урок 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
Пожалуй, можно разместить несколько квадратов в одну линию, но при этом надо применить таблицу. Создаётся строка, а в каждой колонке поместить по квадрату. Это, правда, только предположение. Но попробовать можно.
Добавить Ваш комментарий:
 Заработай в Интернете и осуществи свою МЕЧТУ » Как?» Узнать сейчас >>> |
Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.
Прямая линия HTML
Прямая линия очень интересный элемент html. 
.
Несмотря на свою простоту, расположенная в нужном месте, она придаёт контенту неповторимый вид, а так же её саму можно сделать очень красивой
Это одиночный тег и не имеет закрывающей части, что можно использовать при веб программировании, так как одиночных тегов в html раз-два и обчёлся.
Изменять внешний вид линии, мы будем при помощи стилевых свойств, так как почти все теги и атрибуты HTML, создающие внешний вид элемента, на данный момент уже являются устаревшими.
Чтоб увеличить толщину линии в код вводится свойство height с цифровым значением, которое задаётся в любых доступных в веб размерах.
Причём рамка может быть любого вида доступного для рамок html.
Можно убрать боковые грани рамки и сделать линию как-бы трёхцветную.
Причём все три линии можно сделать разной толщины, цвета и формы.
Можно закруглить и даже заострить торцы линии.
Для этого в код вводится свойство border-radius с цифровым значением, которое задаётся в любых доступных в веб единицах.
Правда свойство transform всё ещё не работает без префиксов, что очень увеличивает код.
Изменяя цифры в значениях, можно всячески изменить внешний вид линии.
Желаю творческих успехов.
Перемена
Стоит Ежик на пеньке и хвалит сам себя:
— Я сильный, я сильный, сильный я…
Тут порывом ветра унесло его в кучу дерьма. Ежик вылезает из кучи, отряхивается:
— Но легкий!
3 комментария на «Прямая линия HTML»
В атрибут style добавьте свойства align: left; или align: right;. Если нужно спозиционировать более точно, то вместо них добавьте свойство margin: 0 0 0 0;
Первая цифра — отступ сверху, вторая — отступ справа, третья — отступ снизу, четвёртая — отступ слева. Если нужно задать отступ только с одной стороны, то в свойстве margin указывается эта сторона: margin-left: 0; и т.п. Если значение больше нуля то к нему добавляются единицы измерения: margin-left: 6px;. Только при использовании свойства margin, текст не будет обтекать линию. Если нужно чтоб обтекал, то свойства align: left; и margin применяются вместе.
Статья интересная, но у меня возник вопрос, если мне нужно линию разместить в левой части страницы или в правой, как мне ее с центра сдвинуть?
Как сделать вертикальную линию в HTML
Как сделать вертикальную линию с помощью HTML?
20 ответов
для создания вертикальных линий можно использовать тег горизонтального правила.
используя минимальную ширину и большой размер, горизонтальное правило становится вертикальным.
вы можете использовать пустой
HTML-код:
С точной высотой (переопределение стиля в линию):
стиль границы, если вы хотите 3D вид:
вы можете, конечно, также экспериментировать с расширенными комбинациями:
вы также можете сделать вертикальную линию с помощью HTML горизонтальной линии
в HTML5 настраиваемые элементы (или чистый CSS)
1. в JavaScript
зарегистрировать свой элемент.
2. в CSS
3. instantiate
*к сожалению, вы не можете создавать пользовательские самозакрывающиеся теги.
использование
не хотите возиться с javascript?
просто примените этот класс CSS к назначенному вами элемент.
в CSS
*см. Примечания выше.
Не самое элегантное решение, хотя.
нет никакого тега для создания вертикальной линии в HTML.
метод: вы загружаете изображение линии. Затем вы устанавливаете свой стиль как «height: 100px ; width: 2px»
метод: вы можете использовать
Почему бы не использовать |, который является специальным символом html для |
вы можете использовать тег hr (горизонтальная линия) и повернуть его на 90 градусов с помощью css ниже
я использовал комбинацию предложенного кода «hr», и вот как выглядит мой код:
Я просто изменил значение значения» левого » пикселя, чтобы расположить его. (Я использовал вертикальную линию для выравнивания контента на своей веб-странице, а затем удалил ее.)
если ваша цель состоит в том, чтобы поместить вертикальные линии в контейнер для разделения дочерних элементов бок о бок (элементы столбцов), вы можете рассмотреть возможность стилизации контейнера следующим образом:
это добавляет левую границу ко всем дочерним элементам, начиная со 2-го ребенка. Другими словами, вы получаете вертикальные границы между соседними детьми.
ли это лучше, чем использование самодельного вертикальный элемент правила (путем укладки горизонтального правила и т. д.) будет зависеть от вашего варианта использования, но это как минимум альтернатива.
возможен еще один подход: использование SVG.
чтобы добавить вертикальную линию, вам нужно создать hr.
теперь, когда вы делаете вертикальную линию, она появится в середине страницы:
теперь положите его, где вы хотите, вы можете использовать этот код:
это расположит его влево, вы можете инвертировать его, чтобы расположить его вправо.
вертикальная линия прямо к div
вертикальная линия слева от div
чтобы создать вертикальную линию, центрированную внутри div, я думаю, вы можете использовать этот код. «Контейнер» вполне может быть шириной 100%, я думаю.
вы можете нарисовать вертикальную линию, просто используя высоту / ширину с любым html-элементом.
для встроенного стиля я использовал этот код:
и это расположило его непосредственно в центре.
чтобы сделать вертикальную линию к центру в середине используйте:
Как сделать линию в Ворде
В текстовом документе линия выполняет различны функции. Декоративную, когда нужно придать тексту визуальное оформление. Разделительную, если нужно сделать текст более понятным для восприятия. как вставить линию в Word?
Как сделать непрерывную горизонтальную линию в word: 4 способа
Способы установки непрерывной линии отличаются в зависимости от того, какая версия Word установлена на компьютере.
Способ 1. Word 2003
Стандартная версия программы:
Способ 2. Word 2007
Обновленный вариант программы:
Для дальнейшей работы начните печатать текст.
Важно! Для печати текста с новой строки необходимо жать на клавиши стрелок вместо «Enter».
Способ 3. «Подчеркнутый» текст
Метод подходит только для создания линии под текстом:
Начните печатать текстовое сообщение.
Способ 4. Отдельная линия
Способ подходит для создания линии как декоративного элемента, отдельной от текста:
Пунктирная полоса преобразуется в непрерывную автоматически.
Примечание! Такой способ доступен только в offline-версии программы пакета Office.
Процесс создания непрерывных линий в горизонтальной плоскости наглядно представлен в видео.
Видео — Горизонтальная линия в word: 4 способа
Как сделать горизонтальную и вертикальную линии?
Все варианты установки горизонтальной линии описаны в первом разделе статьи.
Чтобы установить вертикальную линию, используйте Способ №1 с некоторыми поправками:
Способ №2 также подходит для установки вертикальной полосы:
Как сделать много подчеркнутых строк?
Для подчеркивания неограниченного количества строк в тексте подходит Способ №3 по установке полосы под текстом.
Чтобы сделать сразу несколько строк под или над текстом, воспользуйтесь Способом №4, но вместо символа «-» используйте «=» или «#».
Линия в Word с помощью рисования
С помощью этого метода непрерывная полоса может принимать любое направление: горизонтальное, вертикальное, диагональное.
Таким образом можно нарисовать полосу любой длины. Ее форматирование не зависит от текста.
Как в Ворде сделать линию над которой можно писать?
Для создания данного типа черты необходимо воспользоваться инструментом «Горизонтальная линия».
Чтобы изменить длину, ширину или дизайн черты, необходимо кликнуть 2 раза по фигуре. Откроется окно с функциями и параметрами, применимыми для линии.
На заметку! Для изменения размеров линии необязательно вызывать окно с функциями. Достаточно 1 раз нажать на линию, чтобы визуально проявилось ее поле с границами. Нажмите на одну из границ и перетаскивайте влево/вправо для сокращения/удлинения.
Линию можно перетащить в любую другую часть текста. Для этого нужно 1 раз нажать на нее и переместить туда, где она нужна. Линия не устанавливается поверх документа – после перемещения она автоматически настроится под текст.
Как сделать линию таблицы?
Черта может быть не только элементом разделения или украшения текста. В таблице она служит обозначением границ ячеек. Для добавления границы:
Продолжите работу с таблицей.
Как удалить линию?
Для удаления ненужной линии выполните следующие действия:
Способ подходит также для удаления линии в программе Outlook. Вместо раздела «Абзац» нужные параметры находятся во вкладке «Формат текста».
Создание и редактирование линейной полосы напрямую зависит от функций, которые она должна выполнять: подчеркивание текста, его разделение или графическое оформление.
Видео — Как сделать линию в Ворде
Понравилась статья?
Сохраните, чтобы не потерять!
Горизонтальные линии
В основном горизонтальные линии используются для декорирования HTML-страниц сайта, придавая им более привлекательный вид. Но также ими можно визуально разграничивать информацию соседних разделов, добавляя удобства читателям при ее изучении. В общем, рисуйте горизонтальные линии там, где вам нужно, вот и все.
Как нарисовать горизонтальную линию?
Пример рисования горизонтальных линий в HTML
Результат в браузере
Как видите, линии получаются очень тонкими, невзрачными и рисуются во всю доступную ширину, поэтому сейчас мы научимся их изменять, чтобы они выглядели более привлекательно.
Как изменить цвет, толщину и ширину горизонтальных линий?
style= «background:цвет» > — цвет линии (вернее ее фон).
style= «height:размер» > — толщина линии.
style= «width:размер» > — ширина линии.
style= «background:цвет; height:размер; width:размер» > — а можно указать сразу все параметры, только не забываем про точку с запятой (;).
Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#). Ну, вы об этом уже знаете из урока по изменению цвета текста и фона.
А вот об изменении размеров мы поговорим подробнее. Как вы помните из урока по изменению шрифтов, в CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.
Если вы указываете размеры в пикселях, то толщина и ширина линии будет зависеть от разрешения монитора, на котором просматривают ваш сайт (чем выше разрешение экрана, тем тоньше и уже линия).
, то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока
Пример изменения цвета, толщины и ширины горизонтальных линий.
Результат в браузере
Изменение положения горизонтальных линий
Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри атрибут align со следующими значениями:
Пример выравнивания горизонтальных линий.
Результат в браузере
Как убрать рамку вокруг линии?
Посмотрите на самый первый пример этого урока. Как вы считаете, какой цвет у этих линий? А вот и неверно. Они прозрачные, как и любые элементы страницы, у которых не указан фоновый цвет! Не верите? Тогда посмотрите на пример, где мы изменяли цвет линий. У самой первой мы не установили цвет, а только увеличили ее размер и разве эта линия не прозрачная? Так-то!
Теперь объясню. По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.