Il tag viene utilizzato attivamente nel web design per creare blocchi su pagine html, all'interno delle quali è possibile inserire contenuti di qualsiasi natura: testo, immagini, tabelle, ecc.
Istruzioni
Passo 1
Quando viene utilizzato, è richiesto un tag di chiusura. Può essere utilizzato con i seguenti attributi:
- allinea - allineamento (sinistra, centro, destra, giustifica), ad esempio Testo;
- classe - nome della classe (Testo);
- id - il nome dell'identificatore del tag html;
- stile - direzione dello stile;
- titolo - descrizione comando.
Passo 2
Quando si utilizzano i blocchi, è consigliabile utilizzare un foglio di stile. Ad esempio, se desideri creare due blocchi diversi con contenuto su una pagina, il codice sarà simile a questo:
.blocco1 {
larghezza: 500 px;
altezza: 200px;
sfondo: giallo;
imbottitura: 0px;
padding-right: 0px;
bordo: nero solido 0px;
galleggiante: sinistro;
}
.blocco2 {
larghezza: 200px;
altezza: 500;
sfondo: verde;
imbottitura: 0px;
padding-right: 0px;
bordo: nero solido 0px;
galleggiante: a destra;
}
Il blocco giallo è il primo con una larghezza di 500 px e una lunghezza di 200 px.
Il blocco verde è il primo con una larghezza di 200 px e una lunghezza di 500 px.
Passaggio 3
L'allineamento lato destro/sinistro dei blocchi può essere impostato utilizzando gli stili:
.leftimg {
galleggiante: sinistro;
margine: 5px 15px 7px 0;
}
.rightimg {
galleggiante: a destra;
margine: 7px 0 7px 7px;
}
Passaggio 4
Con l'aiuto del tag, puoi organizzare il cambio alternato delle immagini.
div # rotatore {posizione: relativa; altezza: 150px; margine sinistro: 15px;}
div # rotator ul li {float: left; posizione: assoluta; stile elenco: nessuno;}
div # rotator ul li.show {z-index: 500;}
funzione theRotator() {
$ ('div # rotator ul li'). css ({opacità: 0.0});
$ ('div # rotator ul li: first') css ({opacità: 1.0});
setInterval ('ruota ()', 5000);
}
funzione ruotare () {
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 successivo = $ (sibs [rndNum]);
next.css ({opacità: 0.0})
.addClass ("mostra")
.animato ({opacità: 1.0}, 1000);
current.animate ({opacità: 0.0}, 1000)
.removeClass ('mostra');
};
$ (documento).ready (funzione () {
theRotator ();
});
