CSS經(jīng)驗(yàn):ul列表不正確使用的趨勢(shì)

互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:35:06 作者：佚名

網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢(shì)。今天交流會(huì)上，分享前端的開(kāi)發(fā)經(jīng)驗(yàn)，有一條雖然很快帶過(guò)，但是我倒是印象蠻深刻的，就寫點(diǎn)小結(jié)來(lái)分享一

不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢(shì)。
今天交流會(huì)上，分享前端的開(kāi)發(fā)經(jīng)驗(yàn)，有一條雖然很快帶過(guò)，但是我倒是印象蠻深刻的，就寫點(diǎn)小結(jié)來(lái)分享一下吧。
不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢(shì)。似乎對(duì)于一個(gè)能被排成序列的東西，我們往往會(huì)習(xí)慣性地給它們用一個(gè)ul框起來(lái)，這樣會(huì)顯得很有語(yǔ)義。當(dāng)一個(gè)頁(yè)面里有太多的元素被這樣處理時(shí)，考慮一下如果要兼容到移動(dòng)終端的訪問(wèn)或者CSS加載不正常的時(shí)候，那么用戶的體驗(yàn)是非常不佳的，試想一下移動(dòng)終端上面最好是能把盡可能多的內(nèi)容呈現(xiàn)在極其有限的屏幕里，而ul在沒(méi)有樣式修飾的情況下，是會(huì)向下延伸的，對(duì)于超長(zhǎng)的頁(yè)面，用戶在移動(dòng)終端上向下滾動(dòng)頁(yè)面時(shí)，是會(huì)失去耐心的，對(duì)于網(wǎng)頁(yè)也是一樣，至少就我本人來(lái)說(shuō)，我在閱讀百度知道的一些資料時(shí)，會(huì)禁掉CSS樣式，偶爾也會(huì)碰到一些體驗(yàn)不佳的頁(yè)面。
其實(shí)我覺(jué)得inline的元素可以適當(dāng)?shù)夭捎?，特別是像做一個(gè)橫向的列表時(shí)，我們是不是可以考慮一下用內(nèi)聯(lián)來(lái)呈現(xiàn)視覺(jué)呢？好像這樣說(shuō)有點(diǎn)暈，那就用一些“粗糙”的實(shí)例來(lái)說(shuō)明一下問(wèn)題吧。要實(shí)現(xiàn)一個(gè)這樣的導(dǎo)航，大家都會(huì)想到用ul。

OK，那我們就先用ul列表來(lái)實(shí)現(xiàn)它（樣式方面不作太多深究，只為實(shí)現(xiàn)效果，所以寫得很隨意）
源代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title></title>
</head>
<body>
<style type ="text/css">
/* <![CDATA[ */
*{
list-style:none;
margin:0;
padding:0;
font-size:12px;
}
#navigation{
margin:10px auto;
width:510px;
overflow:hidden;
}
#navigation li{
float:left;
text-align:center;
width:50px;
border-left:1px solid #CCC;
margin-left:-1px;
}
#navigation li a,
#navigation li a:hover{
color:#999;
}
/* ]]> */
</style>
<ul id="navigation">
<li><a href="">菜單1</a></li>
<li><a href="">菜單2</a></li>
<li><a href="">菜單3</a></li>
<li><a href="">菜單4</a></li>
<li><a href="">菜單5</a></li>
<li><a href="">菜單6</a></li>
<li><a href="">菜單7</a></li>
<li><a href="">菜單8</a></li>
<li><a href="">菜單9</a></li>
<li><a href="">菜單10</a></li>
</ul>
</body>
</html>

嗯，很棒，很漂亮的代碼，在DOM查看器里發(fā)現(xiàn)真是太完美了：

再來(lái)假設(shè)一下樣式?jīng)]加載的時(shí)候，或者是用移動(dòng)終端來(lái)訪問(wèn)會(huì)怎樣：

看上去是垂直一列來(lái)呈現(xiàn)，如果一個(gè)頁(yè)面里再多幾個(gè)類似的ul，而它們本應(yīng)在視覺(jué)上是要作橫向排列的，而我們卻“亢奮”地使用了ul來(lái)架構(gòu)它們，那么有一天如果你心血來(lái)潮想用你的手機(jī)來(lái)訪問(wèn)自己寫的頁(yè)面，那真的是一件蠻痛苦的事情，你肯定會(huì)抱怨要看一個(gè)東西居然要滾動(dòng)那么久。。。

上一頁(yè)12 下一頁(yè) 閱讀全文

相關(guān)文章

CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法
這篇文章主要介紹了CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)
2020-02-21
CSS的ul和li實(shí)現(xiàn)橫向排列和去掉li的點(diǎn)
怎么實(shí)現(xiàn)ul的橫向排列和去掉li那個(gè)煩人的點(diǎn)，現(xiàn)在找到方法了，在此與大家分享下，感興趣的朋友可以參考下，以備不時(shí)之需
2013-10-23
css中ul li的背景小圖標(biāo)屬性設(shè)置的兩種情況
ul li的背景小圖標(biāo)屬性設(shè)置一般會(huì)有兩種情況：定義在ul里及l(fā)i里，這兩種定義在什么情況下使用，在下文給出詳細(xì)的介紹，經(jīng)常div+css布局的朋友不妨參考下，希望對(duì)大家有所幫
2013-09-27
創(chuàng)建CSS樣式文本導(dǎo)航條的最簡(jiǎn)單解決方法也許就是把所有的鏈接都放在一行文本里，這種方法看起來(lái)很合理也很直觀，接下來(lái)為大家介紹下具體的創(chuàng)建過(guò)程，感興趣的朋友可以參考
2013-09-21