Mygtuko pavyzdys su 1 perkėlimu CSS

1 perkėlimas CSS
Šiame pavyzdyje turime turėti 3 atvaizdus, ​​kurie veiks kaip;
Atsipalaiduoti

Įjungta

Laikė

Tada mūsų svetainėje yra tai
Kodas:


PRADŽIA

Taigi visiems mūsų mygtukams, kai teks naudoti CSS, pradedame nuo šio kodo:
Kodas:

# bot1 {
kraštas: 0 0 0 0;
užpildas: 0;
text-align: centre;
}
Kai sakome, kad nenorime išorinės ir vidinės paraštės, sulyginame tekstą su centru, dabar tęsiame šį kodą:
Kodas:

# bot1 iki {
fono paveikslėlis: url (bg_menu_1.jpg);
fono padėtis: vidurinė viršuje;
aukštis: 30 taškų;
plotis: 100 taškų;
rodyti: blokuoti;
spalva: # 990000;
teksto dekoravimas: nėra;
topding-top: 5px;
fonas pakartoti: ne kartoti;
šrifto svoris: paryškintas;
}
Kad jis praktiškai yra tas, kuris viską daro, pažiūrėkime eilutę po eilutės
fono paveikslėlis: url (bg_menu_1.jpg);
Tuo mes sakome, kad norime fono paveikslėlio ir suteikiame tam kelią
fono padėtis: vidurinė viršuje;
Tuo mes nurodome, kad fono paveikslėlio padėtis bus centruota ir į viršų.
fonas pakartoti: ne kartoti;
Kad fonas nesikartotų taip, lyg tai būtų raštas.

aukštis: 30 taškų;
plotis: 100;
Mes jums sakome, kad aukštis bus 30, o plotis - 100 taškų, o tai yra mūsų fono paveikslėlių matmenys.
rodyti: blokuoti;
Taigi, kad jis sugeneruotų ir gerbtų langelį su priemonėmis, kurias įdėjome anksčiau.
spalva: # 990000
Tokiu būdu mes tik suteikiame spalvą tekstui, esančiam mūsų dėžutėje.
teksto dekoravimas: nėra;
Venkite linijos, esančios žemiau nuorodų.
topding-top: 5px;
Taigi viršutinėje mūsų nuorodos dalyje sutaupau 5 taškų vietos ir tuo sumažinu padėtį iki mūsų langelio centro.
šrifto svoris: paryškintas;
Padaro paryškintas raides
Tada jūs tiesiog turite pridėti pseudo elementų „užveskite“ ir „sutelkti“ klases
Kodas:

# bot1 a: užveskite pelės žymeklį {
fono paveikslėlis: url (bg_menu_2.jpg);
}
# bot1 to: sutelkti {
fono paveikslėlis: url (bg_menu_3.jpg);
}
Bet kaip suprantame, pakeitėme tik foninių vaizdų kelią, kad pasiektume norimą efektą.
Mūsų kodas apsivertimo pavyzdys CSS nurodyta apačioje:
Kodas:








PRADŽIA


Vaizdus galite atsisiųsti iš šio puslapio, dešiniuoju pelės mygtuku spustelėkite paveikslėlį ir išsaugokite kaip.