Web Standard (review)--6 HTML list

Today we begin to learn the HTML list, which contains the following content and knowledge points:

UL unordered and OL ordered list
Change the bullet style or define bullets with a picture
Horizontal graphic List
Floating Stepfather Container height adaptive
Double margin Bug for IE6
A, UL disorderly and OL ordered list
Unordered lists are the most commonly used styles in Web standard layouts, with the following code:

<div id= "Layout" >
<ul>
<li><a title= "Fifth day Hyperlink pseudo class" href= "/div_css/906.shtml" target= "_blank" > Fifth day Hyperlink Pseudo-class </a></li>
<li><a title= "Fourth day portrait navigation menu" href= "/div_css/905.shtml" target= "_blank" > Fourth day Portrait navigation menu </a></li>
<li><a title= "Third day two columns and three columns layout" href= "/div_css/904.shtml" target= "_blank" > Third day two columns and three column layouts </a></li>
<li><a title= "Next day Column Layout" href= "/div_css/903.shtml" target= "_blank" > Next day Column Layout </a></li>
<li><a title= "First day xhtml CSS Basics" href= "/div_css/902.shtml" target= "_blank" > First day XHTML CSS Basics </a> </li>
</ul>
</div>

This is an unordered list, which is in the form of UL containing Li, the default symbol before each line is a dot, you can change the style sheet to none, block, hollow circle, etc. The sequence list is in the form of an ol containing Li, is a number of bullets, unordered lists can also be displayed with a CSS definition of a sequence of tables, code and display the effect is as follows:

<div id= "Layout" >
<ol>
<li><a title= "Fifth day Hyperlink pseudo class" href= "/div_css/906.shtml" target= "_blank" > Fifth day Hyperlink Pseudo-class </a></li>
<li><a title= "Fourth day portrait navigation menu" href= "/div_css/905.shtml" target= "_blank" > Fourth day Portrait navigation menu </a></li>
<li><a title= "Third day two columns and three columns layout" href= "/div_css/904.shtml" target= "_blank" > Third day two columns and three column layouts </a></li>
<li><a title= "Next day Column Layout" href= "/div_css/903.shtml" target= "_blank" > Next day Column Layout </a></li>
<li><a title= "First day xhtml CSS Basics" href= "/div_css/902.shtml" target= "_blank" > First day XHTML CSS Basics </a> </li>
</ol>
</div>

Five, IE6 double margin Bug
This is again IE6 a famous bug, also we often encounter. As in the above example, when the left margin is set after floating, the leftmost side will be displayed as double margins, such as set to 20, but in the IE6 display 40px, solve this problem just apply a style, you can remember

Display:inline;