Site icon Vavik96

HTML тег

Пару лет назад “скелетом” для сайта всегда служила таблица (тег table). То есть делалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. Теперь же все пользуются тегом <div> для создания “скелета” будущего сайта. Под скелетом я понимаю общую структуру сайта:

Синтаксис тега <div>

<div class="Имя класса"> ... </div>

Данный тег является блочным элементом. Самым главным его атрибутом является class. С помощью него можно создавать блоки с нужными стилями CSS.

Использование блока 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>. Его возможности уходят далеко за рамки этого примера. Например, с помощью этого тега можно создавать красивые меню.
Теперь рассмотрим подробно все атрибуты тега <div>.

 

Атрибуты <div>

1) align=”параметр” – задает выравнивание. Может принимать следующие значения:
center – выравнивание текста по центру
left – выравнивание текста по левому краю
right – выравнивание текста по правому краю
justify – выравнивание по левому и правому краю.

2) title=”текст” – всплывающая подсказка к тегу. Почти никогда не используется.

3) class=”имя” – определяет принадлежность к классу.

4) style=”стили через запятую” – возможность задать стили.

 

Практические примеры использования <div>

 

Вывод контента по центру с использованием div

 

<head> 
<style type="text/css"> 
.center { text-align: center; } 
</style> 
</head> 
<body> 
<div class="center"> Этот текст будет по центру </div> 
</body>

Преобразуется на странице в следующее:

Этот текст будет по центру

 

Теперь вместо тега <center></center> можно писать <div class="center"></div> и текст будет выведен по центру. Это соответствует требования стандарта HTML.




Красивая рамка с 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>

Преобразуется на странице в следующее:

Вывод текста в красивом блоке

 

Реализация тизеров на сайте

Удобство тега div состоит в том, что он размещается блочно относительно друг друга. Практическим примером является вывод подряд идущих блоков, которые будут автоматически переноситься на новую строку при достижении конца.

<head> 
<style type="text/css"> 
.block { 
padding: 0; 
font-size: 14px; } 
.block .element{ 
border: solid 1px #C7CADD; 
margin: 0px 3px 3px 0px; 
padding: 0px 0px 0px 0px; 
float: left; height: 200px; 
width: 150px; } 
.block .element:hover{ 
border: solid 1px #000; 
margin: 0px 3px 3px 0px; 
padding: 0; float: left; 
height: 200px; 
width: 150px; 
background: #FFFAE7; } 
.block .img{ 
text-decoration: none; } 
.block .img img{ 
margin: 5px 0px 0px 5px; 
padding: 0; width: 140px; 
height: 130px; } 
.block .text{ text-align: center; 
padding: 0; 
margin: 0; } 
</style> 
</head> 
<body> 
<div class="block"> 
<div class="element"> 
<a href=""> <div class="img"> <img src=""> 
</div> <div class="text">
</div> 
</a> 
</div> 
<div class="element"> <a href=""> <div class="img"> <img src=""> </div> 
<div class="text"></div> </a> </div> </div> 
</body>

Таких элементов можно сделать множество. В итоге вы получаете что-то подобное:

Текст к диву 1
Текст к диву 2
Текст к диву 3





Источник