Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Как сделать вертикальную линию css html

Поддержи проект!!!

Для того, чтобы сделать вертикальную линию – нам потребуется html, потом css! Вертикальную линию без двух компонентов соорудить невозможно!

В отличим от горизонтальной вертикальной линии специального тега не существует!!.
  1. Нам понадобится блок(div), который будет представлять из себя html каркас, чтобы его увидеть … вол внутрь поместим содержание и закрасим его…
  2. <div style="background: #f9ff00;">Здесь содержимое</div>

    Результат:

    style="background: #f9ff00;" - добавлен с единственной целью, чтобы вы увидели наш блок... далее мы данный цвет перенесем в стиль..., хотя все стили можно расположить и в style="" - это всего лишь вопрос приоритетов...
    Здесь содержимое

    И далее разберемся, со стилями для вертикальной линии!

  3. Как вы знаете, то стили можно использовать, точечно(что вы видите в предыдущем абзаце), прямо в блоке, стилем на странице, стилем в файле css - это не принципиально, просто напоминаю!
    Мы будем использовать стиль на данной странице!
  4. Есть несколько вариантов создания вертикальной линии html css – мы не будем нагружать данную страницу этими способами!

    Я лишь приведу тот способ создания вертикальной лини, который использую сам!

    Погнали!

    Создадим класс - example_block

    Нам понадобится свойство border, добавляем ему left + толщину, цвет…

    border-left: 2px solid #010101;

    Как сделать линию вертикальную!?

  5. Добавим ширины(здесь она особо не нужна), высоты, заливки, ну и border мы говорили ранее, и нам останется собрать нашу вертикальную линию html + css...
  6. Код:

    <div class="example_block">Здесь содержимое</div>

    <style>.example_block {

    background: #f9ff00;

    width: 100%;

    height: 100px;

    border-left: 2px solid #010101;

    }</style>

    Где:

    border-left: 2px solid #010101; - это и будет ваша вертикальная линия.

    И:

    border-left - линия слева
    2px - толщина линии
    solid - начертание линии - сплошное
    #010101 - цвет линии - генератор цвета
    background - заливка
    width - ширина
    height - высота

Результат:

Здесь содержимое

Вас может еще заинтересовать список тем : #CSS |
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
вертикальная линия cssкак сделать вертикальную линию в cssвертикальная линия htmlкак сделать вертикальную линию в htmlкак провести вертикальную линию в htmlкак добавить вертикальную линию в htmlвертикальная черта цсс

Последние комментарии :
Паула :
23/10/2020 01:26
Это <a href=здесь_ссылка …
подробнее.
Паула :
23/10/2020 01:24
Привет мир! <img src="https://dwweb.ru/__img/page/2020_10_23_01_13.png" class="img_in_comm">
подробнее.
Марат :
23/10/2020 01:15
Посмотрел... количество возможных знаков 3... почему у вас не получилось увидеть 2...…
подробнее.
Марат :
23/10/2020 01:05
Да! Тоже исправим...А с ссылкой... вроде бы исправлял... совсем недавно...сейчас проверю в чем там…
подробнее.
Марат :
23/10/2020 01:03
Спасибо за внимательность!1). Исправлено!2). Да... будет добавлено, просто не подумал об…
подробнее.