Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Haaste: Työskentele Fixed-sijoittelun Kanssa | CSS-sijoittelun Hallinta
Edistyneet CSS-tekniikat

bookHaaste: Työskentele Fixed-sijoittelun Kanssa

Tehtävä

Luo verkkosivun navigaatiopalkki, joka pysyy kiinnitettynä sivun yläreunaan ja on käyttäjän saatavilla koko ajan. Vaiheet:

  1. Käytä navigaatiolistaan fixed-sijoittelua.
  2. Valitse yksi ominaisuus vaakasuuntaiselle siirtymälle (left tai right).
  3. Valitse yksi ominaisuus pystysuuntaiselle siirtymälle (top tai bottom).
  4. Testaa toiminnallisuutta napsauttamalla eri linkkejä ja varmista, että sivu vierii, mutta navigaatiopalkki pysyy näkyvissä.
index.html

index.html

index.css

index.css

copy
  1. Aseta top-ominaisuus arvoon 0 pitääksesi navigaation verkkosivun yläreunassa.
  2. Vaakasuoraa sijaintia varten voit käyttää joko left: 0; kohdistamaan navigaation näkymän vasempaan reunaan tai right: 0; kohdistamaan sen oikeaan reunaan.
index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 7

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you show me an example of the CSS code for the fixed navigation bar?

What HTML structure should I use for the navigation bar?

How do I test if the navigation bar stays fixed while scrolling?

Awesome!

Completion rate improved to 2.04

bookHaaste: Työskentele Fixed-sijoittelun Kanssa

Pyyhkäise näyttääksesi valikon

Tehtävä

Luo verkkosivun navigaatiopalkki, joka pysyy kiinnitettynä sivun yläreunaan ja on käyttäjän saatavilla koko ajan. Vaiheet:

  1. Käytä navigaatiolistaan fixed-sijoittelua.
  2. Valitse yksi ominaisuus vaakasuuntaiselle siirtymälle (left tai right).
  3. Valitse yksi ominaisuus pystysuuntaiselle siirtymälle (top tai bottom).
  4. Testaa toiminnallisuutta napsauttamalla eri linkkejä ja varmista, että sivu vierii, mutta navigaatiopalkki pysyy näkyvissä.
index.html

index.html

index.css

index.css

copy
  1. Aseta top-ominaisuus arvoon 0 pitääksesi navigaation verkkosivun yläreunassa.
  2. Vaakasuoraa sijaintia varten voit käyttää joko left: 0; kohdistamaan navigaation näkymän vasempaan reunaan tai right: 0; kohdistamaan sen oikeaan reunaan.
index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 2. Luku 7
some-alt