Taggen brukes aktivt i webdesign for å lage blokker på html-sider, der du kan plassere innhold av hvilken som helst art - tekst, bilder, tabeller osv.
Bruksanvisning
Trinn 1
Når det brukes, kreves det en sluttkode. Den kan brukes med følgende attributter:
- juster - justering (venstre, midt, høyre, rettferdiggjøre), for eksempel tekst;
- klasse - klasse navn (tekst);
- id - navnet på HTML-koden identifikator;
- stil - stil retning;
- tittel - verktøytips.
Steg 2
Når du bruker blokker, anbefales det å bruke et stilark. Hvis du for eksempel vil opprette to forskjellige blokker med innhold på en side, vil koden se slik ut:
.block1 {
bredde: 500px;
høyde: 200px;
bakgrunn: gul;
polstring: 0px;
polstring-høyre: 0px;
kant: solid 0px svart;
flyte: venstre;
}
.block2 {
bredde: 200px;
høyde: 500;
bakgrunn: Grønn;
polstring: 0px;
polstring-høyre: 0px;
kant: solid 0px svart;
flyte: høyre;
}
Den gule blokken er den første med en bredde på 500 px og en lengde på 200 px.
Den grønne blokken er den første med en bredde på 200 px og en lengde på 500 px.
Trinn 3
Høyre- / venstrejustering av blokker kan stilles inn ved hjelp av stiler:
.leftimg {
flyte: venstre;
margin: 5px 15px 7px 0;
}
.rightimg {
flyte: høyre;
margin: 7px 0 7px 7px;
}
Trinn 4
Ved hjelp av taggen kan du organisere vekslende bilderendring.
div # rotator {posisjon: relativ; høyde: 150px; margin til venstre: 15px;}
div # rotator ul li {float: left; posisjon: absolutt; liste-stil: ingen;}
div # rotator ul li.show {z-index: 500;}
funksjon theRotator () {
$ ('div # rotator ul li'). css ({opacity: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('roter ()', 5000);
}
funksjon rotere () {
var gjeldende = ($ ('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 neste = $ (søsken [rndNum]);
next.css ({opacity: 0.0})
.addClass ('show')
.animate ({opacity: 1.0}, 1000);
current.animate ({opacity: 0.0}, 1000)
.removeClass ('show');
};
$ (dokument). klar (funksjon () {
rotatoren ();
});
