Инструкция
1
При использовании <div> закрывающий тег </div> обязателен. Его можно использовать со следующими атрибутами:
- align – выравнивание (left, center, right, justify), например, <div align="center">Текст</div>;
- class – имя класса (<div class="1"> Текст</div>);
- id – имя идентификатора html-тега;
- style – направление стиля;
- title – всплывающая подсказка.
2
При использовании блоков целесообразно применять таблицу стилей. Например, если требуется на странице создать два разных блока с содержимым, то код будет выглядеть примерно следующим образом:
<html>
<title></title>
<head>
     <style>
           .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;
          }
     </style>
</head>
<body>
          <div id="block1">Блок желтого цвета первый с шириной 500px и длиной 200px.</div>
          <div class="block2"> Блок зеленого цвета первый с шириной 200px и длиной 500px.</div>
</body>
</html>
3
Правостороннее/левостороннее выравнивание блоков можно задать при помощи стилей:
<style type="text/css">
.leftimg {
float:left;
margin: 5px 15px 7px 0;
}
.rightimg {
float: right;
margin: 7px 0 7px 7px;
}
</style>
4
С помощью тега <div> можно организовать поочередную смену картинок.
<html>
<title></title>
<head>
<style type="text/css">
     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;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
           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();
           });
</script>
<head>
<body>
<div id="rotator">
      <ul>
            <li class="show"><img src="адрес картинки_1" width="500" height="313" alt="pic1" /></li>
            <li><img src="адрес картинки_2" width="500" height="313" alt="pic2" /></li>
            <li><img src="адрес картинки_3" width="500" height="313" alt="pic3" /></li>
      </ul>
</div>
</body>
</html>