Lebo hutumiwa kikamilifu katika muundo wa wavuti kuunda vizuizi kwenye kurasa za html, ndani ambayo unaweza kuweka yaliyomo ya asili yoyote - maandishi, picha, meza, nk.
Maagizo
Hatua ya 1
Wakati unatumiwa, lebo ya mwisho inahitajika. Inaweza kutumika na sifa zifuatazo:
align - alignment (kushoto, katikati, kulia, kuhalalisha), kwa mfano, Nakala;
- jina la darasa - darasa (Nakala);
- id - jina la kitambulisho cha html;
- mwelekeo - mwelekeo wa mtindo;
- kichwa - vidokezo.
Hatua ya 2
Wakati wa kutumia vizuizi, inashauriwa kutumia karatasi ya mtindo. Kwa mfano, ikiwa unataka kuunda vizuizi viwili tofauti na yaliyomo kwenye ukurasa, basi nambari itaonekana kama hii:
.zuia1 {
upana: 500px;
urefu: 200px;
historia: Njano;
padding: 0px;
padding-kulia: 0px;
mpaka: imara 0px nyeusi;
kuelea: kushoto;
}
.zuia2 {
upana: 200px;
urefu: 500;
msingi: Kijani;
padding: 0px;
padding-kulia: 0px;
mpaka: imara 0px nyeusi;
kuelea: kulia;
}
Kizuizi cha manjano ni cha kwanza na upana wa 500px na urefu wa 200px.
Kizuizi kijani ni cha kwanza na upana wa 200px na urefu wa 500px.
Hatua ya 3
Mpangilio wa upande wa kulia / kushoto wa vitalu unaweza kuweka kwa kutumia mitindo
kushotoftg {
kuelea: kushoto;
margin: 5px 15px 7px 0;
}
. hakiimg {
kuelea: kulia;
margin: 7px 0 7px 7px;
}
Hatua ya 4
Kwa msaada wa lebo, unaweza kupanga mabadiliko ya picha.
div # rotator {nafasi: jamaa; urefu: 150px; pambizo-kushoto: 15px;}
div # rotator ul li {kuelea: kushoto; msimamo: kabisa; mtindo wa orodha: hakuna;}
div # rotator ul li. onyesha {z-index: 500;}
fanya kaziRotator () {
$ ('div # rotator ul li'). css ({opacity: 0.0});
$ ('div # rotator ul li: kwanza'). css ({opacity: 1.0});
setInterval ('zungusha ()', 5000);
}
kazi zungusha () {
$ ya sasa = ($ ('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: kwanza'): current.next ()): $ ('div # rotator ul li: kwanza'));
// var sibs = sasa.ndugu ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var ijayo = $ (sibs [rndNum]);
next.css ({opacity: 0.0})
.ddClass ('onyesha')
uhai ({opacity: 1.0}, 1000);
sasa.animate ({opacity: 0.0}, 1000)
OndoaClass ('onyesha');
};
$ (hati) tayari (kazi () {
Rotator ();
});
