Difference between css ul, ol, and dl

There are three lists in html: unordered list ul, ordered list ol, and definition list dl.

1. Unordered list:
<Ul>
<Li> ...... </Li>
<Li> ...... </Li>
</Ul>

Check out an ul li menu instance.

 

* {Margin: 0; padding: 0 ;}
Ul {list-style: none ;}
Ul # nav {background: # f3c; height: 245px; width: 133px; padding-top: 10px ;}
Ul # nav li a {display: block; height: 20px; width: 133px; text-align: center; padding: 10px 0 ;}

Html code

<Ul id = "nav">
<Li> <a href = "clothes. jsp tutorial"> apparel </a> </li>
<Li> <a href = "food. jsp"> food </a> </li>
<Li> <a href = "digital. jsp"> digital </a> </li>
<Li> <a href = "computer. jsp"> computer Consumables </a> </li>
<Li> <a href = "makeup. jsp"> Daily necessities </a> </li>
<Li> <a href = "decorations. jsp"> ornament </a> </li>
</Ul>

Ul is the most commonly used list. General news lists are implemented through ul. Li has no sequence, that is, the parallel relationship. By setting the list-style, you can control the display points or circles on the front of li (for details, refer to the online manual ). In specific operations, the small icons at the front of the list are implemented through the background image.

2. Ordered list:
<Ol>
<Li> ...... </Li>
<Li> ...... </Li>
<Li> ...... </Li>
</Ol>

The ordered list is rarely used in practice. As the name suggests, the li in the list is ordered. You can set the front of li to display "1, 2, 3" or other sequence (view the online manual for details ).

1. Definition list:
<Dl>
<Dt> title </dt>
<Dd> Content 1 </dd>
<Dd> content 2 </dd>
</Dl>