Nupu näide 1-ga ümberpaigutamisega CSS-is

Üleminek 1 CSS-ile
Selle näite jaoks peab meil olema 3 pilti, mis töötavad nii;
Pange maha

Peal

Hoidis

Siis on see meie saidi kehas see
Kood:


ALGUS

Ja nii, et kui peame kasutama CSS-i, alustame kõigi meie nuppude puhul sellest koodist:
Kood:

# bot1 {
piir: 0 0 0 0;
polster: 0;
teksti joondamine: keskel;
}
Kui me ütleme, et me ei soovi välimist ja sisemist veerist, joondame teksti keskele, nüüd jätkame selle koodiga:
Kood:

# bot1 kuni {
taustapilt: url (bg_menu_1.jpg);
taustasend: ülemine keskosa;
kõrgus: 30px;
laius: 100px;
kuva: plokk;
värv: # 990000;
teksti kaunistamine: puudub;
top polster: 5px;
taust-kordus: ei-kordus;
fondi kaal: paks;
}
Et ta on praktiliselt see, kes teeb kõike, vaatame rida realt
taustapilt: url (bg_menu_1.jpg);
Sellega ütleme, et tahame taustapilti ja anname selle tee
taustasend: ülemine keskosa;
Sellega näitame, et taustpildi asukoht on keskel ja ülespoole.
taust-kordus: ei-kordus;
Nii et taust ei korduks nagu muster.
kõrgus: 30px;
laius: 100;
Me ütleme teile, et kõrgus on 30 ja laius 100 pikslit, mis on meie taustpildi mõõtmed.

kuva: plokk;
Nii et see genereerib ja arvestab kasti meetmetega, mis me enne panime.
värv: # 990000
Sellega anname ainult värvi tekstile, mis on meie kasti sees.
teksti kaunistamine: puudub;
Selle eesmärk on vältida linkide all asuvat joont.
top polster: 5px;
Nii et säästan meie lingi ülaosas ruumi 5 pikslit ja sellega langetatakse see positsioon meie kasti keskele.
fondi kaal: paks;
Muudab tähed paksuks
Siis peate lihtsalt lisama klassid pseudoelementidele "hõljutama" ja "keskenduma"
Kood:

# bot1 a: hõljutage {
taustapilt: url (bg_menu_2.jpg);
}
# bot1 kuni: fookus {
taustapilt: url (bg_menu_3.jpg);
}
Kuid nagu aru saame, muutsime oma taustapiltide rada ainult selleks, et saavutada soovitud efekt.
Meie kood ümbermineku näide css-des näidatud allpool:
Kood:








ALGUS


Pilte saab sellelt lehelt alla laadida, paremklõpsates pilti ja salvestades nimega.