Тег <div>


Изучение блочного элемента - тега <div> может показаться довольно трудным, но это на первый взгляд. Практически ни один сайт не создается без использования блоков <div>, как минимум изображение вставляется с его помощью, правда существуют и другие способы, но этот самый универсальный. А оформление страниц с применением данных блоков делает код более читабельным и универсальным. Можно построить полностью сайт на таблицах, такая техника также постоянно применяется, но многие блоки сайта требуют персональных свойств, а применяя блоки <div> - можно достичь максимально комфортных условий для показа контента.

Тег div

Вникать в самые азы по изучению свойств блока <div> в данной статье не буду, а показать некоторые моменты, которые будут наиболее полезны при верстке своего сайта - нужно. Также можно посмотреть и скачать пример сайта созданного на блоках <div>, который описан в другой статье.

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


Пример 1: формируются блоки таким способом - <div> наполнение </div> - закрывающий тег </div> - обязательный!!! Главное не запутаться в формировании блоков, потому что лишний тег может "рвать" страницу, а искать его можно долго. По данной причине каждый блок в свойствах нужно называть нужным названием и вставлять поочередно, тогда через время, при редактировании, легко будет что то менять.

Пример 2: без применения свойств, с блоков толку никакого. А значит всегда нужно задавать параметры размеров блока, или выставлять автоматическое расширение размера, под наполнение. В примере заданы высота, ширина, и бордер, который желательно сразу указывать, чтобы видеть само расположение блока, так будет удобнее при позиционировании, а дальше бордер можно обнулить (сделать невидимым), или окрасить нужным цветом.

Пример 3: расположить блок можно в любом месте страницы, для этого в свойствах нужно задать параметр position и задать ему индентификатор, например relative, который располагает блок в общем потоке (один за другим).

Пример 4: чтобы блоки <div> не налезали друг на друга, нужно задать параметр float:none;, который запрещает обтекание блока другими блоками и все они располагаются один за другим. А если задать параметры left или right - то разрешается обтекание блока слева, или справа.

Как видно из примеров, если задавать стили блокам непосредственно в самом коде каждого <div>, то код разрастается и теряется динамика. Просто при смене дизайна, нужно будет переписывать каждый блок по отдельности, что очень затруднительно. По этой причине и создается файл, который обычно называют CSS, который является единым файлом стилей для всего сайта и подключается ко всему сайту, а значит задает свойства стилей для всех блоков и всего шаблона.

Пример 5: создадим блок, с текстовым наполнением, которому присвоим индентификатор id="text", свойства которого будут описаны в файле CSS и расположим наполнение в середине блока, придав свойства align="center". Если файл CSS отсутствует, просто сайт может быть одностраничным, или нужно задать свойства только для этой страницы, тогда блок свойств нужно расположить в самом начале страницы, до закрывающего тега </head>, как показано в Примере 6.

Пример 7: если нужно расположить сам блок по центру страницы, тогда можно создать блок, который будет шириной 100%, и задать в нем свойство align="center", а внутри него расположить нужный нам блок <div>. Кстати такая техника расположения блоков применяется постоянно, потому желательно хорошо изучить и практиковаться с данным методом позиционирования блоков. Для примера, меню делается обычно помещением нескольких блоков один внутри другого и таких вложений может быть много.

Для удобства, зададим отступы для внутреннего блока, чтобы было не меньше 10 пикселей со всех сторон - margin:10px;, чтобы смотрелось правильно и более естетично. Обычно всем блокам нужно задавать отступы со всех сторон, тогда код будет более читабельным.


здесь может быть все что угодно
пример расположения 2 блоков div

Данные примеры блоков самые распостраненные, а подробное изучение не возможно в одной статье, поетому желательно изучать учебники по HTML. Естественно не только текст вставляют в блоки <div>, а также изображения. Как вставить изображение - читайте в прошлой статье. О позиционировании блоков можно почитать в статье - как расположить блоки в ряд, там описан один из способов.

по материалам сайта kapon.com.ua 18 03 2012

Поделитесь ссылкой на статью...


Всего комментариев - 5.    Можете оставить свой комментарий.

netremonta   2012-09-06 07:43:23   сайт автора - http://bezremonta.ne

Недавно затеял ремонт могу говорить полностью замучался. Куча советов от знакомых, но толку 0., Нашел интересный сайт.

netremonta   2012-09-09 03:54:38   сайт автора - http://inform-buro.o

Недавно Нашел интересный сайт.

krasotun   2012-09-20 21:45:27   сайт автора - http://krasavitsa.ki

Давеча Нашела интересный сайт.

evgenibo   2013-04-10 14:57:37   сайт автора - krasavica.by

Спасибо, только начинаю разбираться во всем это - у вас довольно доступно.

evgenibo   2013-04-10 14:58:29   сайт автора - krasavica.by

Спасибо - помогли разобраться.


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер