HTML тег div
Пару лет назад "скелетом" для сайта всегда служила таблица (тег table). То есть делалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. Теперь же все пользуются тегом <div> для создания "скелета" будущего сайта. Под скелетом я понимаю общую структуру сайта:
LOGO |
REKLAMA
|
Горизантальное меню |
Левый
блок
|
Контакт
|
Правый
блок
|
Футер (низ)
|
Синтаксис тега <div>
<div class="Имя класса">
...
</div>
|
Данный тег является блочным элементом. Самым главным его атрибутом является class. С помощью него можно создавать блоки с нужными стилями CSS.
Пример 1. Использование блока div
<head>
<style type="text/css">
.primer {
width: 300px;
background: #aaa;
padding: 5px;
padding-right: 25px;
border: solid 1px orange;
float: right;
}
</style>
</head>
<body>
<div class="primer">
Пример использования блока div
</div>
</body>
|
Преобразуется на странице в следующее:
Пример использования блока div
|
Это элементарный пример
использования тега <div>. Его возможности уходят далеко за рамки этого примера. Например, с помощью этого тега можно создавать красивые меню (см. как сделать выпадющее меню на css.
Теперь рассмотрим подробно все атрибуты тега div.
Атрибуты <div>
1) align="параметр" - задает выравнивание. Может принимать следующие значения:
→ center - выравнивание текста по центру
→ left - выравнивание текста по левому краю
→ right - выравнивание текста по правому краю
→ justify - выравнивание по левому и правому краю.
2) title="текст" - всплывающая подсказка к тегу. Почти никогда не используется.
3) class="имя" - определяет принадлежность к классу.
Практические примеры использования <div>
И на последок ещё пару практических примеров с тегом div.
Пример 2. Вывод контента по центру с использованием div
<head>
<style type="text/css">
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="center">
Этот текст будет по центру
</div>
</body>
|
Преобразуется на странице в следующее:
Этот текст будет по центру
|
Теперь вместо тега <center> </center> можно писать <div class="primer2"> </div> и текст будет выведен по центру. Это соответствует требования стандарта HTML.
Пример 3. Красивая рамка с div
<head>
<style type="text/css">
.ramka {
background: #eeeee5;
border: 1px dashed #abab9a;
padding: 5px;
font: 8pt Tahoma;
color:#2c2c2c;
}
</style>
</head>
<body>
<div class="ramka">
Вывод текста в красивом блоке
</div>
</body>
|
Преобразуется на странице в следующее:
Вывод текста в красивом блоке
|
Уважаемый читатель, теперь Выузнали гораздо больше о разметке html. Теперь Вы в состоянии сделать свой собственный сайт. Позднее будут выложены ссылки на практические примеры, которые часто необходимы в верстке.
Ссылка на следующий урок:
Урок 10. Заголовочне теги html
← Перейти в каталог html уроков и советов
|