知識點：

• ul無序和ol有序列表
• 改變項目符號樣式或用圖片定義項目符號
• 橫向圖文列表
• 浮動后父容器高度自適應
• IE6的雙倍邊距bug

一、ul無序和ol有序列表
無序列表，是以ul包含li的形式，默認每行前的符號是圓點，可以通過樣式表改為無、方塊，空心圓等。

有序列表是以ol包含li的形式，是以數字為項目符號的，無序列表也可以用css定義顯示成有序列表，代碼及顯示效果如下：

<ul>
<li><a title="第五天 超鏈接偽類" href="/div_css/906.shtml" target="_blank">第五天 超鏈接偽類</a></li>			
<li><a title="第四天 縱向導航菜單" href="/div_css/905.shtml" target="_blank">第四天 縱向導航菜單</a></li>			
</ul>
			
<ol>
<li><a title="第五天 超鏈接偽類" href="/div_css/906.shtml" target="_blank">第五天 超鏈接偽類</a></li>
<li><a title="第四天 縱向導航菜單" href="/div_css/905.shtml" target="_blank">第四天 縱向導航菜單</a></li>
<li><a title="第三天 二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列布局</a></li>
</ol>

二、改變項目符號樣式或用圖片定義項目符號

<style type="text/css">
			#layout ul {
				list-style: none;//去除默認樣式
			}

			#layout ul li {
				background: url(./images/qq.png) no-repeat 0px 4px; //添加背景圖片
				padding-left: 20px;
				background-size: 10px;//設置背景圖片大小
			}
</style>

效果

三、 橫向圖文列表

橫向圖文列表是在上一步的基礎上增加圖片并讓列表橫向排列。
用到 float 屬性

<style type="text/css">
			body {
				margin: 0 auto;
				font-size: 12px;
				font-family: Verdana;
				line-height: 1.5;
			}
//選擇器分組
			ul,
			dl,
			dt,
			dd,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			form {
				padding: 0;
				margin: 0;
			}

			ul {
				list-style: none;
			}

			img {
				border: 0px;
			}

			a {
				color: #05a;
				text-decoration: none;
			}

			#layout {
				width: 500px;
			}

			a:hover {
				color: #f00;
			}
//派生選擇器
			#layout ul li {
				width: 72px;
				float: left; //左浮動
				margin: 20px 0 0px 20px;
				display: inline;
				text-align: center;
			}

			#layout ul li a {
				display: block;
			}

			#layout ul li a img {
				padding: 1px;
				border: 1px solid #e1e1e1;
				margin-bottom: 3px;
			}

			#layout ul li a:hover img {
				padding: 0px;
				border: 2px solid #f98510;
			}
		</style>

效果圖

四、 浮動后父容器高度自適應

當一個容器內元素都浮動后，它將高度將不會隨著內部元素高度的增加而增加，所以造成內容元素的顯示超出了容器。為了便于查看效果，把剛才實例中的#layout增加一個邊框和內邊距：

   #layout { width:500px; border:2px solid #ccc; padding:2px;}

看到沒，它沒有被內容元素給撐高，要解決這個問題，需要使用以下樣式
overflow:auto; zoom:1;

verflow:auto;是讓高度自適應， zoom:1;是為了兼容IE6而寫（

這就是所謂的css hack，之前講解過3px bug，現在說一下 css hack：

由于不同的瀏覽器，比如IE 6,IE 7,IE8,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。 這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack。這里的overflow:auto; zoom:1;就是所謂的css hack，這種形式是應用我們常用的代碼來解決不兼容問題，也會用到添加一些特殊符號的形式，它本身沒有意義，只是針對不同瀏覽器是否對它識別來實現的。

#layout {
				width: 500px;
				border: 2px solid #ccc;
				padding: 2px;
				overflow: auto;
				zoom: 1;
			}

五、IE6的雙倍邊距bug
這又是IE6一個著名的bug，也是我們經常遇到的。如上例，當浮動后設置左側外邊距時后，最左側將顯示為雙倍邊距，比如設置為20，而在IE6下卻顯示40px，解決這個問題只需應用一個樣式，大家記住就可以了
display:inline;

#layout ul li {
				width: 72px;
				float: left;
				margin: 20px 0 0px 20px;
				display: inline; //-----------------
				text-align: center;
			}