Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Описание






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

Как и при использовании других блочных элементов, содержимое тега < div> всегда начинается с новой строки. После него также добавляется перенос строки.

Синтаксис

< div>... < /div>

Атрибуты

align Задает выравнивание содержимого тега < div>.

title Добавляет всплывающую подсказку к содержимому.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

<! 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 class=" block1" > Lorem ipsum dolor sit amet, consectetuer

adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet

dolore magna aliguam erat volutpat. < /div>

< div class=" block2" > 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. Вид блоков, оформленных с помощью стилей


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

mylektsii.su - Мои Лекции - 2015-2024 год. (0.005 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал