Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ 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 | Теги:
вертикальная линия cssкак сделать вертикальную линию в cssвертикальная линия htmlкак сделать вертикальную линию в htmlкак провести вертикальную линию в htmlкак добавить вертикальную линию в htmlвертикальная черта цсс

Последние комментарии :
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb