Knappeksempel med overføring 1 i CSS

Rollover 1 CSS
For dette eksemplet må vi ha 3 bilder som fungerer som;
Hvile

På

Holdt nede

Så i kroppen av nettstedet vårt har vi dette
Kode:


BEGYNNELSE

Og så for alle knappene våre, etter at vi må bruke CSS, begynner vi med denne koden:
Kode:

# bot1 {
grense: 0 0 0 0;
polstring: 0;
tekstjustering: sentrum;
}
Der vi sier at vi ikke vil ha ytre og indre margin, justerer vi teksten til midten, nå fortsetter vi med denne koden:
Kode:

# bot1 til {
bakgrunnsbilde: url (bg_menu_1.jpg);
bakgrunn-posisjon: midt på toppen;
høyde: 30px;
bredde: 100px;
skjerm: blokk;
farge: # 990000;
tekstdekorasjon: ingen;
polstring-topp: 5px;
bakgrunn-gjenta: nei-gjenta;
skriftvekt: fet;
}
At han praktisk talt er den som gjør alt, la oss se linje for linje
bakgrunnsbilde: url (bg_menu_1.jpg);
Med dette sier vi at vi ønsker et bakgrunnsbilde, og vi gir veien til dette
bakgrunn-posisjon: midt på toppen;
Med dette indikerer vi at posisjonen til bakgrunnsbildet vil være sentrert og oppover.
bakgrunn-gjenta: nei-gjenta;
Slik at bakgrunnen ikke gjentas som om det var et mønster.

høyde: 30px;
bredde: 100;
Vi forteller deg at høyden vil være 30 og bredden 100 px, som er dimensjonene til bakgrunnsbildene våre.
skjerm: blokk;
Slik at den genererer og respekterer en boks med tiltakene vi satte før.
farge: # 990000
Med dette gir vi bare en farge til teksten som er inne i boksen vår.
tekstdekorasjon: ingen;
Det er for å unngå linjen som er under lenkene.
polstring-topp: 5px;
Slik at jeg sparer en plass på 5 px i den øvre delen av lenken vår, og med dette senker den posisjonen til midten av boksen vår.
skriftvekt: fet;
Gjør bokstavene fet
Da er det bare å legge til klasser for pseudo-elementene "sveve" og "fokus"
Kode:

# bot1 a: sveve {
bakgrunnsbilde: url (bg_menu_2.jpg);
}
# bot1 til: fokus {
bakgrunnsbilde: url (bg_menu_3.jpg);
}
Men som vi skjønner, endret vi bare banen til bakgrunnsbildene for å oppnå den effekten vi lette etter.
Koden til vår velteeksempel i css Vist under:
Kode:








BEGYNNELSE


Og bildene kan lastes ned fra denne siden ved å høyreklikke på bildet og lagre som.