The tag is actively used in web design to create blocks on html pages, inside which you can put content of any nature - text, pictures, tables, etc.
Instructions
Step 1
When used, an end tag is required. It can be used with the following attributes:
- align - alignment (left, center, right, justify), for example, Text;
- class - class name (Text);
- id - the name of the html tag identifier;
- style - style direction;
- title - tooltip.
Step 2
When using blocks, it is advisable to use a style sheet. For example, if you want to create two different blocks with content on a page, then the code will look something like this:
.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;
}
The yellow block is the first one with a width of 500px and a length of 200px.
The green block is the first one with a width of 200px and a length of 500px.
Step 3
Right-side / left-side block alignment can be set using styles:
.leftimg {
float: left;
margin: 5px 15px 7px 0;
}
.rightimg {
float: right;
margin: 7px 0 7px 7px;
}
Step 4
With the help of the tag, you can organize the alternation of pictures.
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 ();
});
