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, tabele itd.
Instrukcije
Korak 1
Kada se koristi, potrebna je završna oznaka. Može se koristiti sa sljedećim atributima:
- poravnanje - poravnanje (lijevo, središte, desno, poravnaj), na primjer, Tekst;
- klasa - naziv klase (Tekst);
- id - ime identifikatora html oznake;
- stil - stilski pravac;
- naslov - opis.
Korak 2
Kada koristite blokove, poželjno 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-desno: 0px;
obrub: čvrst 0px crni;
plutajuće: lijevo;
}
.block2 {
širina: 200px;
visina: 500;
pozadina: zelena;
popunjavanje: 0px;
popunjavanje-desno: 0px;
obrub: čvrst 0px crni;
plutajuće: desno;
}
Žuti blok je prvi širine 500px i dužine 200px.
Zeleni blok je prvi širine 200px i dužine 500px.
Korak 3
Poravnanje blokova s desne / lijeve strane može se postaviti pomoću stilova:
.leftimg {
plutajuće: lijevo;
marža: 5px 15px 7px 0;
}
.rightimg {
plutajuće: desno;
marža: 7px 0 7px 7px;
}
Korak 4
Uz pomoć oznake možete organizirati izmjeničnu promjenu slika.
div # rotator {pozicija: relativna; visina: 150px; margina-lijevo: 15px;}
div # rotator ul li {float: lijevo; pozicija: apsolutna; stil liste: none;}
div # rotator ul li.show {z-indeks: 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: show'));
var next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotator ul li: prvi'));
// 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 (funkcija () {
theRotator ();
});
