Tagget bruges aktivt i webdesign til at skabe blokke på html-sider, hvori du kan placere indhold af enhver art - tekst, billeder, tabeller osv.
Instruktioner
Trin 1
Når det bruges, kræves et slutkode. Det kan bruges med følgende attributter:
- juster - justering (venstre, center, højre, retfærdiggør), for eksempel Tekst;
- klasse - klasse navn (tekst);
- id - navnet på html-tag-id'en
- stil - stil retning;
- titel - værktøjstip.
Trin 2
Når du bruger blokke, anbefales det at bruge et stilark. For eksempel, hvis du vil oprette to forskellige blokke med indhold på en side, vil koden se sådan ud:
.block1 {
bredde: 500 px;
højde: 200px;
baggrund: gul;
polstring: 0px;
polstring-højre: 0px;
kant: solid 0px sort;
flyde: venstre;
}
.block2 {
bredde: 200 px;
højde: 500;
baggrund: Grøn;
polstring: 0px;
polstring til højre: 0px;
kant: solid 0px sort;
flyde: højre;
}
Den gule blok er den første med en bredde på 500 px og en længde på 200 px.
Den grønne blok er den første med en bredde på 200 pixel og en længde på 500 pixel.
Trin 3
Højre- / venstrejustering af blokke kan indstilles ved hjælp af stilarter:
.leftimg {
flyde: venstre;
margen: 5px 15px 7px 0;
}
.rightimg {
flyde: højre;
margen: 7px 0 7px 7px;
}
Trin 4
Ved hjælp af tagget kan du organisere den skiftende skift af billeder.
div # rotator {position: relative; højde: 150px; margen til venstre: 15px;}
div # rotator ul li {float: left; position: absolut; liste-stil: ingen;}
div # rotator ul li.show {z-index: 500;}
funktion theRotator () {
$ ('div # rotator ul li'). css ({opacitet: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('roter ()', 5000);
}
funktion roter () {
var nuværende = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var next = ((current.next (). længde)? ((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 næste = $ (sibs [rndNum]);
next.css ({opacitet: 0.0})
.addClass ('show')
.animate ({opacitet: 1.0}, 1000);
current.animate ({opacitet: 0.0}, 1000)
.removeClass ('show');
};
$ (dokument). klar (funktion () {
rotatoren ();
});
