Žyma aktyviai naudojama kuriant tinklalapius kuriant blokus HTML puslapiuose, į kuriuos galite įdėti bet kokio pobūdžio turinį - tekstą, paveikslėlius, lenteles ir kt.
Nurodymai
1 žingsnis
Kai naudojama, reikalinga pabaigos žyma. Jį galima naudoti su šiais atributais:
- lygiuoti - sulygiuoti (kairėje, centre, dešinėje, pagrįsti), pavyzdžiui, Tekstas;
- klasė - klasės pavadinimas (Tekstas);
- id - HTML žymos identifikatoriaus pavadinimas;
- stilius - stiliaus kryptis;
- pavadinimas - patarimas.
2 žingsnis
Naudojant blokus, patartina naudoti stiliaus lapą. Pvz., Jei norite sukurti du skirtingus blokus su turiniu puslapyje, kodas atrodys maždaug taip:
.block1 {
plotis: 500 taškų;
aukštis: 200 taškų;
fonas: geltonas;
užpildymas: 0px;
padding-right: 0px;
kraštinė: vientisa 0 taškų juoda;
plūdė: kairė;
}
.block2 {
plotis: 200 taškų;
aukštis: 500;
fonas: Žalia;
užpildymas: 0px;
padding-right: 0px;
kraštinė: vientisa 0 taškų juoda;
plūdė: dešinė;
}
Geltonasis blokas yra pirmasis, kurio plotis yra 500 taškų ir ilgis 200 taškų.
Žalias blokas yra pirmasis, kurio plotis yra 200 taškų ir ilgis 500 taškų.
3 žingsnis
Dešinės / kairės pusės blokų išlyginimą galima nustatyti naudojant stilius:
.leftimg {
plūdė: kairė;
paraštė: 5px 15px 7px 0;
}
.rimimg {
plūdė: dešinė;
paraštė: 7px0 7px 7px;
}
4 žingsnis
Žymos pagalba galite organizuoti kintamą paveikslėlių keitimą.
div # rotator {padėtis: santykinis; aukštis: 150 taškų; paraštė kairėje: 15 taškų;}
div # rotator ul li {plūdė: kairė; pozicija: absoliuti; sąrašo stilius: nėra;}
div # rotator ul li.show {z indeksas: 500;}
funkcija theRotator () {
$ ('div # rotator ul li'). css ({neskaidrumas: 0,0});
$ ('div # rotator ul li: first'). css ({neskaidrumas: 1.0});
setInterval ('pasukti ()', 5000);
}
funkcija pasukti () {
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'): dabartinis.kitas () $ ('div # rotator ul li: pirmas'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var kitas = $ (sibs [rndNum]);
next.css ({neskaidrumas: 0.0})
.addClass („šou“)
.gyvas ({neskaidrumas: 1,0}, 1000);
current.animate ({neskaidrumas: 0.0}, 1000)
.removeClass ('šou');
};
$ (dokumentas).ready (funkcija () {
theRotator ();
});
