Как верстать дивами?

Тег активно используется в web-дизайне для создания на html-страницах блоков, внутрь которых можно поместить содержимое любого характера – текст, картинки, таблицы и т.д.
Создать сайт самостоятельно с Wix.com

Инструкция

При использовании закрывающий тег обязателен. Его можно использовать со следующими атрибутами:- align – выравнивание (left, center, right, justify), например, Текст ;- class – имя класса ( Текст );- id – имя идентификатора html-тега;- style – направление стиля;- title – всплывающая подсказка.

При использовании блоков целесообразно применять таблицу стилей. Например, если требуется на странице создать два разных блока с содержимым, то код будет выглядеть примерно следующим образом: .block1 { width: 500px; height: 200px; background: Yellow; padding: 0px; padding-right: 0px; border: solid 0px black; float: left; } .block2 { width: 200px; height:500; background: Green; padding: 0px; padding-right: 0px; border: solid 0px black; float: right; } Блок желтого цвета первый с шириной 500px и длиной 200px. Блок зеленого цвета первый с шириной 200px и длиной 500px.

Правостороннее/левостороннее выравнивание блоков можно задать при помощи стилей: .leftimg { float:left; margin: 5px 15px 7px 0; } .rightimg { float: right; margin: 7px 0 7px 7px; }

С помощью тега можно организовать поочередную смену картинок. div#rotator {position:relative; height:150px; margin-left: 15px;} div#rotator ul li {float:left; position:absolute; list-style: none;} div#rotator ul li.show {z-index:500;} function theRotator() { $('div#rotator ul li').css({opacity: 0.0}); $('div#rotator ul li:first').css({opacity: 1.0}); setInterval('rotate()',5000); } function rotate() { var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first')); var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first')); // var sibs = current.siblings(); // var rndNum = Math.floor(Math.random() * sibs.length ); // var next = $( sibs[ rndNum ] ); next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); current.animate({opacity: 0.0}, 1000) .removeClass('show'); }; $(document).ready(function() { theRotator(); });

Оцените статью!