Taggen används aktivt i webbdesign för att skapa block på html-sidor, där du kan placera innehåll av alla slag - text, bilder, tabeller etc.
Instruktioner
Steg 1
Vid användning krävs en slutkod. Den kan användas med följande attribut:
- justera - justering (vänster, mitt, höger, motivera), till exempel Text;
- klass - klassnamn (text);
- id - namnet på html-taggidentifieraren;
- stil - stilriktning;
- titel - verktygstips.
Steg 2
När du använder block rekommenderas det att använda ett stilark. Om du till exempel vill skapa två olika block med innehåll på en sida kommer koden att se ut så här:
.block1 {
bredd: 500px;
höjd: 200px;
bakgrund: gul;
stoppning: 0px;
padding-right: 0px;
kant: solid 0px svart;
flyta till vänster;
}
.block2 {
bredd: 200px;
höjd: 500;
bakgrund: grön;
stoppning: 0px;
padding-right: 0px;
kant: solid 0px svart;
flyta: höger;
}
Det gula blocket är det första med en bredd på 500 pixlar och en längd på 200 pixlar.
Det gröna blocket är det första med en bredd på 200 pixlar och en längd på 500 pixlar.
Steg 3
Höger- / vänsterinriktning av block kan ställas in med hjälp av stilar:
. vänster {
flyta till vänster;
marginal: 5px 15px 7px 0;
}
.rightimg {
flyta: höger;
marginal: 7px 0 7px 7px;
}
Steg 4
Med hjälp av taggen kan du organisera den växlande växlingen av bilder.
div # rotator {position: relativ; höjd: 150px; marginal till vänster: 15 pixlar;}
div # rotator ul li {float: left; position: absolut; liststil: ingen;}
div # rotator ul li.show {z-index: 500;}
funktion theRotator () {
$ ('div # rotator ul li'). css ({opacitet: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('rotera ()', 5000);
}
funktion rotera () {
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 nästa = $ (sibs [rndNum]);
next.css ({opacity: 0.0})
.addClass ('visa')
.animate ({opacitet: 1.0}, 1000);
current.animate ({opacitet: 0.0}, 1000)
.removeClass ('show');
};
$ (dokument). klar (funktion () {
rotatorn ();
});
