Eticheta este utilizată activ în designul web pentru a crea blocuri pe pagini html, în interiorul cărora puteți pune conținut de orice natură - text, imagini, tabele etc.
Instrucțiuni
Pasul 1
Când este utilizat, este necesară o etichetă de finalizare. Poate fi folosit cu următoarele atribute:
- aliniați - aliniați (stânga, centru, dreapta, justificați), de exemplu, Text;
- clasa - numele clasei (Text);
- id - numele identificatorului etichetei html;
- stil - direcție stil;
- title - tooltip.
Pasul 2
Când utilizați blocuri, este recomandabil să utilizați o foaie de stil. De exemplu, dacă doriți să creați două blocuri diferite cu conținut pe o pagină, atunci codul va arăta cam așa:
.block1 {
lățime: 500 px;
înălțime: 200px;
fundal: Galben;
umplutură: 0 px;
padding-right: 0px;
chenar: negru solid 0px;
plutește la stânga;
}
.block2 {
lățime: 200px;
înălțime: 500;
fundal: verde;
umplutură: 0 px;
padding-right: 0px;
chenar: negru solid 0px;
plutitor: dreapta;
}
Blocul galben este primul cu o lățime de 500 px și o lungime de 200 px.
Blocul verde este primul cu o lățime de 200 px și o lungime de 500 px.
Pasul 3
Alinierea dreapta / stânga a blocurilor poate fi setată utilizând stiluri:
.leftimg {
plutește la stânga;
margine: 5px 15px 7px 0;
}
.rightimg {
plutitor: dreapta;
margine: 7px 0 7px 7px;
}
Pasul 4
Cu ajutorul etichetei, puteți organiza schimbarea alternativă a imaginilor.
div # rotator {poziție: relativă; înălțime: 150px; margine-stânga: 15 px;}
div # rotator ul li {float: left; poziție: absolută; list-style: none;}
div # rotator ul li.show {z-index: 500;}
function theRotator () {
$ ('div # rotator ul li'). css ({opacitate: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('rotate ()', 5000);
}
functie rotate () {
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 next = $ (sibs [rndNum]);
next.css ({opacitate: 0,0})
.addClass („arată”)
.animate ({opacitate: 1.0}, 1000);
current.animate ({opacitate: 0,0}, 1000)
.removeClass („arată”);
};
$ (document). ready (function () {
theRotator ();
});
