列表li的使用場(chǎng)合和注意事項

來(lái)源：昆明多彩網(wǎng)絡(luò )公司 日期：2010-09-21 閱讀： 發(fā)表評論

看看li在網(wǎng)頁(yè)中的應用：

1、新聞列表，最最常見(jiàn)的網(wǎng)頁(yè)內容排列，一行后跟著(zhù)一行，然后翻頁(yè)；典型代碼：<li><a href="http://www.predjimost.com">新聞的標題：昆明網(wǎng)站建設公司</a>2010-9-21</li>，一般是標題居左，日期居右，css應該這樣寫(xiě)：li { text-align: right} li a { float: left}，可以做到最少代碼和最少的classname。

2、產(chǎn)品列表，也經(jīng)常用到li用來(lái)排序，典型代碼：<li><a href="http://www.predjimost.com"><img src="test.jpg"><br>產(chǎn)品名稱(chēng)</li>，css應該這樣寫(xiě)：li { width: 150px; height: 150px; display: inline-block; *display: block; *zoom: 1; text-align: center}，其中*號是為了兼容ie6及一下版本的瀏覽器，這樣寫(xiě)兼容性極好，和之前用的float寫(xiě)法相比可以更加容易控制元素的擺放，并且不用寫(xiě)多余的css hack代碼去兼容更多的瀏覽器。

3、導航列表，每個(gè)網(wǎng)站都有導航，這個(gè)應該是最多用的場(chǎng)所了，看看以前的寫(xiě)法吧：<li><a href=http://www.predjimost.com>網(wǎng)站首頁(yè)</a></li>，這樣寫(xiě)，看似沒(méi)有什么的，但是從精簡(jiǎn)代碼的角度來(lái)看還不算完美，我們應該直接寫(xiě)成<a href=http://www.predjimost.com>網(wǎng)站首頁(yè)</a>，css應該這樣寫(xiě)：a { display: inline-block; width: 150px; height: 30px}，li的inline-block有ie6的兼容問(wèn)題，但是a標簽的inline-block屬性所有瀏覽器都認可，不存在兼容問(wèn)題。

以上幾種方式都是本著(zhù)盡量減少網(wǎng)頁(yè)代碼量，極限提升網(wǎng)站速度，兼容所有瀏覽器的角度得出的經(jīng)驗心得。