Блок div и горизонтальная линия hr

Картинки в html

Приветствую Вас дорогие читатели! Сегодня мы поговорим о блоках div и о горизонтальной линий hr.

Внутри тега <div></div> создается невидимый блок (контейнер), над котором мы можем воздействовать с помощью CSS. Без CSS данный блок никак не влияет на каркас страницы.

Для начала напишем код страницы без блока div. Например, этот:

<h3>Главное меню</h3>
<ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>
<p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </p> 

Смотрим, как выглядит страница в браузере:

каркас html страницы

Теперь разобьем данную страницу на два блока div. Один с главным меню, а другой с текстом.

<!-- Первый блок -->
<div>
    <h3>Главное меню</h3>
    <ul>
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
    <p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </p>
</div>

<!-- Второй блок -->
<div>
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div> 

Смотрим в браузере:

Каркас html страницы с блоками div

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

А теперь между этими два блока пропишем горизонтальную линию, которая создается с помощью одинарного тега <hr />

Вот как выглядит данная линия в браузере:

Горизонтальная линия hr

На данную линию можем воздействовать с помощью следующих атрибутов:
Width – Задаем ширину линии
Size – Задаем толщину
Align – Выравниванием линию
Color – Задаем цвет

Давайте для примера уменьшим ей ширину, выровняем ее по правому краю страницы, зададим ей толщину в 5px и сделаем ее красного цвета.
Теперь код линии должен выглядеть таким образом:

<hr width="70%" align="right" size="5" color="red" /> 

Смотрим на результат:

красная горизонтальная линия

Вот, пожалуй, и все о чем я хотел Вам рассказать в этой статье. Теперь вы знаете, что такое блок div и как он создается. Также Вы узнали, как создать горизонтальную линию и как изменить ее внешний вид с помощью атрибутов.

Похожие статьи:

Видео:

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Поделиться с друзьями:

Подписаться на новые статьи:

Delivered by FeedBurner

Поддержите пожалуйста мой проект!

<< Предыдущая статьяСледующая статья >>

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu920@mail.ru. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Добавляйтесь ко мне в друзья в:

Добавляйтесь в мои группы:

Подпишитесь на мои каналы:

Автор статьи: Мунтян Сергей

Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!

Дата добавления: 2015-03-23 10:49:12