Demo 5 - Kalatori: Kasaus
<![CDATA[
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:
<![CDATA[<section id="markkinat">Markkinat</section>]]>
- 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ä
<![CDATA[
<script>
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth',
block: 'start',
});
});
});
</script>
]]>
