Mygtuko pavyzdys su 1 užvedimu CSS

Užveskite 1 CSS
Šiame pavyzdyje turime turėti 3 vaizdus, ​​​​kurie veiks kaip;
Atsipalaiduokite

Ant

Laikė žemyn

Tada mūsų svetainės turinyje turime tai
Kodas:


PRADŽIA

Taigi visus mygtukus, kai turėsime naudoti CSS, pradedame nuo šio kodo:
Kodas:

# bot1 {
kraštinė: 0 0 0 0;
paminkštinimas: 0;
teksto lygiavimas: centre;
}
Kai sakome, kad nenorime išorinės ir vidinės paraštės, tekstą lygiuojame į centrą, dabar tęsiame šį kodą:
Kodas:

# bot1 į {
background-image: url (bg_menu_1.jpg);
fono padėtis: centre viršuje;
aukštis: 30px;
plotis: 100 pikselių;
ekranas: blokas;
spalva: # 990000;
tekstas-dekoravimas: nėra;
paminkštinimas-viršus: 5px;
fono kartojimas: nekartoti;
šrifto svoris: paryškintas;
}
Kad jis praktiškai yra tas, kuris daro viską, pažiūrėkime eilė po eilutės
background-image: url (bg_menu_1.jpg);
Tuo mes sakome, kad norime fono paveikslėlio ir pateikiame jo kelią
fono padėtis: centre viršuje;
Tuo mes nurodome, kad fono paveikslėlio padėtis bus centre ir aukštyn.
fono kartojimas: nekartoti;
Kad fonas nesikartotų tarsi raštas.

aukštis: 30px;
plotis: 100;
Mes jam sakome, kad aukštis bus 30, o plotis 100 pikselių, tai yra mūsų fono vaizdų matmenys.
ekranas: blokas;
Kad jis sukurtų ir gerbtų dėžutę su priemonėmis, kurias nustatėme anksčiau.
spalva: # 990000
Taip mes tik suteikiame spalvą mūsų dėžutėje esančiam tekstui.
tekstas-dekoravimas: nėra;
Taip reikia vengti eilutės, esančios po nuorodomis.
paminkštinimas-viršus: 5px;
Taip sutaupau 5 pikselių vietos viršutinėje mūsų nuorodos dalyje ir tai sumažina padėtį iki mūsų dėžutės centro.
šrifto svoris: paryškintas;
Paryškina raides
Tada tereikia pridėti klases pseudo elementams „hover“ ir „focus“
Kodas:

# bot1 a: užveskite pelės žymeklį {
background-image: url (bg_menu_2.jpg);
}
# bot1 to: focus {
background-image: url (bg_menu_3.jpg);
}
Tačiau, kaip suprantame, pakeitėme tik savo fono vaizdų kelią, kad pasiektume norimą efektą.
Mūsų kodas apvertimo pavyzdys css nurodyta apačioje:
Kodas:








PRADŽIA


O paveikslėlius galima atsisiųsti iš šio puslapio, dešiniuoju pelės mygtuku spustelėjus paveikslėlį ir išsaugant kaip.