L’etiqueta s’utilitza activament en el disseny de llocs web per crear blocs a pàgines html, dins dels quals podeu posar contingut de qualsevol naturalesa: text, imatges, taules, etc.
Instruccions
Pas 1
Quan s’utilitza, cal una etiqueta final. Es pot utilitzar amb els atributs següents:
- align - alignment (esquerra, centre, dreta, justificar), per exemple, Text;
- classe - nom de la classe (text);
- id - el nom de l'identificador d'etiqueta html;
- estil - direcció d’estil;
- title - tooltip.
Pas 2
Quan s'utilitzen blocs, és recomanable utilitzar un full d'estil. Per exemple, si voleu crear dos blocs diferents amb contingut en una pàgina, el codi tindrà un aspecte semblant a aquest:
.block1 {
amplada: 500 px;
alçada: 200 px;
fons: groc;
encoixinat: 0 px;
farcit-dreta: 0 px;
vora: negre 0px sòlid;
flotador: esquerra;
}
.block2 {
amplada: 200 px;
alçada: 500;
fons: Verd;
encoixinat: 0 px;
farcit-dreta: 0 px;
vora: negre 0px sòlid;
flotador: dret;
}
El bloc groc és el primer amb una amplada de 500 px i una longitud de 200 px.
El bloc verd és el primer amb una amplada de 200 px i una longitud de 500 px.
Pas 3
L'alineació de blocs de la dreta / esquerra es pot configurar utilitzant estils:
.leftimg {
flotador: esquerra;
marge: 5px 15px 7px 0;
}
.rightimg {
flotador: dret;
marge: 7px 0 7px 7px;
}
Pas 4
Amb l'ajuda de l'etiqueta, podeu organitzar el canvi alternatiu d'imatges.
div # rotator {posició: relativa; alçada: 150 px; marge-esquerra: 15 px;}
div # rotator ul li {float: left; posició: absoluta; estil de llista: cap;}
div # rotator ul li.show {z-index: 500;}
funció theRotator () {
$ ('div # rotator ul li'). css ({opacity: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('rotate ()', 5000);
}
funció 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 següent = $ (sibs [rndNum]);
next.css ({opacitat: 0,0})
.addClass ('mostra')
.animate ({opacitat: 1.0}, 1000);
current.animate ({opacitat: 0,0}, 1000)
.removeClass ('mostra');
};
$ (document). ready (function () {
theRotator ();
});
