HTML тегПару лет назад “скелетом” для сайта всегда служила таблица (тег table). То есть делалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. Теперь же все пользуются тегом <div> для создания “скелета” будущего сайта. Под скелетом я понимаю общую структуру сайта:
![Популярный скелет сайта](//vavik96.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif)
Синтаксис тега <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
Пару лет назад “скелетом” для сайта всегда служила таблица (тег table). То есть делалась одна большая таблица, которая потом делилась на несколько областей: заголовок, левый блок, правый блок, центр и низ. Теперь же все пользуются тегом <div> для создания “скелета” будущего сайта. Под скелетом я понимаю общую структуру сайта:
![Популярный скелет сайта](https://vavik96.com/wp-content/uploads/2015/08/skelet-sajta2.jpg)
Синтаксис тега <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>
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>
Таких элементов можно сделать множество. В итоге вы получаете что-то подобное:
![](https://vavik96.com/wp-content/uploads/2015/08/div-primer-12.jpg)
![](https://vavik96.com/wp-content/uploads/2015/08/div-primer-22.jpg)
![](https://vavik96.com/wp-content/uploads/2015/08/div-primer-32.jpg)