CSS UL, ol, DL Difference

HTML has 3 kinds of lists: Unordered list UL, ordered list ol, definition list DL.

1. Unordered list:
<ul>
<li>......</li>
<li>......</li>
</ul>

See a sample about the UL Li menu

* {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

&lt;ul id= "NAV" &gt;


&lt;li&gt;&lt;a href= "clothes.jsp Tutorial" &gt; Apparel &lt;/a&gt;&lt;/li&gt;


&lt;li&gt;&lt;a href= "food.jsp" &gt; Food &lt;/a&gt;&lt;/li&gt;


&lt;li&gt;&lt;a href= "digital.jsp" &gt; Digital &lt;/a&gt;&lt;/li&gt;


&lt;li&gt;&lt;a href= "computer.jsp" &gt; Computer supplies &lt;/a&gt;&lt;/li&gt;


&lt;li&gt;&lt;a href= "makeup.jsp" &gt; Daily necessities &lt;/a&gt;&lt;/li&gt;


&lt;li&gt;&lt;a href= "decorations.jsp" &gt; Ornaments &lt;/a&gt;&lt;/li&gt;


&lt;/ul&gt;

UL is the most commonly used list, the general news list is achieved through the UL. Li is not sequential, is the juxtaposition of relations. By setting the List-style style, you can control the front display points or circles of Li, etc. (see the online manual for details). In the specific operation, the small icon in front of the list is implemented by the background image.

2. Ordered list:
<ol>
<li>......</li>
<li>......</li>
<li>......</li>
</ol>

There are fewer sequential tables in practice, as the name suggests, the inside of the Li is in order. You can use the settings to implement the "1,2,3" or other order shown in front of Li (see the online manual).

1. Definition list:
<dl>
<dt> title </dt>
<dd> content 1</dd>
<dd> content 2</dd>
</dl>