Что такое div в html – DiV верстка — Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS

Изучаем html блоки тег div — верстка, примеры, видео

Добрый день друзья! Как то в своих нескольких уроках по html я говорил и употреблял такое понятие как div верстка.

У вас наверняка возникли вопросы, особенно если вы новички, что же это такое?

В сегодняшней статье я развею все ваши сомнения и отвечу на вопросы что из себя представляют div блоки в

Приступим к изучению.

HTML div блоки и верстка

Чтобы не захламлять и замусоривать ваш мозг, вкратце лишь скажу, что раньше все веб дизайнеры и разработчики при создании страниц и сайтов использовали табличную верстку, где каждая ячейка представляла из себя определенный элемент. Примерно это выглядело вот так:

Здесь располагался логотип Тут телефон
Здесь был сайдбарС пунктами менюРаздел меню 1Раздел меню 2Раздел меню 3

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

Ее значение в сайтостроении действительно велико. Теперь создавать сайты и управлять блоками html стало проще простого. Сайты стали получаться красивыми, интересными. Теперь весь мир верстает ими только в путь.

Вот так теперь можно изобразить упрощенно модель использования div html блоков.

Html div блоки

Удобство заключается в независимости блоков друг от друга, ими легко управлять по отдельности, двигать как вам угодно, добавлять стили, можно задавать общие стили через CSS правила для нескольких групп Div. Согласитесь это удобно.

Примеры использования тегов div

Давайте разберем на практике несколько примеров как можно применить теги div на html странице. На простом примере мы создадим 4 блока на странице. Я буду всегда использовать в этом и дальнейших примерах программу Notepad++

Примеры кода блоков div на веб странице в редакторе

Итак, давайте поясню. У нас есть конструкция <!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 правила для нашей страницы, т.е оформим ее. Сделаем это вот так:

стиля для блоков div

Запись будет следующей (просто скопируйте и вставьте в своем примере и посмотрите в браузере)

<!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]

Тег div в HTML. Основы HTML для начинающих. Урок №17


Тег div в HTML. Основы HTML для начинающих. Урок №17

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу коротко о теге <div> для чего он нужен, как им пользоваться.
Урок будет очень коротким, но очень важным и полезным. Если вы в дальнейшем будете создавать сайты, макеты, шаблоны, то вам придется очень часто видеть тег <div>.

Когда-то, до царя Гороха,

для создания каркаса сайта использовали таблицы HTML:

Теперь все изменилось! Вместо тега <table> для создания каркаса сайта стали использовать тег <div>.

тег <div>

тег  <div> — это блочный элемент, внутри которого могут находиться другие теги, содержание веб страницы. Своего рода, это контейнер, который можно легко видоизменять и выводить в любом месте веб страницы с помощью CSS. Без использования CSS тег <div> мало функционален. Но вы не заморачивайтесь и не кидайтесь сразу изучать основы CSS. Познакомьтесь с тегом <div>, пройдите полностью основы HTML и только тогда переходите к изучению CSS, иначе запутаетесь.

Итак, тег <div>, закрывающий тег обязателен.


<div>содержимое</div>

* атрибуты тега <div>

Чтобы выравнивать блок <div> с помощью CSS, используют атрибут align:

align

  • Center — выравнивание блока по центру. Пример: align=»center».
  • Left — выравнивание блока по левому краю (по умолчанию). Пример: align=»left».
  • Right — выравнивание блока по правому краю. Пример: align=»right».

Пример:


<div align="left">блок будет размещен в левой части html страницы</div>
<div align="right">блок будет размещен в правой части html страницы</div>
<div align="center">блок будет размещен по центру html страницы</div>

class

class — имя класса для связки с CSS оформлением. Пример: class=»имя».

Пример:

<div><img src="http://stepkinblog.ru/wp-content/themes/stepkinblog/images/heder.png"></div>

id

id — имя CSS идентификатора. Пример: id=»#имя».

Пример:


<div><img src="http://stepkinblog.ru/wp-content/themes/stepkinblog/images/heder.png"></div>

title

title – описание блока в виде всплывающей подсказки. Пример: title=»описание».

Пример:


<div title="А вот и я!">Пример всплывающей подсказки</div>

[посмотреть все примеры]

Как я и говорил, урок короткий, но, поверьте, очень важный. Удачи, жду вас на следующих своих уроках! Не пропустите.

Предыдущая запись
Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16 Следующая запись
Нам 1 годик! С Днем Рождения StepkinBlog.ru!!!

Элементы span и div в HTML

верстка

Всем привет!

С Вами снова Андрей.

Очередной выпуск рассылки будет посвящен элементу span и элементу div в HTML.

Сегодня Вам будет предложено 2 версии урока. Одна в текстовом виде – ее Вы видите перед своими глазами, а второе ВИДЕО – ее Вам нужно будет скачать.

Ссылка на видео версию урока:

Видео версия 11 урока

верстка

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

На наш взгляд видео версия Вам будет более понятна.

Так, про дополнительные элементы html…

Допустим вам нужно выделить какое-нибудь отдельное слово в тексте (предположим другим цветом и фоном), или чтобы картинка и текст, относящийся к ней, были сверху и справа в ячейке таблицы, а основное содержимое страницы, допустим в низу и ближе к левому краю. По поводу первого примера скажу, что можно это сделать тегом <font> с набором нужных параметров, но он относится к запрещенным тегам (новые браузеры его могут не поддерживать), да и свойства замены фона у него нет.

Для подобных случаев и предусмотрены два специфических тега, которые по сути ничего не делают сами по себе. Но при применении нужных стилей к ним, можно добиться чего угодно. Можно вообще используя только два этих тега и применяя к ним стили, сделать всю страницу сайта.

И так, это теги <div></div> и <span></span>.

Какая между ними разница, если используются они для одного и того же?

Элемент div — это блочный тег, и в нем могут быть любые нам известные теги (списки, картинки, таблицы…).

Элемент span — это строчный тег, и он применим исключительно к тексту (выделить фрагмент текста другим цветом).

Стили, которые применимы к данным тегам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет.

Давайте рассмотрим стили, которые наиболее типичны для данных тегов. Они же применимы ко всем остальным тегам, и используются так же, просто чаще их используют с этими тегами (особенно к <div></div>) .

Первое с чего хотелось бы начать это с позиционирования элементов.

Это свойство:

position — устанавливает или определяет позицию элемента.

Значения:

static — по умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.

absolute — позиция объекта определяется относительно позиции родительского объекта или относительно объекта body. relative — Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.

left/top — устанавливает или определяет позицию элемента относительно левого/верхнего края.

Значения:

x – число в процентах или пикселях.

auto — значение по умолчанию.

Рассмотрим пример:

<div> Любое содержимое блока!!!</div>

<div>

Любое содержимое блока!!!</div>

Данный пример показывает, что наш блок с шириной в 300px сдвинется вниз на 350px и влево на 200px, относительно того места, в котором он появится по умолчанию.

Следующее важное свойство:

margin – величина отступа от нашего блока до соседних объектов с четырех сторон.

Значения:

верстка

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

margin-top — задает величину верхнего отступа объекта

margin-left — задает величину левого отступа объекта

margin-right — задает величину правого отступа объекта

margin-bottom — задает величину нижнего отступа объекта

Пример:

<div> Любое содержимое блока!!!</div>

<div>

Любое содержимое блока!!!</div>

Мы создали блок с отступами вокруг него по 30px от всех его сторон.

Над чем хотелось бы остановиться еще:

padding – свойство задает величину пространства, вставляемого между объектом и его границами.

Значения:

padding-bottom — задает величину пространства, вставляемого между объектом его нижней границей.

padding-left — задает величину пространства, вставляемого между объектом его левой границей.

padding-right — задает величину пространства, вставляемого между объектом его правой границей.

padding-top — задает величину пространства, вставляемого между объектом его верхней границей.

Пример:

<div> Любое содержимое блока!!!</div>

<div>

Любое содержимое блока!!!</div>

Мы создали блок с отступами по 30px от содержимого до всех его сторон.

И рассмотрим пример с использованием тэга <span></span>:

Допустим, у нас есть конструкция вида:

Любой текст !

Мы хотим сделать слово текст на желтом фоне синими буквами. Для этого заключим его в тег <span></span> и применим соответствующие стили.

Любой <span>текст</span>! <p></code></p>

Любой <span>текст</span>!

<p></code></p>

Любой текст!

Еще раз повторюсь, что все рассмотренные стили применимы не только к рассмотренным двум элементам div и span, но и ко всем нам известным HTML-тегам!

На этом мы сегодня закончим, и напоминаю Вам, что Вы можете, для лучшей проработки, скачать видео-версию урока:

Видео версия 11 урока

Любой <span>текст</span>!
<p></code></p>

С Вами был Бернацкий Андрей!

киберсант-вебмастер

верстка

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее киберсант-вебмастер

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Элемент в HTML

Тег <div> представляет собой блочный элемент, с помощью которого можно отображать отдельные фрагменты содержимого в видоизменённом представлении. Наименование тега div было взято из начала английского слова «division», что значит деление.

Внутри универсального контейнера может располагаться текст, картинки, и прочие сегменты html-верстки. Цвет, отступ, масштаб и прочие визуальные модификации задаются с помощью стилей. Для того чтобы уменьшить общее число символов, на страницах сайта, параметры отображения в виде стилей целесообразно выводить в отдельный файл для хранения каскадных стилей, а используемому тегу присвоить class или id с уникальным именем селектора.

Два блока в одном контейнере


HTML

<div>

	<div>
		Первый блок
	</div>

	<div>
		Второй блок
	</div>

</div>


CSS

#container
{
	width : 50%;
	margin : 17px auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
#block-01, #block-02
{
	width : 100px;
	height: 140px;
	padding-top: 12px;
}

#block-01
{
	background-color : #FC0;
	float : right;
}
			
#block-02
	{
	background-color : #069;
	color: #fff;
}


Блок «примечание»


HTML

<div><div>Примечание:</div>
Текст...</div> 


CSS

.note {
	font-size: 15px;
	color: #000C00;
	font-family: Arial, Helvetica, sans-serif;
	margin: 25px 15px 25px 15px;
	padding: 10px 30px;
	border: solid 1px black;
	background-color: #F9AC0D;
}
.note div {
	font-size: 12px;
	color: #303030;
	font-weight: bold;
	letter-spacing: 3px;
	margin-bottom: 10px;
}


Блочная верстка тегов div HTML

Еще каких-то десять лет назад в рунете наиболее часто использовалась так называемая табличная верстка. Ввиду того что стандарты некоторых браузеров значительно отличались друг от друга, приходилось искать решение, которое бы позволило правильно отобразить интернет-документ во всех приложениях. Но время шло, развивались стандарты, и на смену достаточно жесткой и негибкой табличной пришла хорошо изменяемая и отзывчивая блочная верстка. Во главе угла такой технологии лежит принцип использования элементов <div>. HTML-документы в большинстве своем начали строиться на основе отдельных блоков, которые, в отличие от табличной верстки, могут быть независимыми друг от друга.

Возникновение

div html

Усложнение веб-страниц и развитие компьютерной техники привело к тому, что веб-документ был разделен на две части — каркас (HTML-код) и оформление (таблицы стилей). Благодаря этому удалось достичь небывалого развития веба, результаты которого мы сейчас можем лицезреть на большинстве современных сайтов. Кроме улучшения процесса разработки <div> HTML позволил определить для каждого отдельного элемента свои правила оформления. Это способствовало улучшению читаемости кода веб-страницы и уменьшению времени загрузки документа. Теперь поисковые машины гораздо быстрее и лучше обрабатывают информацию, доступную на сайте.

Стандарты и проверка

Тег <div> в HTML используется в строгом соответствии со стандартами W3C (Консорциума всемирной паутины). Проверка кода страницы проводится специальным инструментом — валидатором, который парсит (сканирует и ищет) всевозможные ошибки на странице. Валидная страница означает, что все теги были использованы правильно и полностью отвечают требованиям стандартов.

тег div в html

Теги <div> позволяют создавать блоки или, как их еще называют, контейнеры. При этом отдельные элементы могут вкладывать друг в друга, создавая при этом структуры необходимой конфигурации и сложности. Использование тега <div> без сопровождения классом или идентификатором практически не встречается. Это обусловлено «безликостью» элемента. Если ему не присвоить класс, то в итоге все контейнеры будут иметь идентичную конфигурацию.

Для того чтобы создать действительно правильный документ, необходимо использовать следующую структуру тега <div> class= «какое-то_имя». Обращаясь по имени класса, в таблицах стиля можно определить положение, размер, подведение и другие параметры отдельного блока в документе.

Использование классов и идентификаторов

div в html

Блок <div> HTML может определяться как идентификатором id, так и классом class. Отличие первого от второго в том, что id используется на странице документа только один раз. То есть его используют для определения уникальных элементов, которые более нигде не повторяются в коде страницы. Атрибут класса позволяет применять те же правила стилей к нескольким элементам. Такой подход значительно упрощает разработку и поддержку кода. Кроме того, один объект может иметь одновременно несколько классов. Для правильного распознания их просто разделяют пробелами.

Естественно, блочная структура документа вовсе не подразумевает использование только лишь одних тегов <div>. В структуре любой интернет-страницы всегда будут и другие элементы. Кроме того, сам по себе блочный элемент <div> может иметь совсем другой вид отображения. Делается это при помощи свойства display. Элемент может иметь строчное или даже табличное отображение, что позволяет значительно увеличить гибкость использования блока и создать сайт любой конфигурации.

Тег <div>. HTML-свойства

 div class

Как уже было сказано выше, данный тег не изменяет оформление фрагмента страницы, а используется для создания семантической структуры с последующим оформлением посредством таблиц стилей. Использование закрывающего тега для этого элемента является обязательным.

Несмотря на то что многие современные браузеры смогут распознать такую ошибку, в некоторых случаях незакрытый тег может стать причиной «разваливания» структуры документа и его неверного отображения.

Так как данный элемент является блочным, то вмещенный в него контент будет начинаться с новой строки. Для изменения подобного поведения необходимо изменить параметры отображения блока свойством display. Кроме группирования вложенных элементов, тег <div> позволяет форматировать расположение контента внутри него. Для этого используется атрибут align, благодаря которому можно разместить текст или изображение по левому краю, по правому краю или по центру родительского элемента.

Позиционирование блоков

Что такое div в html

Использование атрибута position позволяет изменить метод позиционирования выбранного элемента. Так, существует три типа позиционирования:

  • Статическое (static) — используется по умолчанию. В этом случае элемент располагается в соответствии с позицией в HTML-коде.
  • Относительное (relative). В данном случае расположение объекта рассчитывается так же, как и в случае со статическим позиционированием, но данное свойство позволяет изменять позицию для дочерних элементов.
  • Абсолютное (absolute). Положение его рассчитывается относительно элемента с относительным позиционированием.

Другие атрибуты

Для изменения позиции относительно точки начала координат используются атрибуты top и left. Значения могут быть как положительными, так и отрицательными. Ширина и высота блочного элемента задается атрибутами width и height соответственно. Если они не были указаны в таблицах стилей, то блок будет занимать всю ширину родительского элемента. Если контент блока не помещается по всей ширине «родителя», то тогда поведение элемента определяется атрибутом overflow.

Надеемся, данная стать помогла разобраться с вопросом о том, что такое <div> в HTML.

HTML тег div | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 22.01.2011

Тег <div> (англ. division — разделение) — тег-контейнер, выделяет логический блок. Один из основных элементов блочной верстки. В сочетании с таблицами стилей используется для разметки страницы, разбивки страницы на независимые секции.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<div>...</div>

Атрибуты

Основные Вспомогательные События

align выраванивание содержимого контейнера
  • left — выравнивание по левой границе контейнера
  • center — выравнивание по центру
  • right — выравнивание по правой границе контейнера
  • justify — выравнивание по ширине
Значение по умолчанию зависит от свойств родительских объектов и настроек браузера. Обычно по умолчанию — выравнивание влево.
class определяет имя используемого класса
dir определяет направление символов:
  • ltr — слева направо
  • rtl — справа налево
id уникальный идентификатор
lang определяет язык отображаемого документа
onclick щелчок на элементе
ondblclick двойной щелчок на элементе
onkeydown нажатие клавиши, когда элемент имеет фокус
onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown нажатие кнопки мыши, когда элемент имеет фокус
onmousemove движение указателя мыши, когда элемент имеет фокус
onmouseout смещение указателя мыши с элемента
onmouseover помещение указателя мыши на элемент
onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style задает встроенную таблицу стилей
title всплывающая подсказка

Пример

Различные способы применения <div>:

<div>
Блок красного цвета
</div>
<div>
Выравниваем текст по центру...
</div>

Рекомендации по использованию

  • закрывающий тег обязателен (</div>)
  • может содержать CDATA, строчные и блочные элементы
  • обязательных атрибутов нет
  • не рекомендуется использовать атрибуты для форматирования содержимого, вместо используйте таблицы стилей

Твой код:
<html> <head> <title></title> </head> <body> <div>Блок красного цвета</div> <div>Выравниваем текст по центру</div> </body> </html> Сделай код и жми тут

Результат:
большой полигон

По теме

seodon.ru | Теги HTML — Тег DIV

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Тег <DIV> используется для структурного форматирования документа. Его удобно применять для выравнивания элементов HTML-кода, а также использовать как контейнер стиля (CSS) для применения стилевых свойств к группе или одному элементу.

В отличие от многих тегов HTML, <DIV>, по умолчанию, не добавляет своему содержимому каких-либо полей (margin) или внутренних отступов (padding), если только его свойства не изменены при помощи CSS.

Атрибуты

Личные атрибуты:

  • align — Устанавливает горизонтальное выравнивание содержимого относительно самого блока.

Общие атрибуты:

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: текст (блоки).

Модель тега: block (блочный, уровня блока).

Может содержать: block-теги и/или inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

<div>содержимое</div>

Пример HTML: применение тега DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега DIV</title>
  <style type="text/css">
   #div1 {
    width: 150px; /* Ширина блока */
    float:right; /* Блок всплывает вправо */
    background: #FF66CC; /* Цвет фона */
    text-align: center; /* Текст по центру */
    font-size:200%; /* Размер шрифта */
    border: 2px black dashed; /* Стиль рамки вокруг блока */
   }
   .div2 {
    width: 100px;
    position: absolute; /* Абсолютное позиционирование */
    top: 50px; /* Расстояние от верха окна браузера */
    left: 0; /* Расстояние от левой стороны окна */
    background: #99FFFF;
    text-align: center;
    font-size:200%;
    border: 1px black solid;
   }
  </style>
 </head>
 <body>
  <div>DIV1</div>
  <div>DIV2</div>
 </body>
</html>

Результат примера

Результат. Применение тега DIV.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *