Die etiket word aktief gebruik in webontwerp om blokke op html-bladsye te skep, waarin u inhoud van enige aard kan plaas - teks, prente, tabelle, ens.
Instruksies
Stap 1
Wanneer dit gebruik word, is 'n eindmerk nodig. Dit kan met die volgende eienskappe gebruik word:
- belyning - belyning (links, middel, regs, regverdig), byvoorbeeld teks;
- klas - klasnaam (teks);
- id - die naam van die html-tag-identifiseerder;
- styl-styl rigting;
- titel - gereedskapstip.
Stap 2
Dit is raadsaam om 'n stylblad te gebruik wanneer u blokke gebruik. As u byvoorbeeld twee verskillende blokke met inhoud op 'n bladsy wil skep, sal die kode so lyk:
.blok1 {
breedte: 500px;
hoogte: 200px;
agtergrond: geel;
opvulling: 0px;
padding-regs: 0px;
rand: soliede 0px swart;
dryf: links;
}
.blok2 {
breedte: 200px;
hoogte: 500;
agtergrond: Groen;
opvulling: 0px;
padding-regs: 0px;
rand: soliede 0px swart;
dryf: regs;
}
Die geel blok is die eerste een met 'n breedte van 500 px en 'n lengte van 200 px.
Die groen blok is die eerste een met 'n breedte van 200 px en 'n lengte van 500 px.
Stap 3
Regter- / linkerkantbelyning van blokke kan volgens style ingestel word:
.leftimg {
dryf: links;
marge: 5px 15px 7px 0;
}
.rightimg {
dryf: regs;
marge: 7px 0 7px 7px;
}
Stap 4
Met behulp van die etiket kan u die wisselende verandering van foto's organiseer.
div # rotator {posisie: relatief; hoogte: 150px; marge-links: 15 px;}
div # rotator ul li {float: links; posisie: absoluut; lysstyl: geen;}
div # rotator ul li.show {z-index: 500;}
funksioneer theRotator () {
$ ('div # rotator ul li'). css ({opacity: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('draai ()', 5000);
}
funksie draai () {
var huidige = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: eerste'));
var volgende = ((huidige.volgende (). lengte)? ((huidige.volgende (). hasClass ('toon'))? $ ('div # rotator ul li: eerste'): huidige.volgende ()): $ ('div # rotator ul li: eerste'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var volgende = $ (sibs [rndNum]);
next.css ({ondeursigtigheid: 0.0})
.addClass ('show')
.animate ({ondeursigtigheid: 1.0}, 1000);
current.animate ({dekking: 0.0}, 1000)
.removeClass ('show');
};
$ (document).ready (funksie () {
theRotator ();
});
