Značka sa aktívne používa vo webdizajne na vytváranie blokov na html stránkach, do ktorých môžete vkladať obsah ľubovoľného charakteru - text, obrázky, tabuľky atď.
Inštrukcie
Krok 1
Ak sa používa, vyžaduje sa koncová značka. Môže byť použitý s nasledujúcimi atribútmi:
- align - zarovnanie (doľava, stred, doprava, zarovnanie), napríklad Text;
- trieda - názov triedy (text);
- id - názov identifikátora html tagu;
- štýl - smer štýlu;
- nadpis - popis.
Krok 2
Pri použití blokov je vhodné použiť šablónu štýlov. Napríklad ak chcete vytvoriť dva rôzne bloky s obsahom na stránke, potom bude kód vyzerať asi takto:
.blok1 {
šírka: 500px;
výška: 200px;
pozadie: žltá;
výplň: 0px;
výplň vpravo: 0px;
orámovanie: plná 0px čierna;
plavák: vľavo;
}
.block2 {
šírka: 200px;
výška: 500;
pozadie: zelená;
výplň: 0px;
výplň vpravo: 0px;
orámovanie: plná 0px čierna;
plavák: vpravo;
}
Žltý blok je prvý so šírkou 500 pixelov a dĺžkou 200 pixelov.
Zelený blok je prvý so šírkou 200 pixelov a dĺžkou 500 pixlov.
Krok 3
Zarovnanie blokov z pravej / ľavej strany je možné nastaviť pomocou štýlov:
.leftimg {
plavák: vľavo;
okraj: 5px 15px 7px 0;
}
.rightimg {
plavák: vpravo;
okraj: 7px 0 7px 7px;
}
Krok 4
Pomocou značky môžete usporiadať striedavú zmenu obrázkov.
div # rotator {poloha: relatívna; výška: 150px; okraj vľavo: 15 pixelov;}
div # rotator ul li {float: left; pozícia: absolútna; štýl zoznamu: žiadny;}
div # rotator ul li.show {z-index: 500;}
funkcia theRotator () {
$ ('div # rotator ul li'). css ({nepriehľadnosť: 0,0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('rotate ()', 5 000);
}
funkcia otocit () {
var current = ($ ('div # rotátor ul li.show')? $ ('div # rotátor ul li.show'): $ ('div # rotátor ul li: prvý'));
var next = ((current.next (). dĺžka)? ((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 ({nepriehľadnosť: 0,0})
.addClass ('zobraziť')
.animate ({nepriehľadnosť: 1,0}, 1000);
current.animate ({opacita: 0,0}, 1 000)
.removeClass ('show');
};
$ (document).ready (function () {
theRotator ();
});
