Div style: The requested URL could not be retrieved
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Элемент <div> является блочным элементом и
предназначен для выделения фрагмента документа с целью изменения вида содержимого.
Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый
раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для
тега добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.
Синтаксис
<div>...</div>Атрибуты
- align
- Задает выравнивание содержимого тега <div>.
- title
- Добавляет всплывающую подсказку к содержимому.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег DIV</title>
<style type="text/css">
.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;
border: solid 1px black;
float: left;
}
.block2 {
width: 200px;
background: #fc0;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: 40px;
left: -70px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</div>
<div>Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.</div>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид блоков, оформленных с помощью стилей
Тег | HTML справочник
HTML теги
Значение и применение
Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.
Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.
Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.
Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный.
Прочитать о разметке страницы в HTML 5 вы можете в следующей статье учебника: «Теги разметки страницы».
В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.
Тег <span> вы можете использовать для таких задач как:
- Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
- Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
- Создание различных форматирующих стилей для выбранного участка текста.
- Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.
Поддержка браузерами
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | left right center justify | Не поддерживается в HTML5. Определяет выравнивание содержимого внутри элемента. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Теги <div> и <span></title> </head> <body> <div style = "color:green"> <p>Абзацы мы объединили тегом &lt;div&gt;, а это <span style = "color:red">слово</span> мы заключили тегом &lt;span&gt;.</p> <p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p> </div> <div style = "background-color:khaki"> <p>Обратите внимание, что тег &lt;div&gt; является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p> <p>Этот блок тоже содержит два абзаца. С помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег &lt;span&gt;).</p> </div> </body> </html>
В этом примере мы:
- Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
- Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
- Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.
Результат нашего примера:
Использование тегов разметки в HTML.
Отличия HTML 4.01 от HTML 5
Атрибут align не поддерживается в HTML5.
Значение CSS по умолчанию
div {
display: block;
}
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML теги
Div верстка. Как ее использовать, различные варианты исполнения
В интернете очень много материалов по поводу div-ов. Поэтому я решил создать такую статью, которая бы все содержала бы в себе, что касается блочной верстки. Из данной статьи Вы узнаете, как создать Вашу первую страницу, используя блочную верстку. Но основной акцент данной статьи я все-таки хочу сделать на различных проблемах, с которыми сталкиваются обычные пользователи, особенно новички, которые только начинают свое знакомство с Div-ами. Благодаря этой статье мы рассмотрим всевозможные варианты употребления div-ов, узнаем, что можно делать с этими блоками, как их изменять и вообще как ими пользоваться. Под статьей Вы увидите комментарии, оставляйте свои комменты, вопросы, и я обязательно помогу решить Вашу проблему и даже добавлю Вашу проблему в основную статью для остальных пользователей.
Div — верстка, это что такое?
Раньше, в эпоху становления интернета сайты верстались с помощью таблиц, что было достаточно неэффективно, и на смену этому устаревшему способу пришел новый — блочная верстка, используя Div-ы. Как видно, даже названия методов верстки сайтов отражают те теги, которые используются в создании сайта. Раньше это был тег <table> сейчас тег <div>.
Если взглянуть практически на любой современный сайт, то можно отметить их некоторое сходство, а именно присутствие на этих сайтах определнных зон: меню (menu), контент (content), шапка (header), низ сайт (footer). Такие зоны есть практически у любого сайта. А выглядят они все примерно так, как показано ниже.
На рисунке разными цветами я указал разными цветами зоны моего сайта. Красным — шапку, зеленым — меню, синим — контент, черным — низ сайта. В середине конента также я добавил блок названия статьи, и собственно блок самой статьи (текста). Вот таким образом выглядит процентов 70 сайтов в интернете, может быть только блоки меняются местами, но суть остается такой же.
Преимущества блочной div верстки
Преимущества дивной верстки следующие:
- меньше кода, а значит меньше «мусорных» тегов на странице
- возможность более гибкой разметки, т.к. каждый div не привязан ни к чему (в отличие от ячейки таблицы)
- возможность поменять местами блоки в коде не характерным способом (например, сначала идет контент, а потом идет шапка, хотя визуально сначала идет шапка, а потом контент)
- гораздо больше возможностей для разных JavaScript’ов
- современный вариант (табличная верстка более не применяется)
Начинаем кодить, используя Div (тег <div>)
Естественно, начинать мы будем с простого, а цель у нас создать макет сайта, который изображен выше. Да, весь код, который необходимо писать на страницах я буду включать в соответствующие коды.
Давайте создадим простенький шаблон страницы, используя div-ы. Учтите, данный код надо выставить после <body> и перед </body>. Ну это я надеюсь объяснять Вам не нужно.
<div> block 1 </div>
<div> block 2 </div>
<div> block 3 </div>
|
| <div> block 1 </div> <div> block 2 </div> <div> block 3 </div> |
Что получилось? На странице должны появится слова: block 1, block 2, block 3, которые идут в столбик, один за другим, при этому на странице больше ничего нет. Такой же эффект, кстати, можно получить, используя html тег <p>. Вы спросите, и что дальше. А вот теперь то и начинается самое интересное. Для того, чтобы управлять нашими div-ами, изменять их и вообще делать с ними все, что Вашей душе угодно (на самом деле не все, но это в конце статьи) мы обязаны использовать файл CSS. Я не буду здесь подробно останавливаться на нем, так как думаю, что Вы знаете, что это такое. Желательно сразу себя приучить подключать файл стилей к своим страницам сразу же, а не вставлять в каждый файл стили. В итоге у нас должно получиться два файла: index.html и style.css — данные файлы необходимо создать в любом редакторе (даже блокнот сгодиться), главное, это правильно задать расширение файла при его сохранении.
Давайте теперь зададим для наших div-ов разделительную полосу красного цвета. Внимание, ниже код который нужно указать в css.
div{
border: 1px solid red;
}
|
| div{ border: 1px solid red; } |
Этот же код вставляем в index.html
<html>
<head>
<link href=»style.css» rel=»stylesheet»>
<head>
<body>
<div> block 1 </div>
<div> block 2 </div>
<div> block 3 </div>
</body>
</html>
|
| <html> <head> <link href=»style.css» rel=»stylesheet»> <head> <body> <div> block 1 </div> <div> block 2 </div> <div> block 3 </div> </body> </html> |
Создав эти два файла (style.css и index.html) и открыв index.html мы увидим всё то же самое, что и в предыдущем случае, но у каждого дива будет красная граница. «Управлять» блоками мы будем с помощью CSS и присвоения конкретному div’у собственного класса. Сразу говорю, что писать что-то вроде style=”color: #a00;” (то есть использовать инлайновые стили) прямо на html-странице считается дурным тоном, а позже усложнит жизнь и вам — сложно отлаживать такую страницу. (представьте что Вы что-то захотели изменить на сайте, а у Вас тысячи страница, устанете изменять. Тут же просто надо изменить всего один файл.
Свойство float для Div-ов
Вот мы и создали выделение наших блоков красной линий, но, как говориться, на этом далеко не уедешь. Поэтому давайте разместим наши блоки горизонтально. Чтобы это сделать, воспользуемся отличным свойство CSS — float. Данное свойство отвечает за выравнивание наших блоков, и с помощью данного свойства мы сможем выравнивать наши блоки как нам хочется. Теперь давайте разместим наши блоки горизонтально, один за другим. ВНИМАНИЕ! Задать выравнивание можно только слева или справа, по центру выравнивания нет, учтите это! Напишем наш код в CSS.
.div{
border: 1px solid red;
float: left;
}
|
| .div{ border: 1px solid red; float: left; } |
Если мы сейчас откроем страницу в нашем браузере, то получим результат — наши дивы располагаются друг за другом. При этом их ширина зависит от того контента, который находится в этих дивах, и вычисляется автоматически браузером. Если второму div-у задать свойства float:right, то мы увидим, что второй блок прибился к правой стороне нашей страницы. Таким образом легко можно задавать порядок наших дивов и формировать меню или контент. В будущем каждому div-у желательно задавать ширину, что потом не получалось всякой ненужной нам мишуры.
Важно! Сразу хочу отметить, если Вы новичок в css, то сразу привыкайте к хорошему, а именно используйте в css классы, а не id. Это поможет Вам в будущем, особенно тогда, когда Вы будете работать с библиотеками jQuery. Кроме того, названия классов очень рекомендуется писать «говорящие». Например, для контента желательно назвать класс дива .content, а для сайдбара — .sidebar. Если же Вы желаете выделить какое-то свойство для определенного элемента на Вашей странице, тогда используйте #id.
Важно! В коде Вы можете заметить странную приписку в html — <div style=”clear: both;”></div>. Что это за непонятный такой третий div спросите Вы? Все просто, уважаемые программеры, мы обязаны сообщить браузеру, что после этой команды, все остальные div-ы должны идти ниже предыдущих. Если это не сделать, то может получиться нехорошая ситуация, когда дивы выстраиваются в одну колонку, или нализают друг на друга. Это команда браузеру типа html тега <br>, но для div-ов.
Свойство padding и margin для div-oв
Важные свойства в блочной верстке div-ами. И умения ими пользоваться помогут Вам в создании индивидуальных дизайнерских решений для Вашего сайта. Изначально, если упустить эти свойства наших div-ов (блоков), то мы получим следующую картину, что все div-ы располагаются вплотную к друг другу, в независимости от того, идут они друг за другом или один под другим. Именно благодаря нашим свойствам, таким как padding и margin — можно задавать промежутки между div- ами, либо внутри самих дивов. Например:
.div{
border: 1px solid red;
float: left;
padding: 10px;
margin-right: 10px;
}
|
| .div{ border: 1px solid red; float: left; padding: 10px; margin-right: 10px; } |
Данным кодом в CSS мы указали нашим дивам расстояние между ними, а также расстояние внутреннего контента внутри самого блока.
Если же нам нужно, чтобы один наш блок (div) располагался на каком-то особенном расстоянии от своего соседнего блока, то нам необходимо использовать свойство margin.
Важно! Свойства padding и margin имеют следующие параметры. Если мы просто зададим количество пикселей и все, это то, что мы проделали с padding, то со всех четырех сторон будем сделано это расстояние. Если задать две величины, например так: margin: 10px 5 px. То сверху и снизу будет расстояние в 10px, а слева и справа по 5px.
Важно! Также существуют и персонализированные промежутки. Они задаются присвоением к нашим свойствам слов bottom (низ), top (верх), left, right. В нашем примере, приведенном выше мы используем расстояние справа.
Свойство border — задаем границы нашим div-ам
Бывает, что нам нужно задать отчетливую границу нашим блокам, чтобы наглядно демонстрировать их разницу между собой. В этом случае нам необходимо свойство border. Благодаря этому свойству мы сможем задать границу нашему диву по нашему выбору. Данное свойство имеет три параметра, которые разделяются пробелами. Первый — ширина, задается пикселями. Собственно это ширина нашей границы. Второй параметр — стиль. Стилей достаточно много, и потребуется целая статья, чтобы описать их все. Какие могут быть стили? Например двойная граница, или прерывистая. И так далее. В нашем примере мы используем solid — одиночную линию заданной ширины. Третий параметр — это собственно цвет. Может задаваться 16-ричным кодом, либо словом по-английски, например black.
Также можно указывать границу для каждой из сторон нашего div-а, для этого воспользуйтесь уже упомянутыми top, bottom, left, right. Пример кода ниже.
.div{
border: 1px solid red;
float: left;
padding: 10px;
margin-right: 10px;
border: 1px solid red;
}
|
| .div{ border: 1px solid red; float: left; padding: 10px; margin-right: 10px; border: 1px solid red; } |
Свойство width и height для div-ов
Вот теперь мы можем задать нашим div-ам ширину и высоту, что сделает наши дивы более наглядными. Просто добавьте в свойства каждого класса наших div-ов width:300px; height:500 px. Откроем теперь нашу страницу, вы увидите, что наши блоки стали намного больше и теперь выглядят более полноценно. Забегу сразу вперед и скажу, что ширина и высота может задаваться в пикселях или процентах. Учтите это.
Wrapper. Что это и зачем?
Мы с Вами дошли до довольно важного момента в верстке сайта, а именно до wrapper-а. Вы сами должны выбрать использовать его Вам в будущем или нет, но я Вам советую использовать его. Но для начала давайте поймем, что это вообще такое.
Обычно, при создании сайта нам нужно, чтобы наш сайт был по центру нашего окна браузера. При этом обычно мы задаем нашему сайту какие-то фиксированные параметры, ширину там или высоту. Поэтому нам бы хотелось, чтобы все это отлично выглядело и было наглядным. Поэтому появился такой div-блок, который назвали Wrapper. Он представляет из себя некий контейнер, в котором находятся все остальные блоки.
Как его использовать? Для этого мы создаем наш div wrapper сразу же после тега <body>, после чего размещаем внутри нашего враппера все остальные блоки нашего сайта, а затем закрываем div wrapper.
В CSS мы задаем нашему wrapper-у фиксированную ширину (обычно указывают 990 px, но здесь можно эксперементировать — это связано с тем, что на данный момент большинство пользователей используют разрешение 1024×768, но разрешение все время растет, поэтому в будущем эту величину надо менять), а также указываем следующее: margin-left: auto; margin-right: auto;
Все это сделает наш сайт оцентрованным по середине, при этом надо учитывать, что у нашего тега <body> тоже есть свои отступы, поэтому желательно их сразу убрать. Вставляем код ниже в наш CSS файл.
body, html{
margin: 0px; padding: 0px;
|
| body, html{ margin: 0px; padding: 0px; |
Также прошу Вас заметить, что если мы хотим изменить расстояние сверху или вообще с любой другой стороны, то лучше всего воспользоваться свойством margin у wrapper.
Div верстка – Кодим блочную верстку ИТОГ
Так, ну вот и пришло время, чтобы, наконец нам сверстать весь сайт, который был показан на картинке выше. Ниже я указал код, который должен быть в index.html и в style.css.
CSS файл:
body, html{
font: 12px tahoma;
margin: 0px;
padding: 0px;
}
div{
text-align: center;
}
.wrap{
width: 990px;
margin-left: auto;
margin-right: auto;
background: #ddd;
padding: 10px;
}
.header{
background: #e25e5e;
height: 100px;
margin-bottom: 10px;
padding: 10px;
}
.sidebar{
float: left;
padding: 10px;
width: 300px;
background: #5ee28d;
height: 700px;
}
.content{
float: left;
padding: 10px;
margin-left: 10px;
background: #5e86e2;
width: 640px;
height: 700px;
text-align: left;
}
.bottom{
background: #141926;
height: 60px;
margin-top: 10px;
padding: 10px;
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| body, html{ font: 12px tahoma; margin: 0px; padding: 0px; }
div{ text-align: center; }
.wrap{ width: 990px; margin-left: auto; margin-right: auto; background: #ddd; padding: 10px; }
.header{ background: #e25e5e; height: 100px; margin-bottom: 10px; padding: 10px; }
.sidebar{ float: left; padding: 10px; width: 300px; background: #5ee28d; height: 700px; }
.content{ float: left; padding: 10px; margin-left: 10px; background: #5e86e2; width: 640px; height: 700px; text-align: left; }
.bottom{ background: #141926; height: 60px; margin-top: 10px; padding: 10px; } |
Из вышепредставленного кода Вы можете видеть, что, благодаря блочной верстке, мы сократили наш код в index.html до минимума, при этом, наша страница очень функциональна, ее легко видоизменять, при этом редактируя всего один файл style.css. Вот собственно и все, можете пользоваться этим кодом или делать свой на примере этого.
ОБНОВЛЕНИЯ
ВНИМАНИЕ! Я буду постоянно обновлять данную страницу и внедрять в нее различные свойства, которые можно будет задавать нашим дивам. Поэтому почаще заглядывайте на эту страницу, чтобы быть в курсе последних изменений, которые касаются div-ов. Удачи в кодинге.
| HTML | WebReference
Элемент <div> (от англ. division — раздел, секция) является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или id с именем класса или идентификатора.
Как и при использовании других блочных элементов, содержимое <div> всегда начинается с новой строки, после него также добавляется перенос строки.
Закрывающий тег
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>DIV</title>
<style>
.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;
border: solid 1px black;
float: left;
}
.block2 {
width: 200px;
background: #fc0;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: 40px;
left: -70px;
}
</style>
</head>
<body>
<div>Почвообразовательный процесс физически
иссушает монолит в полном соответствии с законом Дарси.
В лабораторных условиях было установлено, что сушильный шкаф
теоретически возможен. Выветривание, несмотря на внешние
воздействия, однократно.</div>
<div>Конкреция пространственно трансформирует
пирогенный псевдомицелий, хотя этот факт нуждается в
дальнейшей тщательной экспериментальной проверке.</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид блоков, оформленных с помощью стилей
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
Все что нужно знать для работы с сайтом
Содержание
Любая веб-страница состоит из расположенных на ней элементов, и практически всегда за их размещение отвечает блочная верстка div. Конечно, существует еще и табличная верстка с использованием тегов <table>, <tr>, <td>, и существуют даже споры о том, какую лучше использовать систему — блочную или табличную. Однако в действительности в в настоящее время вы не встретите ни одного из современных, популярных и удобных сайтов, использующих только табличную верстку. В лучшем случае она используется только для того, для чего она и предназначена — то есть для создания таблиц, но никак не для формирования самой структуры сайта.
Дело в том, что div верстка сайта позволяет задавать множество css-свойств, недоступных для таблиц. Кроме того, самый главный недостаток табличной системы состоит в том, что таблица не будет показана на экране до тех пор, пока она не будет полностью загружена браузером. Если весь сайт сделан в таблице, то он появится на дисплее лишь после того, как будет полностью загружен весь html-код страницы.
Тег DIV и свойство float
Основа блочной системы — это тег <div></div>, который является контейнером для контента. Внутри него также могут содержаться другие контейнеры <div></div>.
Использовать тег DIV — не сложнее, чем редактировать теги MP3. Как правило, стандартная структура сайта формируется следующим образом: существует основной контейнер <div> (часто ему присваивается класс с названием wrapper, container, main и т.д.). Внутри этого контейнера располагаются блоки меню, контентной части, сайдбара.
По умолчанию, каждый новый блок располагается с новой строки. Для того, чтобы расположить блок слева или справа от другого (например, чтобы расположить сайдбар справа), используется свойство float. По умолчанию оно имеет значение «none», но можно также выставлять значения «left» и «right».
Рассмотрим это свойство на примере с двумя блоками.
<div>Блок для контента</div> <div>Блок для сайдбара</div>
Этот код даст следующий результат:
Свойство clear
Важно учитывать, что свойство float распространяется не только на сам блок, в котором оно прописано, но и на последующий элемент, который будет идти за этим блоком. То есть если мы к вышеописанным двум блокам добавим еще один блок, не указывая ему никаких свойств, то он расположится не с новой строки, а начнется справа от второго блока.
Для того, чтобы избежать этого, блочная верстка div использует свойство clear, которое должно быть задано для того блока, который мы хотим расположить с новой строки. Чаще всего для этого ему задается значение «both», но можно также задать значения «left» или «right», если мы хотим не просто расположить блок на новой строке, но и задать ему выравнивание.
Дополним вышеуказанный пример новым элементом:
<div>Блок для контента</div> <div>Блок для сайдбара</div> <div>Новый блок, расположенный снизу</div>
Результат:
Отступы в блочной верстке
Помимо расположения блоков, немаловажным является задание отступов как между блоками, так и внутри них. Для этого, соответственно, используются свойства margin и padding.
Отступы задаются отдельно для верхней, правой, нижней и левой частей элемента. Их можно задать одной строкой путем перечисления четырех значений:
margin: 20px 10px 0 40px
Блок с такими параметрами будет располагаться на 20 пикселей ниже вышестоящего элемента, на десять пикселей от правостоящего элемента, будет иметь нулевой отступ снизу и будет иметь отступ размером в 40 пикселей слева.
Если все те же самые показатели указать в свойстве padding, то это будут внутренние отступы для контента по отношению к границам блока, в которых он расположен.
Можно также задавать отдельные свойства для отдельных граней с помощью margin-top, margin-bottom, margin-left, margin-right (и аналогично для padding). В таком случае, если какая-то из граней не будет указана, то отступ с ее стороны будет равен нулю или будет определен общими свойствами css, заданными для блоков на странице.
Изучаем html блоки тег div — верстка, примеры, видео
Добрый день друзья! Как то в своих нескольких уроках по html я говорил и употреблял такое понятие как div верстка.
У вас наверняка возникли вопросы, особенно если вы новички, что же это такое?
В сегодняшней статье я развею все ваши сомнения и отвечу на вопросы что из себя представляют div блоки в
Приступим к изучению.
HTML div блоки и верстка
Чтобы не захламлять и замусоривать ваш мозг, вкратце лишь скажу, что раньше все веб дизайнеры и разработчики при создании страниц и сайтов использовали табличную верстку, где каждая ячейка представляла из себя определенный элемент. Примерно это выглядело вот так:
| Здесь располагался логотип Тут телефон | |||
| Здесь был сайдбарС пунктами меню | Раздел меню 1 | Раздел меню 2 | Раздел меню 3 |
Вот примерно таким было создание сайтов. Это очень примитивный пример, зато вы наглядно можете представить как создавались сайты в те далекие времена. Технологии интернет не стоят на месте и в какой-то момент к нам пришло такое понятие как html div верстка. И тут, как говорится, понеслось.
Ее значение в сайтостроении действительно велико. Теперь создавать сайты и управлять блоками html стало проще простого. Сайты стали получаться красивыми, интересными. Теперь весь мир верстает ими только в путь.
Вот так теперь можно изобразить упрощенно модель использования div html блоков.
Удобство заключается в независимости блоков друг от друга, ими легко управлять по отдельности, двигать как вам угодно, добавлять стили, можно задавать общие стили через CSS правила для нескольких групп Div. Согласитесь это удобно.
Примеры использования тегов div
Давайте разберем на практике несколько примеров как можно применить теги div на html странице. На простом примере мы создадим 4 блока на странице. Я буду всегда использовать в этом и дальнейших примерах программу Notepad++
Итак, давайте поясню. У нас есть конструкция
<!DOCTYPE html> она годна для современных браузеров и поддерживает разметку html 5 про нее мы поговорим в дальнейших выпусках.
Далее открывается большой «родительский» контейнер
<html> . Он парный его нужно закрыть в конце обязательно! Потом идет открытие служебного тега
<head> , который тоже парный и в нем содержится служебная информация о кодировке
<meta charset> , самый главный seo заголовок страницы title, описание (его сюда я не включал, ибо нет необходимости, мы разбираем чисто технический аспект), сюда же подключают CSS стили, шрифты (библиотека Google Fonts), яваскрипты.
Следующим идет тег
<body> . В нем уже будет хранится вся наша разметка блоков и все контейнеры с тегами. Просто запомните его как огромную «бочку».
И вот, наконец, пошли наши контейнеры div.
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> <div></div> <div></div> <div></div> |
Важно! Они тоже парные их нужно также наряду с другими тегами закрывать.
Каждый блок див как видите имеет атрибут class, после знака равенства вы можете самостоятельно и произвольно задавать их. Эти классы созданы специально для CSS. Т.е браузер заходит на страницу, видит блок div и смотрит, какая информация в нем содержится и идет в CSS файл и уже там ищет нужный класс.
Можно задавать не только атрибут class, но также можно использовать и id (идентификатор). Вы можете задать вопрос: «А какая мне разница, какой использовать?» Отвечу, для верстки можете применить любой способ. С одним лишь отличием — по приоритету
id имеет больше привилегий, чем
class .
Это я поясню в видео шпаргалке ниже.
У каждого свой стиль создания сайтов, мне больше нравится использовать именно class, поскольку эта запись в CSS отображается с точкой
.selector
Да, кстати, хочу сказать, что header, sidebar, content, footer — это все селекторы CSS, а они уже будут иметь атрибуты.
Итак, продолжаем разгребать кашу в головах пользователей. Div блоки с class мы создали теперь приступим к CSS.
Откроем внутри тега head css правила для нашей страницы, т.е оформим ее. Сделаем это вот так:
Запись будет следующей (просто скопируйте и вставьте в своем примере и посмотрите в браузере)
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>Пример использования div тегов</title>
<style>
.header {
width:600px;
height:120px;
border:1px solid black;
}
.sidebar {
width:200px;
height:300px;
border:1px solid black;
float:left;
}
.content {
width:370px;
height:300px;
border:1px solid black;
margin-left:230px;
}
.footer {
width:600px;
height:130px;
border:1px solid black;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>Пример использования div тегов</title> <style> .header { width:600px; height:120px; border:1px solid black; } .sidebar { width:200px; height:300px; border:1px solid black; float:left; } .content { width:370px; height:300px; border:1px solid black; margin-left:230px; } .footer { width:600px; height:130px; border:1px solid black; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html> |
У блока с контентом .content я добавил отступ от левого края
margin-right:230px; О том, как сделать отступы я говорил вот в этой статье.
Чтобы увидеть границы наших div блоков я применил атрибут
border и задал значение
1px, solid — сплошная линия и выбрал цвет черный black.
Также вы наверняка обратили внимание, что у селектора
.sidebar я добавил атрибут
float:left; Это обеспечивает «обтекание» других блоков по левому краю. Вот что получилось бы, если мы уберем этот элемент:
Теперь предлагаю вашему вниманию видео урок, где я подробно рассказываю про возможности html div верстки. Смотрите внимательно и просто повторяйте. Ниже можете скачать исходник с нашим примером. Спасибо за внимание!
[sociallocker id=»3259″]Скачать Исходник
[/sociallocker]
| Справочник HTML
Элемент <div> (от англ. «division» ‒ «раздел, блок») является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили.
Как и при использовании других блочных элементов, содержимое <div> всегда начинается с новой строки, после него также добавляется перенос строки.
Синтаксис
<div>...</div>Закрывающий тег
Обязателен.
Атрибуты
- alignУстарел в HTML5
- Задаёт выравнивание содержимого <div>.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <div> со следующими значениями CSS по умолчанию:
div {
display: block;
}Различия между HTML 4.01 и HTML5
Атрибут align для тега <div> не поддерживается в HTML5.
Пример использования:
Элемент <div>
Пример HTML:
Попробуй сам
<div>
<h4>Это заголовок</h4>
<p>Это параграф.</p>
</div>Спецификации
Поддержка браузерами
| Элемент | ||||||
| <div> | 4+ | 1+ | 3.5+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <div> | 1+ | 1+ | 6+ | 1+ |
HTML тег div
Пример
Раздел
.myDiv {
граница: красный край на 5 пикселей;
цвет фона: светло-голубой;
выравнивание текста: по центру;
}
Это заголовок
в элементе div
Это текст в элементе div.