DWWEB.RU
СКРИПТЫ

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

2019/10/23 Марат 42 0 CSS |

Для того, чтобы сделать вертикальную линию – нам потребуется 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 - высота

Результат:

Здесь содержимое
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

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

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