• 2074
  • 0
  • Автор: Виктор Милованов
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

Вертикальные линии – вернее, добавление на html страницу вертикальных линий, это ещё один способ улучшить дизайн страницы. При добавлении контента на страницу сайта, его очень удобно разделять с помощью вертикальных линий.
Вертикальные линии – помогают придать внешнему виду страницы необходимый порядок и сделать блоки с контентом более удобными для восприятия посетителям сайта.
Как мы с Вами знаем, для добавления на html страницу горизонтальных линий, достаточно воспользоваться html тегом hr. Что касается вертикальных линий, то здесь всё гораздо сложнее. Стандартных html средств, для создания вертикальных линий нет.
Поэтому, вертикальные линии – добавляются на страницу, с использованием побочных средств.
Ну что же, давайте в этой статье рассмотрим некоторые из вариантов добавления на страницу сайта вертикальных линий.
Собственно мы рассмотрим два основных способа добавления на страницу вертикальных линий.
В первом варианте, мы рассмотрим создание вертикальных линий, с помощью таблиц. И во втором случае, мы будем создавать вертикальные линии с использованием стилей.
Сразу хотел бы отметить, что графический вариант создания вертикальные линии мы здесь рассматривать не будем.
Итак, давайте создадим вертикальную линию с помощью таблицы. Предположим, что нам необходимо выделить на странице некоторый текст с помощью вертикальной линии, расположенной слева от текста.
Как всегда сразу перейдем к практике. Для этого, создадим тестовый html файл, например с именем vert.html, пусть файл содержит обязательные html теги.
Кроме обязательных тегов, добавим в html код таблицу, в результате получим следующее:

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Вертикальныелинии, созданные с помощью таблиц</title>
</head>
<body>
<table width="350" cellpadding="0" cellspacing="12" border="0" align="left">
<tr>
<td width="2" bgcolor="#990000"><imgsrc="vertikal.gif" width="2"
height="1"></td>
<td>
Вертикальные линии можно использовать для того,
чтобы выделить на странице сайта, тот или иной
фрагмент текста.
</td>
</tr>
</table>
</body>
</html>
Сохраним наш тестовый файл vert.html и откроем его для просмотра браузером:

Мы видим, что слева от текста у нас построилась вертикальная линия.
Высота вертикальной линии, в данном варианте, определяется высотой столбца с текстом. Ширина линии задается двумя параметрами width.
То есть, для того, чтобы изменить ширину вертикальной линии, необходимо сразу в двух местах, задать одинаковое значение параметру width:
1 - в описании тега td и
2 - в описании тега img.
Цвет вертикальной линии задается параметром bgcolor.
Таким образом, используя html код таблицы, Вы можете создавать на страницах своего сайта вертикальные линии с любыми параметрами и в большинстве случаев, решать задачи, связанные с выделением текста на странице с помощью вертикальных линий.
Теперь давайте рассмотрим вариант создания вертикальных линий с помощью использования стилей. Создадим ещё один html файл, с произвольным именем, например - vert_style.html.
Добавим в этот файл, следующий код:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Вертикальныелинии, созданные с помощью стилей</title>
</head>
<body>
<div style="height:25px; width:560px; border-left:2px solid Green; padding-left:10px">
Спомощьюприменениястилей, настраницесайтов, можносоздаватьвертикальныелинии.
Причем, параметров стилей, с лихвой хватит для создания
вертикальных линий с любыми геометрическими параметрами.
</div>
</body>
</html>

Если открыть данный файл браузером, то мы увидим, что текст на странице, слева ограничен вертикальной линией:

Как видите, добавляя достаточно простой код, мы получаем хороший наглядный результат.
Текст в данном коде, помещен в контейнер div. Мы знаем, что тег div, поддерживает работу со стилями, что и было использовано для создания вертикальной линии.
Изменяя значения аргументов параметров стилей, можно создать любую вертикальную линию. Давайте перечислим возможности при использовании данного метода.
Итак, параметр height - изменяет высоту вертикальной линии. Ширина блока div задается параметром width.
Параметр border-left, задает сразу три параметра вертикальной линии – толщину линии, тип линии и цвет линии.
И, наконец, параметром padding-left, мы задаём отступ текста от вертикальной линии.

Можешь почитать и вот эту статейку "Теги colgroup"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element