Demo 5 - Kalatori: Kasaus
html_css_basics
|
├── demos
| |
│ └── d5_kalatori
| |
│ ├── index.html
│ ├── common.css
│ ├── header.html
│ ├── header.css
│ ├── markkinat.html
│ ├── markkinat.css
│ ├── hinnasto.html
│ ├── hinnasto.css
│ ├── yhteys.html
│ ├── yhteys.css
│ ├── sijainti.html
│ ├── sijainti.css
│ ├── footer.html
│ ├── footer.css
| |
│ └─── img
│ │ ├── kuva_1.jpg
│ │ └── kuva_2.jpg
|
Tehtävä
- Luo uusi tiedosto index.html
- Tee tällä kertaa HTML-tiedostoon head ja body
- Linkitä kaikki CSS-tiedostot index.html headiin
- Kopioi kukin toteutettu osio (header/section/footer) juuri luodun index.html body tagin sisälle peräkkäin
- Tarkista, että kokonaisuus toimii ja näyttää suunnitteen layout-suunnitelmakuvan mukaiselta
- Toteuta puuttuvat osiot tai lisää toistaiseksi niiden tilalle dummy-osio esim:
- Lisää sivulle fav.icon (kuva alla head-osioon)
- Testaa, että klikattaessa navigaation ankkurilinkit scrollaavat sivun oikeaan kohtaan
- Voit tehdä vierityksestä pehmeän lisäämällä seuraava script-tagin (JavaScript) ennen body-tagin sulkeutumista.
- Vertaa: pehmeä / kova siirtymä