A címkét a webtervezés során aktívan használják blokkok létrehozására a html oldalakon, amelyekbe bármilyen jellegű tartalmat - szöveget, képeket, táblázatokat stb.
Utasítás
1. lépés
Használatakor végcímke szükséges. A következő attribútumokkal használható:
- igazítás - igazítás (balra, középre, jobbra, igazolás), például Szöveg;
- osztály - osztály neve (szöveg);
- id - a html tag azonosító neve;
- stílus - stílus iránya;
- cím - eszköztipp.
2. lépés
A blokkok használatakor tanácsos egy stíluslapot használni. Például, ha két különböző blokkot szeretne létrehozni tartalommal egy oldalon, akkor a kód körülbelül így fog kinézni:
.block1 {
szélesség: 500px;
magasság: 200px;
háttér: sárga;
párnázás: 0px;
padding-right: 0px;
szegély: szilárd 0px fekete;
balra lebeg;
}
.block2 {
szélesség: 200px;
magasság: 500;
háttér: Zöld;
párnázás: 0px;
padding-right: 0px;
szegély: szilárd 0px fekete;
úszó: jobbra;
}
A sárga blokk az első, amelynek szélessége 500 képpont és hossza 200 képpont.
A zöld blokk az első, amelynek szélessége 200 képpont és hossza 500 képpont.
3. lépés
A blokkok jobb oldali / bal oldali igazítása stílusokkal állítható be:
.leftimg {
balra lebeg;
margó: 5px 15px 7px 0;
}
.rimimg {
úszó: jobbra;
margó: 7px0 7px 7px;
}
4. lépés
A címke segítségével megszervezheti a képek váltakozó váltakozását.
div # rotator {pozíció: relatív; magasság: 150px; bal margó: 15 képpont;}
div # rotator ul li {float: balra; pozíció: abszolút; list-style: nincs;}
div # rotator ul li.show {z-index: 500;}
függvény theRotator () {
$ ('div # rotator ul li'). css ({átlátszatlanság: 0.0});
$ ('div # rotator ul li: first'). css ({átlátszatlanság: 1.0});
setInterval ('rotate ()', 5000);
}
függvény 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: első'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (sibs [rndNum]);
next.css ({átlátszatlanság: 0.0})
.addClass ('show')
.anim ({átlátszatlanság: 1,0}, 1000);
current.animate ({fedettség: 0.0}, 1000)
.removeClass ('show');
};
$ (dokumentum).ready (függvény () {
theRotator ();
});
