17: Z-Index

Spoznali bomo

Kako s CSS elemente pozicioniramo v plasti

Izdelaj spletno stran, ki jo prikazuje spodnja slika in jo poimenuj: 17vaja-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.

HTML zgradba strani:

div class="box-okvir" za zunanji okvir
oznake figure class="box box-1" do figure class="box box-4"za posamezne elemente Box 1 do Box 4

Oblikovne lastnosti

stran - body:

- pisava: Helvetica, Arial, Sans-Serif

- oblika pisave: krepko

- velikost pisave: 110 odstotkov

zunanji okvir box-okvir:

- barva ozadja: #eaeaed

- velikost: višina 200 pik

- zaobljeni robovi: 10 pik

- pozicioniranje: relativno

skupne lastnosti okvirjev box:

- zaobljeni robovi: 6 pik

- velikost: višina in širina 80 pik

- pozicioniranje: absolutno

- besedilo: višina vrstice 80 pik, sredinska poravnava

lastnosti posameznega okvirja box-1 do box-4:

- barve ozadja: #f88a2a; #53c1f7; #ca57e4; #2db34a;

- postavitev v plasti z lastnostjo z-index

- pozicioniranje okvirjev: levo (40 pik, 110 pik, 160 pik, 220 pik), zgoraj in spodaj (10 pik)

Slika spletne strani v brskalniku

Nazaj

Naprej