Tunnistetta käytetään aktiivisesti verkkosuunnittelussa luomaan lohkoja html-sivuille, joihin voit laittaa kaikenlaista sisältöä - tekstiä, kuvia, taulukoita jne.
Ohjeet
Vaihe 1
Käytettäessä lopputunniste vaaditaan. Sitä voidaan käyttää seuraavien määritteiden kanssa:
- tasaa - tasaus (vasemmalle, keskelle, oikealle, tasaa), esimerkiksi Teksti;
- luokka - luokan nimi (teksti);
- id - html-tunnistetunnuksen nimi;
- tyyli - tyylin suunta;
- otsikko - työkaluvinkki.
Vaihe 2
Lohkoja käytettäessä on suositeltavaa käyttää tyylitaulukkoa. Esimerkiksi, jos haluat luoda kaksi erilaista lohkoa, joiden sisältö on sivulla, koodi näyttää tältä:
.block1 {
leveys: 500px;
korkeus: 200px;
tausta: keltainen;
pehmuste: 0px;
täyte-oikea: 0px;
reunus: kiinteä 0 kuvapistettä musta;
kellua: vasen;
}
.block2 {
leveys: 200px;
korkeus: 500;
tausta: Vihreä;
täyte: 0px;
täyte-oikea: 0px;
reunus: kiinteä 0 kuvapistettä musta;
kellua: oikea;
}
Keltainen lohko on ensimmäinen, jonka leveys on 500 kuvapistettä ja pituus 200 kuvapistettä.
Vihreä lohko on ensimmäinen, jonka leveys on 200 kuvapistettä ja pituus 500 kuvapistettä.
Vaihe 3
Lohkojen oikean / vasemman reunan tasaus voidaan asettaa tyylillä:
.leftimg {
kellua: vasen;
marginaali: 5px 15px 7px0;
}
.rimimg {
kellua: oikea;
marginaali: 7px0 7px 7px;
}
Vaihe 4
Tunnisteen avulla voit järjestää kuvien vaihtamisen vuorotellen.
div # rotaattori {sijainti: suhteellinen; korkeus: 150px; marginaali vasemmalla: 15 kuvapistettä;}
div # rotaattori ul li {kellua: vasen; sijainti: absoluuttinen; list-style: ei mitään;}
div # rotaattori ul li.show {z-indeksi: 500;}
toimi theRotator () {
$ ('div # rotator ul li'). css ({peittävyys: 0.0});
$ ('div # rotator ul li: first'). css ({opasiteetti: 1.0});
setInterval ('kiertää ()', 5000);
}
funktio rotate () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var seuraava = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotaattori ul li: ensimmäinen'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var seuraava = $ (sibs [rndNum]);
next.css ({peittävyys: 0.0})
.addClass ('show')
.animaattinen ({opasiteetti: 1,0}, 1000);
current.animate ({opasiteetti: 0.0}, 1000)
.removeClass ('show');
};
$ (asiakirja).ready (funktio () {
kiertäjä ();
});
