Сделать вертикальную линию через HTML и CSS
 | |
| В статье узнаете о создание вертикальной линий, которую можно сделать с помощью HTML и CSS, где к ней добавим выделенный фрагмент текста. Для того, чтоб создать линию, для этого существует несколько методов, по которым можно вывести ее. Но здесь нужно знать, что не все браузеры могут ее корректно показывать, так что мы выберем самый простой и понятный способ, где вертикальная линия будет визуально просматриваться. Также здесь сразу добавим к ней текст, чтоб можно было выделять ключевые слова или категорий, которые находятся на сайте, и они безусловно должны по своему оформлению выделятся от основного описание. Так и под это как раз линия отлично подойдет, что можно выставить под любой гаммой цвета, а значит подогнать под свой стиль дизайна. Если рассматривать полностью, то под создание такой линий существует несколько способов, для того, чтоб выставить на странице вертикальной линии. Здесь рассмотрим 2 основных метода, это на HTML и CSS, но какой вам больше подойдет, то здесь зависит от вашего требования. Если вы будете устанавливать на главной странице, то здесь лучше все сделать через стили. Но также применяется в разных статьях, как оформление, то безусловно на HTML буде намного логичнее поставить. Для создание линии существует несколько методов, которыми вы можете задействовать: 1. Сделайте свойство border-right или border-left таблицы нужной шириной так, чтобы оно могло действовать как вертикальная линия. 2. Сделайте свойство border-right или border-left DIV желаемым типом ширины. 3. Аналогично можете все использовать при помощи стилистике, где в CSS, прописываем все параметры. Первый метод: В этом методе все просто, здесь изначально обвертываем на странице в тег div, это все для того чтоб выделить элемент. Где также можете задействовать уже существующий каркас блока, где задаете границу с заданной стороны. Где появляется возможность вписать стиль в заданном вами теге. HTML Код <div style="border-left: 5px solid #0e8410; padding-left: 7px; font-size:15pt;font-weight: bold;"> Интернет ресурс ZorNet.Ru для вебмастера </div> Так получится на выходе:  Все это сделали при помощи свойства border-left, где изначально выставили границу блока по левому краю, и после этого можно уже задать параметры, как под линию, так и под ключевую фразу, что будет прикреплена. Здесь на заметку, так как с таким же успехом свойство border-top и border-bottom можно аналогично задействовать под задание горизонтальной линии. Второй метод: Нужно разместить div вокруг заданной разметки, это делается, так где вы решили чтобы строка отображалась следующим образом при использование CSS. HTML Код <div class="vertikalnaya-linaya"> Создаем вертикальную линия на CSS И HTML с текстом </div> CSS По стилистике все просто, задаем требуемую высоту, также цвет фона и все остальное по оформлению. Код .vertikalnaya-linaya { border-left: 4px solid #137b13; padding-left: 10px; font-size:15pt; font-weight: bold; } Оба способа по свой сути похоже, только один лучше применять под оформление в материалах, а другой ставим на страницы для информации. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |