|
Stil dine ting op på en overskuelig måde med punkt opstilling..
Vi starter med den klassiske
Kode:
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
|
Resultat:
Så tager vi en med nogle anderledes cirkler
Kode:
<ul type="circle">
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
|
Resultat:
Og en med tal
Kode:
<ol>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ol>
|
Resultat:
- Punkt 1
- Punkt 2
- Punkt 3
Og en anden med tal der starter ved et specielt tal.
Kode:
<ol start="10">
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ol>
|
Resultat:
- Punkt 1
- Punkt 2
- Punkt 3
En med Romer tal
Kode:
<ol typet="I">
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ol>
|
Resultat::
- Punkt 1
- Punkt 2
- Punkt 3
Og så alfabetisk
Kode:
<ol typet="A">
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ol>
|
Resultat::
- Punkt 1
- Punkt 2
- Punkt 3
Og så en med firkanter.
Kode:
<ul type="square">
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
|
Resultat:
Og så en lidt mere avanceret en hvor du selv kan vælge "bullet"
Kode:
<style type="text/css">
<!--.bullet { list-style-image: url(linktilbullet.gif);
margin-top: 0; } -->
</style>
<ul class="bullet">
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
|
Stylekoden kan også indsættes i stylesheet så skal du bare skrive:
.bullet
{
list-style-image: url(linktilbullet.gif);
margin-top: 0;
}
|
Resultat:
Du kan også kombinere forskellige liste elementer
Kode:
<ol>
<li>Liste 1</li>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
<br>
<li>Liste 2</li>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</ol>
|
Resultat:
- Liste 1
- Liste 2
|
