HTML ongeordende lyste
Die HTML <ul>-merker definieer 'n ongeordende (kolpunte) lys.
Ongeordende HTML-lys
'n Ongeordende lys begin met die <ul>merker. Elke lysitem begin met die
<li>merker.
Die lysitems sal by verstek met kolpunte (klein swart sirkels) gemerk word:
Voorbeeld
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ongeordende HTML-lys - Kies Lys Item Merker
Die CSS list-style-type-eienskap word gebruik om die styl van die lysitemmerker te definieer. Dit kan een van die volgende waardes hê:
| Value | Description |
|---|---|
| disc | Sets the list item marker to a bullet (default) |
| circle | Sets the list item marker to a circle |
| square | Sets the list item marker to a square |
| none | The list items will not be marked |
Voorbeeld - Skyf
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Voorbeeld - Sirkel
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Voorbeeld - Vierkant
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Voorbeeld - Geen
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Geneste HTML-lyste
Lyste kan geneste word (lys binne lys):
Voorbeeld
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Let wel: 'n Lysitem ( <li>) kan 'n nuwe lys en ander HTML-elemente bevat, soos beelde en skakels, ens.
Horisontale lys met CSS
HTML-lyste kan op baie verskillende maniere met CSS gestileer word.
Een gewilde manier is om 'n lys horisontaal te stileer, om 'n navigasiekieslys te skep:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Wenk: Jy kan baie meer oor CSS leer in ons CSS-tutoriaal .
Hoofstuk Opsomming
- Gebruik die HTML-
<ul>element om 'n ongeordende lys te definieer - Gebruik die CSS
list-style-type-eienskap om die lysitemmerker te definieer - Gebruik die HTML-
<li>element om 'n lysitem te definieer - Lyste kan genesteer word
- Lysitems kan ander HTML-elemente bevat
- Gebruik die CSS-eienskap
float:leftom 'n lys horisontaal te vertoon
HTML Lys Tags
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a term in a description list |
| <dd> | Describes the term in a description list |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .