Oznaka se aktivno uporablja pri spletnem oblikovanju za ustvarjanje blokov na straneh html, v katere lahko vstavite vsebino katere koli narave - besedilo, slike, tabele itd.
Navodila
Korak 1
Ko se uporablja, je potrebna končna oznaka. Uporablja se lahko z naslednjimi atributi:
- poravnava - poravnava (levo, sredina, desno, poravnaj), na primer Besedilo;
- razred - ime predavanja (Besedilo);
- id - ime identifikatorja html oznake;
- slog - smer sloga;
- naslov - opis.
2. korak
Pri uporabi blokov je priporočljivo uporabiti tabelo s slogi. Če želite na primer na strani ustvariti dva različna bloka z vsebino, bo koda videti nekako tako:
.block1 {
širina: 500px;
višina: 200px;
ozadje: rumeno;
oblazinjenje: 0px;
oblazinjenje-desno: 0px;
obroba: trdna 0px črna;
plovec: levo;
}
.block2 {
širina: 200px;
višina: 500;
ozadje: zeleno;
oblazinjenje: 0px;
oblazinjenje desno: 0px;
obroba: trdna 0px črna;
plovec: desno;
}
Rumeni blok je prvi s širino 500 px in dolžino 200 px.
Zeleni blok je prvi s širino 200 px in dolžino 500 px.
3. korak
Desno / levo poravnavo blokov lahko nastavite s pomočjo slogov:
.leftimg {
plovec: levo;
marža: 5px 15px 7px 0;
}
.rightimg {
plovec: desno;
marža: 7px 0 7px 7px;
}
4. korak
S pomočjo oznake lahko organizirate izmenično spreminjanje slik.
div # rotator {položaj: relativno; višina: 150px; rob-levo: 15 slikovnih pik;}
div # rotator ul li {float: levo; položaj: absolutno; slog sloga: noben;}
div # rotator ul li.show {z-index: 500;}
funkcija theRotator () {
$ ('div # rotator ul li'). css ({motnost: 0,0});
$ ('div # rotator ul li: first'). css ({motnost: 1,0});
setInterval ('rotate ()', 5000);
}
funkcija 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 naslednji = $ (sibs [rndNum]);
next.css ({motnost: 0,0})
.addClass ('show')
.animate ({motnost: 1,0}, 1000);
current.animate ({motnost: 0,0}, 1000)
.removeClass ('show');
};
$ (dokument).ready (funkcija () {
theRotator ();
});
