NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

Sådan styler du lister med CSS

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops . Læs mere om vores ydelser her!

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

I denne lektion skal vi arbejde med lister i CSS. Vi skal blandt andet prøve at ændre vores liste-ikoner samt tilføje baggrundsfarver til vores lister.

Øvelser:
1 - Find et ikon på nettet og prøv at indsætte dette som liste-ikon på din unordered liste. Prøv også at fjerne liste-ikonerne ved hjælp af liste-style-type: none;
2 - Lav en unordered liste inde i en ordered liste. Prøv at style disse to lister forskelligt ved hjælp af to klasser.

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, introduktion til CSS, stylig af lister

Her har du kildekoden

<!-- HTML filen: -->
<!DOCTYPE html>
<html>
    <head>
        <title>Lektion 8</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
     
        <ul class="uordnede1">
          <li class="punkt1">Punkt 1</li>
          <li>Punkt 2</li>
          <li>Punkt 3</li>
        </ul> 
        
        <ul class="uordnede2">
          <li class="punkt1">Punkt 1</li>
          <li>Punkt 2</li>
          <li>Punkt 3</li>
        </ul>
        
        <ol class="ordnede">
          <li>Punkt 2</li>
          <li>Punkt 3</li>
          <li>Punkt 4</li>
        </ol>
     
    </body>
</html> 
        

Her har du kildekoden

/* CSS filen */
ul.uordnede1 {
  list-style-type: square;
  background-color: green;
    
}

li.punkt1 {
    background-color: red;
}

li {
    text-decoration: underline;
}

ul.uordnede2 {
  list-style-image: url(pil.png);
    
}


ol.ordnede {
    list-style-type: upper-roman;
    
}
        

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

Url´er bliver automatisk omdannet til links (nofollow).

Vær den første til at skrive en kommentar!

Forum stats

  • 1086 Antal brugere
  • 1566 Antal emner
  • 7881 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside