OPGAVER TIL HTML & CSS – BEGYNDER – LISTER OG MENU
Opgave 4 - Lav en menu/navigationsbar
Lister… og navigations bar
Gå ind på CODEPEN og lav en ny pen
Opgave 4 – Del 1
Skriv en organiseret liste som denne ind i mellem i din HTML boks på Codepen
< ol >
< li >Fortnite< /li >
< li >Spiral< /li >
< li >Super mario< /li >
< /ol >
Så det ser således ud:
1. Fortnite
2. Spiral
3. Super Mario
Opgave 4 – Del 2
Skriv en organiseret liste (med prikker) skriv koden ind i din HTML boks.
< ul >
< li >Fortnite< /li >
< li >Spiral< /li >
< li >Super mario< /li >
< /ul >
Opgave 4 – Del 3
Skriv en anden liste som denne ind i mellem dit < body > < /body >.
< dl >
< dt >Spil< /dt >
< dd >– Fornite< /dd >
< dt >Drikkevarer< /dt >
< dd >– Coca Cola < /dd >
< dt >Mad< /dt >
< dd >- Chips< /dd >
< /dl >
Så det ser således ud:
Spil
– Fornite
Drikkevarer
– Coca Cola
Mad
– Chips
Opgave 4 – Del 4
Lav en menu/navigationsbar. Skriv koden ind i din HTML boks i Codenpen.
I stedet for #home kan du skrive en adresse som den skal linkes til.
OBS!! husk at sætte target=”_blank” ind efter linket
< ul class=”ul1″ >
< li class=”li1″ >< a href=”#home” >HOME< /a >< /li >
< li class=”li1″ >< a href=”#opgaver”>OPGAVER< /a >< /li >
< li class=”li1″ >< a href=”#hobby” >HTML< /a >< /li >
< li class=”li1″ >< a href=”#intro” >INTRO< /a >< /li >
< /ul >
Opgave 4 – Del 5
Nu skal du lave CSS’en.
Skriv efter det der står på billedet
Du kan se resultatet neden under billedet.
SE BORT FRA STYLE TAGS
Opgave 4 – Del 6
Vi deler den lige op i bidder.
ul = er det der definerer listen generelt. Her under står der lidt om hvad den skal rumme:
– indstillingerne herinde er næsten alle defineret med ingenting eller sat til 0, dog skal den have en baggrundsfarve som er mørkegrå.
li = listen der laves skal holdes til venstre gående mod højre.
li a = fortæller om linkets udseende og at den har block tilkoblet. Den block activeres når vi tilføjer næste klasse. Husk at man tilskriver mellemrum og a:
a=link som i < a href=”” > < / a >
li a:hover = fortæller at når vi holder musen over(altså hover på engelsk) så vises en baggrundsfarve. Nemlig den block (display: block;) vi satte på oven over i li a.
Opgave 4 – Del 7
Nu skal vi lave koden responsive. Det betyder at siden ændrer sig alt efter skærmens opløsning/størrelse.
Gå ned i din CSS og tilføj dette box-sizing:
ØVERST I CSS’EN
* {
box-sizing: border-box;
}