Pogas piemērs ar 1. pārvietošanu CSS

1. apgāšanās CSS
Šajā piemērā mums ir jābūt 3 attēliem, kas darbosies kā;
Atslābināties

Ieslēgts

Turēja

Tad mūsu vietnes ķermenī tas ir
Kods:


SĀKUMS

Tāpēc visām mūsu pogām pēc tam, kad būs jāizmanto CSS, mēs sāksim ar šo kodu:
Kods:

# bot1 {
apmale: 0 0 0 0;
polsterējums: 0;
text-align: center;
}
Ja mēs sakām, ka mēs nevēlamies ārējo un iekšējo malu, mēs pielīdzinām tekstu centram, tagad mēs turpinām ar šo kodu:
Kods:

# bot1 līdz {
fona attēls: url (bg_menu_1.jpg);
fona stāvoklis: centra augšdaļa;
augstums: 30 pikseļi;
platums: 100 pikseļi;
displejs: bloks;
krāsa: # 990000;
teksta noformēšana: nav;
polsterējums - 5 pikseļi;
fona atkārtojums: neatkārtot;
fonta svars: treknrakstā;
}
Ka viņš praktiski ir tas, kurš visu dara, redzēsim pa rindai
fona attēls: url (bg_menu_1.jpg);
Ar to mēs sakām, ka mēs vēlamies fona attēlu un dodam tam ceļu
fona stāvoklis: centra augšdaļa;
Ar to mēs norādām, ka fona attēla pozīcija būs centrēta un uz augšu.
fona atkārtojums: neatkārtot;
Lai fons neatkārtotos tā, it kā tas būtu paraugs.

augstums: 30 pikseļi;
platums: 100;
Mēs jums sakām, ka augstums būs 30 un platums 100 pikseļi, kas ir mūsu fona attēlu izmēri.
displejs: bloks;
Tā, lai tas ģenerētu un respektētu rūtiņu ar pasākumiem, kurus mēs ievietojām iepriekš.
krāsa: # 990000
Ar to mēs piešķiram tikai krāsu tekstam, kas atrodas mūsu lodziņā.
teksta noformēšana: nav;
Tas ir jāizvairās no līnijas, kas atrodas zem saitēm.
polsterējums - 5 pikseļi;
Lai es saites augšējā daļā ietaupītu vietu 5 pikseļu garumā, un līdz ar to tas pazemina pozīciju līdz mūsu kastes centram.
fonta svars: treknrakstā;
Padara burtus treknrakstā
Tad jums vienkārši jāpievieno klases pseido elementiem "lidināties" un "fokuss"
Kods:

# bot1 a: virziet kursoru {
fona attēls: url (bg_menu_2.jpg);
}
# bot1 to: fokuss {
fona attēls: url (bg_menu_3.jpg);
}
Bet, kā mēs saprotam, mēs tikai mainījām savu fona attēlu ceļu, lai sasniegtu meklēto efektu.
Mūsu kods apgāšanās piemērs CSS parādīts zemāk:
Kods:








SĀKUMS


Attēlus var lejupielādēt no šīs lapas, ar peles labo pogu noklikšķinot uz attēla un saglabājot kā.