30. Перенос строки и разделительная линия в HTML
Перенос строки при помощи HTML или CSS
Перевод строки, перенос строки, перенос на новую строку – это все об одном. В языке HTML перенос на новую строку применяется часто. Есть несколько путей: использовать тег <br>
для перевода на новую строку, а можно использовать свойства CSS для переноса строки. Рассмотрим пример использования тега переноса строки:
Здесь текст
<br>
Этот текст на новой строке
В CSS перенос строки можно осуществить по-разному, например вот так:
.br {
float: left;
width: 100%;
margin: 0 0 20px 0; /* отступ после строки 20 пикселей */
}
Здесь текст
<div class = "br"></div>
Этот текст на новой строке
Разделительная линия при помощи HTML или CSS
В HTML создать разделительную линию очень просто. Используется тоже непарный тег <hr>
- это и есть разделительная линия. Разделительная линия начинается с новой строки и после нее есть отступ. Вы можете управлять стилем горизонтальной линии, а так же можно сделать альтернативу ей. Далее пример разделительной линии при помощи тега:
Здесь текст
<hr>
И здесь текст
А теперь давайте стилизуем (изменим стили, изменим внешний вид) нашу разделительную линию:
hr {
width: 80%; /* ширина линии */
height: 4px; /* высота / толщина линии */
background: #333; /* фон / цвет линии */
border: 0; /* рамка вокруг разделительной линии (уберем ее) */
margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */
}
И создадим альтернативу нашей разделительной линии при помощи тега <div>
и CSS:
.line {
width: 80%; /* ширина линии */
height: 4px; /* высота / толщина линии */
background: #333; /* фон / цвет линии */
border: 0; /* рамка вокруг разделительной линии (уберем ее) */
margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */
}
Здесь текст
<div class = "line"></div>
Здесь текст
Похожие уроки и записи блога
- Вам уже дан куб и в нем три линии. Вам нужно добавить три тега
<hr>
так, чтобы получилось 16 квадратов.
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.