Značka se aktivně používá ve webovém designu k vytváření bloků na html stránkách, do kterých můžete vkládat obsah jakékoli povahy - text, obrázky, tabulky atd.
Instrukce
Krok 1
Při použití je vyžadována koncová značka. Lze jej použít s následujícími atributy:
- align - zarovnání (vlevo, na střed, vpravo, zarovnat), například Text;
- třída - název třídy (text);
- id - název identifikátoru html tagu;
- styl - směr stylu;
- název - popis.
Krok 2
Při použití bloků je vhodné použít šablonu stylů. Například pokud chcete vytvořit dva různé bloky s obsahem na stránce, bude kód vypadat asi takto:
.block1 {
šířka: 500px;
výška: 200px;
pozadí: žlutá;
výplň: 0px;
výplň vpravo: 0px;
ohraničení: plná 0px černá;
plavat vlevo;
}
.block2 {
šířka: 200px;
výška: 500;
pozadí: zelená;
výplň: 0px;
výplň vpravo: 0px;
ohraničení: plná 0px černá;
float: správně;
}
Žlutý blok je první se šířkou 500px a délkou 200px.
Zelený blok je první se šířkou 200px a délkou 500px.
Krok 3
Zarovnání bloků z pravé / levé strany lze nastavit pomocí stylů:
.leftimg {
plavat vlevo;
okraj: 5px 15px 7px 0;
}
.rightimg {
float: správně;
okraj: 7px 0 7px 7px;
}
Krok 4
Pomocí značky můžete uspořádat střídavou změnu obrázků.
div # rotátor {poloha: relativní; výška: 150px; levý okraj: 15px;}
div # rotátor ul li {float: vlevo; pozice: absolutní; styl seznamu: žádný;}
div # rotátor ul li.show {z-index: 500;}
funkce theRotator () {
$ ('div # rotator ul li'). css ({opacity: 0,0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('rotate ()', 5000);
}
funkce otočit () {
var current = ($ ('div # rotátor ul li.show')? $ ('div # rotátor ul li.show'): $ ('div # rotátor ul li: první'));
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 ('zobrazit')
.animate ({opacity: 1.0}, 1000);
current.animate ({opacita: 0,0}, 1000)
.removeClass ('show');
};
$ (document).ready (function () {
theRotator ();
});
