Spoznali bomo
- Kako s CSS v spletni strani kreiramo aktiven gumb
- Kako S CSS v spletni strani kreiramo meni
Izdelaj spletno stran, ki jo prikazujejo spodnje slike in videa in jo poimenuj: 21vaja-css-priimek-ime.html. Stran naj bo izdelana v HTML5 in s CSS. Pazi na pravilno uporabo oznak in obliko zapisa kode.
CSS kodo vstavi v glavo spletne strani v oznako style.
Aktiven gumb
Oblikovne lastnosti strani in aktivnega gumba
- telo dokumenta
body:
- pisava: Georgia, serif
- barva ozadja: #bbb
- slika v ozadju: page_background.jpg, brez ponavljanja
- zunanji in notranji odmiki: 0 pik
- zunanji okvir:
- velikost: širina 770 pik
- poravnava: sredinsko
- barva ozadja: bela
- slika v ozadju: banner.jpg, brez ponavljanja
- glava strani
header:
- velikost: višina je 100 pik
- pozicioniranje: relativno
- aktiven gumb:
- pozicioniranje: absolutno
- položaj: levo 650 pik, zgoraj 0 pik
- povezava na aktivnem gumbu
a:
- velikost: širina 86 pik, višina 29 pik
- prikaz: kot blok
- obroba: brez
- slika v ozadju: GroundswellSprites.png, brez ponavljanja
- položaj slike v ozadju: 0 pik, 0 pik
- povezava na aktivnem gumbu, ko je nad njim kurzor
a:hover:
- položaj slike v ozadju: 0 pik, -29 pik
Meni
Oblikovne lastnosti menija
- meni:
- pozicioniranje: absolutno
- položaj slike v ozadju: levo 320 pik, spodaj 0 pik
- neurejen seznam menija
ul:
- način označevanja: brez oznak
- notranji in zunanji odmiki: 0 pik
- elementi seznama
li:
- način označevanja: brez oznak
- pozicioniranje: float levo
- notranji in zunanji odmiki: 0 pik
- notranji in zunanji odmiki: 0 pik
- povezave v meniju
a:
- pisava: "Trebuchet MS", sans-serif
- prikaz: kot blok
- barva pisave: bela
- oblika pisave: brez podčrtave
- notranji odmiki: zgoraj in spodaj 0 pik, levo 30 pik, desno 15 pik
- desni zunanji odmiki: 10 pik
- višina vrstice: 25 pik
- slika v ozadju: GroundswellSprites.png
- položaj slike v ozadju: -286 pik, -25 pik
- obroba slike: brez obrobe
- povezave v meniju, ko je nad njo kurzor
a:hover:
- barva pisave: #f8b449
- položaj slike v ozadju: -286 pik, 0 pik
- povezava v meniju na izbranem gumbu
a.trenutni:
- zgornji notranji odmik: -5 pik
- velikost: višina 30 pik
- položaj slike v ozadju: -86 pik, 0 pik
- barva pisave: #aaa
- višina vrstice: 25 pik
- povezava v meniju na izbranem gumbu, ko je nad njim kurzor
a.trenutni:hover:
- kurzor: default
