云南網站建設創新企業 昆明多彩網絡公司

|網頁對話|電話:0871-63215311

列表li的使用場合和注意事項

來源:昆明多彩網絡公司 日期:2010-09-21 閱讀: 發表評論

li在網站建設中應該的非常多:新聞列表,產品列表等等有些有“排列”特性的內容都可能用得到它,但并不是所有的“排列”場所都要使用

看看li在網頁中的應用:

1、新聞列表,最最常見的網頁內容排列,一行后跟著一行,然后翻頁;典型代碼:<li><a href="http://www.ndtapm.icu">新聞的標題:昆明網站建設公司</a>2010-9-21</li>,一般是標題居左,日期居右,css應該這樣寫:li { text-align: right} li a { float: left},可以做到最少代碼和最少的classname。

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

3、導航列表,每個網站都有導航,這個應該是最多用的場所了,看看以前的寫法吧:<li><a href=http://www.ndtapm.icu>網站首頁</a></li>,這樣寫,看似沒有什么的,但是從精簡代碼的角度來看還不算完美,我們應該直接寫成<a href=http://www.ndtapm.icu>網站首頁</a>,css應該這樣寫:a { display: inline-block; width: 150px; height: 30px},li的inline-block有ie6的兼容問題,但是a標簽的inline-block屬性所有瀏覽器都認可,不存在兼容問題。

以上幾種方式都是本著盡量減少網頁代碼量,極限提升網站速度,兼容所有瀏覽器的角度得出的經驗心得。

發表評論評論列表(有 條評論)

網頁對話 0871-63215311
原创视频传到什么网站可以赚钱