Harjoitus 1

käy kokeilemassa listan tekoa W3Schoolsin sivuilla:

http://www.w3schools.com/css/css_list.asp

Harjoitus 2

1.Tee uusi HTML-sivu. Tee sinne lista, jossa on seuraavat kohdat: Etusivu, Esittely, Asiakkaat, Yhteystiedot

2. Luo uusi CSS-tiedosto, jonka linkität sivuun

3. Muuta lista vaakasuoraksi navigaatioksi (vinkki: käytä list-style-type -ominaisuutta)

4. Tee navigaatiolinkeistä painikkeen näköiset: 

  • lisää täytettä (padding) linkin joka reunalle
  • lisää reunaviivat ja taustaväri / taustakuva

 5. Lisää navigaatiolle myös hover-efekti: kun käyttäjä laittaa hiiren painikkeen yli, se muuttaa taustavärinsä toiseksi.

Malli: Navigaation rakentaminen vaihe vaiheelta


  • No labels
You must log in to comment.