Märgist kasutatakse veebidisainis aktiivselt HTML-lehtedel plokkide loomiseks, mille sisse saab panna mis tahes laadi sisu - teksti, pilte, tabeleid jne.
Juhised
Samm 1
Kasutamisel on vajalik lõppmärgis. Seda saab kasutada järgmiste atribuutidega:
- joondamine - joondamine (vasakul, keskel, paremal, põhjendus), näiteks Tekst;
- klass - klassi nimi (tekst);
- id - HTML-märgendi identifikaatori nimi;
- stiil - stiili suund;
- pealkiri - tööriistavihje.
2. samm
Klotside kasutamisel on soovitatav kasutada stiililehte. Näiteks kui soovite lehel luua kaks erinevat sisu sisaldavat plokki, näeb kood välja umbes selline:
.block1 {
laius: 500px;
kõrgus: 200px;
taust: kollane;
polster: 0px;
polster paremal: 0px;
ääris: tahke 0px must;
ujuk: vasak;
}
.block2 {
laius: 200px;
kõrgus: 500;
taust: roheline;
polster: 0px;
polster paremal: 0px;
ääris: tahke 0px must;
ujuk: paremal;
}
Kollane plokk on esimene, mille laius on 500 pikslit ja pikkus 200 pikslit.
Roheline plokk on esimene laiusega 200 pikslit ja pikkusega 500 pikslit.
3. samm
Parempoolse / vasakpoolse plokkide joonduse saab määrata stiilide abil:
.leftimg {
ujuk: vasak;
veeris: 5px 15px 7px 0;
}
.rimimg {
ujuk: paremal;
veeris: 7px0 7px 7px;
}
4. samm
Sildi abil saate korraldada piltide vahelduva vahetamise.
div # rotator {asend: suhteline; kõrgus: 150px; veeris vasakul: 15 pikslit;}
div # rotator ul li {ujuk: vasak; positsioon: absoluutne; list-style: puudub;}
div # rotator ul li.show {z-indeks: 500;}
funktsiooni theRotator () {
$ ('div # rotator ul li'). css ({läbipaistmatus: 0.0});
$ ('div # rotator ul li: first'). css ({läbipaistmatus: 1.0});
setInterval ('pöörata ()', 5000);
}
funktsioon 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 ('näita'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotator ul li: esimene'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var järgmine = $ (sibs [rndNum]);
next.css ({läbipaistmatus: 0.0})
.addClass ('show')
.animaalne ({läbipaistmatus: 1,0}, 1000);
current.animate ({läbipaistmatus: 0.0}, 1000)
.removeClass ('show');
};
$ (dokument).ready (funktsioon () {
theRotator ();
});
