Etiketa përdoret në mënyrë aktive në krijimin e faqeve në internet për të krijuar blloqe në faqet html, brenda të cilave mund të vendosni përmbajtje të çfarëdo natyre - tekst, fotografi, tabela, etj.
Udhëzimet
Hapi 1
Kur përdoret, kërkohet një etiketë fundore. Mund të përdoret me atributet e mëposhtme:
- përafrimi - rreshtimi (majtas, qendër, djathtas, justifikoj), për shembull, Teksti;
- klasa - emri i klasës (Teksti);
- id - emri i identifikuesit të etiketës html;
- stili - drejtimi i stilit;
- titulli - udhëzimi i mjetit.
Hapi 2
Kur përdorni blloqe, këshillohet të përdorni një fletë stili. Për shembull, nëse doni të krijoni dy blloqe të ndryshme me përmbajtje në një faqe, atëherë kodi do të duket diçka si kjo:
.blloku1 {
gjerësia: 500px;
lartësia: 200px;
sfondi: E verdha;
mbushje: 0px;
mbushja djathtas: 0px;
bordura: e zezë e ngurtë 0px;
noton: majtas;
}
.blloku2 {
gjerësia: 200px;
lartësia: 500;
sfondi: jeshile;
mbushje: 0px;
mbushja djathtas: 0px;
bordura: e zezë e ngurtë 0px;
noton: djathtas;
}
Blloku i verdhë është i pari me gjerësi 500px dhe gjatësi 200px.
Blloku i gjelbër është i pari me një gjerësi 200px dhe një gjatësi 500px.
Hapi 3
Rreshtimi i blloqeve në të djathtë / në të majtë mund të vendoset duke përdorur stilet:
.leftimg {
noton: majtas;
diferencë: 5px 15px 7px 0;
}
.rightimg {
noton: djathtas;
diferencë: 7px 0 7px 7px;
}
Hapi 4
Me ndihmën e etiketës, ju mund të organizoni ndryshimin e alternuar të fotove.
div # rotator {pozicioni: relativ; lartësia: 150px; diferencë-majtas: 15px;}
div # rrotullues ul li {noton: majtas; pozicioni: absolut; stili i listës: asnjë;}
div # rrotullues ul li.show {z-index: 500;}
funksioni theRotator () {
$ ('div # rotator ul li'). css ({perde: 0,0});
$ ('div # rotator ul li: i parë'). css ({perde: 1.0});
setInterval ('rrotullo ()', 5000);
}
funksioni rotate () {
var aktual = ($ ('div # rrotullues ul li.show')? $ ('div # rrotullues ul li.show'): $ ('div # rotator ul li: i pari'));
var tjetër = ((aktual.next (). gjatësi)? ((aktual.next (). hasClass ('shfaqje'))? $ ('div # rrotullues ul li: i pari'): aktual. tjetër ()): $ ('div # rrotullues ul li: së pari'));
// var sibs = aktuale.sillings ();
// var rndNum = Matematika e dyshemesë (Matematika.random () * sibs.gjatësia);
// var tjetër = $ (sibs [rndNum]);
next.css ({errësira: 0,0})
.addClass ('shfaqje')
.animate ({errësira: 1.0}, 1000);
aktual. i gjallë ({errësira: 0,0}, 1000)
.mbaniClass ('shfaqje');
};
$ (dokumenti). gati (funksioni () {
theRotator ();
});
