第六章：html列表

　　代碼如下：

　　三、 橫向圖文列表

　　橫向圖文列表是在上一步的基礎(chǔ)上增加圖片并讓列表橫向排列，最終實(shí)現(xiàn)效果如下：

　　先插入如下的html代碼，插入過(guò)程就不再截圖了，如果不會(huì)的話請(qǐng)學(xué)習(xí)前邊章節(jié)

　　<div id="layout">

　　<ul>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>

　　</ul>

　　</div>

　　接下來(lái)添加css樣式，這里用到一個(gè)很重要的css屬性：float，這個(gè)屬性在第三天的教程當(dāng)中已詳細(xì)講解過(guò)，這里不太贅述。先添加如下全局樣式：

　　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;}

　　a:hover { color:#f00;}

　　然后讓每個(gè)li元素浮動(dòng)起來(lái)，這樣就實(shí)現(xiàn)了橫向排列