Oznaka se aktivno koristi u web dizajnu za stvaranje blokova na html stranicama, unutar kojih možete staviti sadržaj bilo koje prirode - tekst, slike, tablice itd.
Upute
Korak 1
Kad se koristi, potrebna je završna oznaka. Može se koristiti sa sljedećim atributima:
- align - poravnanje (lijevo, središte, desno, poravnaj), na primjer, Text;
- klasa - naziv klase (Tekst);
- id - naziv identifikatora html oznake;
- stil - stilski smjer;
- naslov - opis.
Korak 2
Kada koristite blokove, preporučljivo je koristiti tablicu stilova. Na primjer, ako želite stvoriti dva različita bloka sa sadržajem na stranici, tada će kôd izgledati otprilike ovako:
.block1 {
širina: 500px;
visina: 200px;
pozadina: žuta;
popunjavanje: 0px;
popunjavanje udesno: 0 piksela;
obrub: čvrst 0px crni;
plutaju: lijevo;
}
.block2 {
širina: 200px;
visina: 500;
pozadina: zelena;
popunjavanje: 0px;
popunjavanje udesno: 0 piksela;
obrub: čvrst 0px crni;
plutati: desno;
}
Žuti blok prvi je širine 500 px i duljine 200 px.
Zeleni blok prvi je širine 200px i duljine 500px.
3. korak
Poravnanje blokova s desne / lijeve strane može se postaviti pomoću stilova:
.leftimg {
plutaju: lijevo;
marža: 5px 15px 7px 0;
}
.rightimg {
plutati: desno;
marža: 7px 0 7px 7px;
}
4. korak
Uz pomoć oznake možete organizirati izmjeničnu promjenu slika.
div # rotator {položaj: relativan; visina: 150px; margina-lijevo: 15 piksela;}
div # rotator ul li {float: lijevo; položaj: apsolutni; stil popisa: none;}
div # rotator ul li.show {z-index: 500;}
funkcija theRotator () {
$ ('div # rotator ul li'). css ({neprozirnost: 0,0});
$ ('div # rotator ul li: first'). css ({neprozirnost: 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 sljedeći = $ (sibs [rndNum]);
next.css ({neprozirnost: 0,0})
.addClass ('show')
.animate ({neprozirnost: 1,0}, 1000);
current.animate ({neprozirnost: 0,0}, 1000)
.removeClass ('show');
};
$ (dokument).ready (function () {
theRotator ();
});
