03:53 Урок 9 - HTML тег <div>. Подробное описание с примерами | |
HTML тег <div>Пару лет назад "скелетом" для сайта всегда служила таблица (тег <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> Преобразуется на странице в следующее: .primer { width: 300px; background: #aaa; padding: 5px; padding-right: 25px; border: solid 1px orange; float: right; } Пример использования блока div Это элементарный пример использования тега <div>. Его возможности уходят далеко за рамки этого примера. Например, с помощью этого тега можно создавать красивые меню (см. как сделать выпадющее меню на css ») Теперь рассмотрим подробно все атрибуты тега div. Атрибуты <div>
Практические примеры использования <div>Давайте рассмотрим пару практических примеров с тегом div. Пример. Вывод контента по центру с использованием div<head> <style type="text/css"> .center { text-align: center; } </style> </head> <body> <div class="center"> Этот текст будет по центру </div> </body> Преобразуется на странице в следующее: .primer2 { text-align: center; } Этот текст будет по центру Теперь вместо тега <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> Таких элементов можно сделать множество. В итоге вы получаете что-то подобное: .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; } Текст к диву 1 Текст к диву 2 Текст к диву 3 Уважаемый читатель, теперь Вы узнали гораздо больше о разметке html. Теперь Вы в состоянии сделать свой собственный сайт. Позднее будут выложены ссылки на практические примеры, которые часто необходимы в верстке. Ссылка на следующий урок: Урок 10. Заголовочне теги html | |
| Категория: Все о сайтах | Просмотров: 601 | | |
| Всего комментариев: 0 | |