Студопедия

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

Разделы сайта

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






  • Описание






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






    © 2023 :: MyLektsii.ru :: Мои Лекции
    Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
    Копирование текстов разрешено только с указанием индексируемой ссылки на источник.