Как сделать полоску в css
Для формирования линии можно пойти разными путями. Давайте рассмотрим некоторые из них:
Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.
class="create-line">Как создать полоску в html
.create-line width: 200px; border-top: 3px solid #32a1ce; > Вариант №2. Используем готовый тег который формирует горизонтальную линию — hr.
Вариант №3. С помощью псевдоэлементов :before или :after . Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.
class="create-line-left"> Добавим линию снизу Теперь рассмотрим стили.
.create-line-left padding-left: 20px; /* необходим для формирования позиций линии */ position: relative; /* весь блок будет занимать ширину по размеру контента в нём */ display: inline-block; > .create-line-left:before content: " "; background: #33CCFF; width: 150px; height: 1px; /* располагаем линию сверху от текста */ top: 25px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > Как добавить горизонтальную линию в HTML
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
Количество просмотров этой статьи: 29 075.
В этой статье:
Из этой статьи вы узнаете, как добавить горизонтальную линию в HTML. Горизонтальную линию можно использовать для разделения контента на сайте. Код для создания линии достаточно прост. Тем не менее в HTML 4.01 можно изменить дизайн линии с помощью внутренних команд. В HTML5 для стилизации линии придется использовать CSS. [1] X Источник информации
Метод 1 из 2:
Работа в HTML 4.01
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл.
- Нажмите Открыть.
- Выберите файл HTML.
- Нажмите Открыть
Выберите место, в которое нужно вставить линию. Пролистайте вниз, пока не найдете строку, над которой должна появиться линия, а затем переместите курсор непосредственно в начало этой строки, щелкнув мышью в ее крайней левой части.
Добавьте пустую строку. Дважды нажмите ↵ Enter , чтобы опустить вниз текст, перед которым нужно вставить линию, после чего поместите курсор на пустую строку.
Переместите курсор после тега «hr» на новую строку, нажав ↵ Enter . Теперь тег должен находиться в отдельной строке.
- Введите
, чтобы изменить толщину линии. Замените «#» числовым значением толщины (например, size=»10″). - Введите
, чтобы изменить ширину линии. Замените «#» количеством пикселей или процентным отношением к ширине страницы (например, width=»200″ или width=»75%»). - Введите
, чтобы изменить цвет линии. Замените «#» названием цвета или его шестнадцатеричным кодом (например, color=»red» или color=»# FF0000″). - Введите
, чтобы выровнять линию. Замените «#» на «right» (по правому краю), «left» (по левому краю) или «center» (по центру) (например,
).
- Откройте меню Файл.
- Нажмите Сохранить как.
- Введите имя для файла в поле «Имя файла».
- Добавьте .html после имени файла.
- Нажмите Сохранить.
html> body> h1>Заголовокh1> hr size="6" width="50%" align="left" color="green"> p1>Данная строка должна быть отделена от заголовка линией.p1> body> html>
Метод 2 из 2:
Работа в CSS/HTML5
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл.
- Нажмите Открыть.
- Выберите файл HTML.
- Нажмите Открыть
- Введите в верхней части документа.
- Дважды нажмите ↵ Enter , чтобы добавить две новые строки.
- Введите , чтобы закрыть заголовок.
- В качестве альтернативного способа можно использовать внешнюю таблицу стилей. Прочтите статью «Как вставить файл CSS в HTML», чтобы узнать, как связать внешний файл CSS с файлом HTML.
Введите hr < .Это тег CSS для стилизации горизонтальной линии. Добавьте его после тега «style» в заголовке или во внешнем файле CSS.
> hr width: 50%; height: 20px; background-color: red; margin-right: auto; margin-left: auto; margin-top: 5px; margin-bottom: 5px; border-width: 2px; border-color: green; > style> head> body> h1>Заголовокh1> hr> p1>Данная строка должна быть отделена от заголовка горизонтальной линией p1> body> html>
Тег
HTML горизонтальная линия — разделитель
Тег
используется в HTML для вывода горизонтальной линии — разделителя.
Построенная с помощью тега
горизонтальная линия в HTML 5 имеет семантический смысл и выступает в роли тематического разделителя.
Синтаксис
текст
текстОтображение в браузере
Некий текст на странице.
Текст, который по смыслу отделен от текста выше.
Пример использования
в HTML коде
Горизонтальная линия в HTML
Некий текст на странице.
Текст, который по смыслу отделен от текста выше.
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты
В HTML5 у тега
нет атрибутов. Используйте CSS вместо них.
Устаревшие атрибуты
Устанавливает толщину линии.
Сделать полосу под текстом
Вот макет Вот HTML и CSS
.items_2 < display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; margin: 53px 0; >.item_2 < display: flex; display: -webkit-flex; width: 50%; padding: 5px 25px; >.item_2 p < display: block; position: relative; font-size: 20px; line-height: 30px; color: #584A45; >.item_2 p:before
Comprehensive approach to your health
Experienced and expert trainers
High quality equipment
Location in the city center with a private garden
Wellness area with steam bath and infrared sauna
All-inclusive service - from coffee and shakes to shower products
Как сделать розовые линии под текcтом как на макете?
Отслеживать
19.6k 6 6 золотых знаков 22 22 серебряных знака 56 56 бронзовых знаков
задан 6 ноя 2020 в 16:08
1,677 12 12 серебряных знаков 25 25 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Фон делается элементарно — с помощью linear-gradient() .
Но, чтобы фон переносился по строкам, нужно преобразовать блочные параграфы в строчные, задав им display: inline; :
.items_2 < display: flex; flex-wrap: wrap; margin: 53px 0; >.item_2 < width: 50%; padding: 5px 25px; >.item_2 p < position: relative; display: inline; padding: 5px 0; font: 20px/30px sans-serif; color: #584A45; background-image: linear-gradient(to top, #f9f1ee, transparent); >.item_2 p:before
Comprehensive approach to your health
Experienced and expert trainers
High quality equipment
Location in the city center with a private garden
Wellness area with steam bath and infrared sauna
All-inclusive service - from coffee and shakes to shower products