Tagu aktīvi izmanto tīmekļa dizainā, lai izveidotu blokus html lapās, kuru iekšpusē jūs varat ievietot jebkura veida saturu - tekstu, attēlus, tabulas utt.
Instrukcijas
1. solis
Ja to lieto, ir nepieciešams beigu tags. To var izmantot ar šādiem atribūtiem:
- izlīdzināt - izlīdzināt (pa kreisi, pa vidu, pa labi, pamatot), piemēram, Teksts;
- klase - klases nosaukums (Teksts);
- id - HTML tagu identifikatora nosaukums;
- stils - stila virziens;
- nosaukums - rīka padoms.
2. solis
Izmantojot blokus, ieteicams izmantot stila lapu. Piemēram, ja vēlaties izveidot divus dažādus blokus ar saturu lapā, kods izskatās apmēram šādi:
.block1 {
platums: 500 pikseļi;
augstums: 200 pikseļi;
fons: dzeltens;
polsterējums: 0px;
polsterējums pa labi: 0px;
apmale: cieta 0px melna;
pludiņš: pa kreisi;
}
.block2 {
platums: 200px;
augstums: 500;
fons: Zaļš;
polsterējums: 0px;
polsterējums pa labi: 0px;
apmale: cieta 0px melna;
pludiņš: pa labi;
}
Dzeltenais bloks ir pirmais, kura platums ir 500 pikseļi un garums 200 pikseļu.
Zaļais bloks ir pirmais, kura platums ir 200 pikseļi un garums 500 pikseļu.
3. solis
Bloku labās / kreisās puses izlīdzināšanu var iestatīt, izmantojot stilus:
.leftimg {
pludiņš: pa kreisi;
piemale: 5px 15px 7px 0;
}
.rimimg {
pludiņš: pa labi;
piemale: 7px 0 7px 7px;
}
4. solis
Izmantojot tagu, jūs varat organizēt pārmaiņus attēlu maiņu.
div # rotator {pozīcija: relatīvais; augstums: 150 pikseļi; kreisajā malā: 15 pikseļi;}
div # rotator ul li {pludiņš: pa kreisi; pozīcija: absolūta; saraksta stils: nav;}
div # rotator ul li.show {z-indekss: 500;}
funkcija theRotator () {
$ ('div # rotator ul li'). css ({necaurredzamība: 0,0});
$ ('div # rotator ul li: first'). css ({necaurredzamība: 1.0});
setInterval ('pagriezt ()', 5000);
}
funkcija rotēt () {
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 ('rādīt'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotator ul li: pirmais'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (sibs [rndNum]);
next.css ({necaurredzamība: 0.0})
.addClass ('rādīt')
.dzīvnieks ({necaurredzamība: 1,0}, 1000);
current.animate ({necaurredzamība: 0.0}, 1000)
.removeClass ('šovs');
};
$ (dokuments).ready (funkcija () {
theRotator ();
});
