Вертикальная полоса html: Как сделать вертикальную линию

html — CSS — Как сделать вертикальную линию между словами?

Задать вопрос

Вопрос задан 2 года 1 месяц назад

Изменён 2 года 1 месяц назад

Просмотрен 542 раза

Помогите, пожалуйста! Нужно сделать вот такие вертикальные линии между словами в CSS, не меняя HTML. Искала в интернете, но ничего, к сожалению, не нашла..

Вот HTML код:

    <section>
    <ul>
        <li><a href="http://www.imdb.com/jobs?ref_=ft_jb">Jobs</a></li>
        <li><a href="http://www.imdb.com/advertising/?ref_=ft_ad">Advertising</a></li>
        <li><a href="http://www.imdb.com/pressroom/?ref_=ft_pr">Press Room</a></li>
        <li><a href="https://secure.  imdb.com/register-imdb/form-v2?ref_=ft_reg">Register</a></li>
        <li><a href="http://www.imdb.com/boards/?ref_=ft_mb">Message Boards</a></li>
        <li><a href="http://www.imdb.com/helpdesk/contact?ref_=ft_con">Contact Us</a></li>
        <li><a href="http://www.imdb.com/?ref_=ft_hm">Home</a></li>
    </ul>
</section>

• html
• css

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
ul li {
  padding-right: 10px;
  margin-right: 10px;
}
ul li:not(:last-of-type) {
  border-right: 1px solid black;
}

<ul>
  <li>Foo</li>
  <li>Baz</li>
  <li>Foobaz</li>
</ul>

Зарегистрируйтесь или войдите

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Вертикальная линия в html: несколько простых способов

Здравствуйте, верные подписчики моего обучающего сайта, а также гости блога. Вы когда-нибудь обращали внимание на страницы веб-ресурсов, где вертикальная линия в html отделяет какую-либо информацию? Так вот это очень простой, однако эффективный способ обратить внимание читателя на нужную часть контента.

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

Для чего используют вертикальное отделение текста

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

Чаще всего акценты расставляются в текстовом наполнении страниц. Для этого используются:

• специальные теги, например, <strong>, <i>, <big> и другие;
• разделение текста на абзацы и ввод заголовков разного уровня;
• выделение объектов при помощи разного цветового фона;
• изменение стиля шрифтов;
• внедрение в контент обрамляющих рамок и т. д.

Рассмотрим последний пункт.

Рамки – это распространенный механизм для отделения неких объектов от основной массы, выделения ключевых моментов и просто оформления веб-контента. Создаются они при помощи свойства border.

Данный элемент языка css очень гибкий и может устанавливать рамку как со всех сторон, так и только с одной стороны выбранного объекта. Важные свойства я занес в таблицу.

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

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

• точечной (dotted)
• пунктирной (dashed)
• линейной (solid)
• двойной (double)
• объемной (groove, inset, ridge и outset) рамкой
• или повторить стилевые настройки предка с помощью ключевого слова inherit.

Иногда я встречаю вопросы вида: «Можно ли border представить в виде изображения и как это сделать?». Ответ, можно. А делается это очень просто.

Для этого создатели css предусмотрели элемент border-image, в котором надо указать путь к картинке и описать толщину каждой стороны границы.

Практическая часть

Я считаю, что настало время опробовать теорию в практике. Перед вами стоит задание написать полотно текста и ключевые моменты или цитаты отделить вертикальными линиями.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вертикальная линия</title>
  <style>
   .line {
    border-left: 30px double #9400D3;
    padding: 15px;
    border-image: 
   }
   .image {
    border: 20px solid #9400D3;
    padding: 25px;
    border-image: url(https://htmlbook.ru/files/images/css/css_border-image-1.png) 0 0 0 30;
   }
  </style>
 </head>
 <body>
<h3>Первый параграф. Использование border-left</h3>
<p>
  В первом абзаце выделим ключевой момент текста левой двойной линией фиолетового цвета.
   <div>Этот фрагмент текста очень важен.</div>
</p>
<h3>Второй параграф. Использование border-image</h3>
<p>
  Во втором абзаце выделим ключевой момент текста вертикальной линией слева в виде изображения.
  
   <div>Этот фрагмент текста очень важен.</div>
</p>
 </body>
</html>

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

С уважением, Роман Чуешов

Прочитано: 1115 раз

Понравилась статья? Поделись с друзьями:

Этот блог уже читают
читай и ты!

Как сделать вертикальную линию с помощью HTML?

Улучшить статью

Сохранить статью

• Уровень сложности: Средний
• Последнее обновление: 10 мая, 2022

Улучшить статью

Сохранить статью

Чтобы сделать вертикальную линию, используйте свойство border-left или border-right. Свойство height используется для установки высоты элемента границы (вертикальной линии). Свойство Position используется для установки положения вертикальной линии.

Пример 1: Создает вертикальную линию, используя свойство border-left, height и position.

html

. свойство высоты.

html

Output:  
 

Поддерживаемые браузеры:

• Google Chrome
• Internet Explorer
• Firefox
• Opera
• Safari

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

 <голова> <стиль> HTML, тело {
 положение: родственник;
 высота: 100%;
 цвет фона: #f2f2f2;
}
.left-контейнер {
 ширина: 30%;
 положение: фиксированное;
 высота: 100%;
 слева: 0;
 сверху: 0;
}
.link-панель {
 положение: родственник;
 плыть налево;
 ширина: 100%;
 высота: 100%;
 цвет фона: #333333;
}
.link-панель ул {
 тип стиля списка: нет;
 размер шрифта: 19px;
 поле сверху: 35px;
}
.link-панель ли {
 поле сверху: 15px;
}
.right-контейнер {
 ширина: 70%;
 поле слева: 30%;
 ясно: верно;
 дисплей: блок;
 высота: 100%;
}
. панель управления {
 положение: родственник;
 отображение: встроенный блок;
 ширина: 100%;
 поле слева: 0px;
}
.control_title {
 дисплей: блок;
 цвет фона: белый;
 высота: 50 пикселей;
}
h3 {
 дисплей: блок;
 размер шрифта: 1.5em;
 -webkit-margin-before: 0.83em;
 -webkit-margin-after: 0.83em;
 -webkit-margin-start: 0px;
 -webkit-margin-end: 0px;
 вес шрифта: полужирный;
}
.control_settings {
 дисплей: блок;
 цвет фона: белый;
 ширина: 100%;
}
.нижний колонтитул {
 дисплей: блок;
 ширина: 100%;
 высота: 500 пикселей;
 цвет фона: черный;
 поле сверху: 0px;
 положение: фиксированное;
 сверху: 90%;
 слева: 0;
} 
   <тело> <дел> <дел> <ул>
 Панель управления
 <час>
 Блог
 <час>
| Настройки
 <час>
 Свяжитесь с нами