Pogas piemērs ar kursoru 1 CSS

Virziet 1 CSS
Šajā piemērā mums ir jābūt 3 attēliem, kas darbosies kā;
Atpūta

Pēc

Noturēts

Mūsu vietnes pamattekstā mums ir šis
Kods:


SĀKUMS

Un tāpēc visām mūsu pogām pēc tam, kad mums būs jāizmanto CSS, mēs sākam ar šo kodu:
Kods:

# bot1 {
robeža: 0 0 0 0;
polsterējums: 0;
teksta līdzināšana: centrs;
}
Ja mēs sakām, ka nevēlamies ārējo un iekšējo malu, mēs izlīdzinām tekstu līdz centram, tagad mēs turpinām ar šo kodu:
Kods:

# bot1 uz {
fona attēls: url (bg_menu_1.jpg);
fona pozīcija: augšdaļa centrā;
augstums: 30 pikseļi;
platums: 100 pikseļi;
displejs: bloks;
krāsa: # 990000;
teksta noformējums: nav;
polsterējums-top: 5px;
fona atkārtojums: neatkārtot;
fonta svars: treknrakstā;
}
Ka viņš praktiski ir tas, kurš visu dara, skatīsimies rindu pēc rindas
fona attēls: url (bg_menu_1.jpg);
Ar to mēs sakām, ka vēlamies fona attēlu, un mēs sniedzam ceļu tam
fona pozīcija: augšdaļa centrā;
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 raksts.

augstums: 30 pikseļi;
platums: 100;
Mēs viņam sakām, ka augstums būs 30 un platums 100 pikseļi, kas ir mūsu fona attēlu izmēri.
displejs: bloks;
Lai tas ģenerētu un ievērotu kastīti ar pasākumiem, kurus mēs ieviesām iepriekš.
krāsa: # 990000
Ar to mēs tikai piešķiram krāsu tekstam, kas atrodas mūsu kastē.
teksta noformējums: nav;
Tas ir, lai izvairītos no līnijas, kas atrodas zem saitēm.
polsterējums-top: 5px;
Lai es ietaupītu 5 pikseļus mūsu saites augšējā daļā, un tādējādi tas pazemina pozīciju mūsu lodziņa centrā.
fonta svars: treknrakstā;
Padara burtus treknus
Tad jums vienkārši jāpievieno klases pseidoelementiem "hover" un "focus"
Kods:

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








SĀKUMS


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