CSS經(jīng)驗:ul列表不正確使用的趨勢
互聯(lián)網(wǎng) 發(fā)布時間:2009-04-02 19:35:06 作者:佚名
我要評論

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

OK,那我們就先用ul列表來實現(xiàn)它(樣式方面不作太多深究,只為實現(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)真是太完美了:

再來假設一下樣式?jīng)]加載的時候,或者是用移動終端來訪問會怎樣:

看上去是垂直一列來呈現(xiàn),如果一個頁面里再多幾個類似的ul,而它們本應在視覺上是要作橫向排列的,而我們卻“亢奮”地使用了ul來架構(gòu)它們,那么有一天如果你心血來潮想用你的手機來訪問自己寫的頁面,那真的是一件蠻痛苦的事情,你肯定會抱怨要看一個東西居然要滾動那么久。。。
#p#
不知道是標準害了大家還是大家害了標準,繼class和div被濫用后,ul列表也有被不正確使用的趨勢。
那么,同樣的效果,我自己有什么新的考慮呢?請看代碼:
<!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[ */
*{
margin:0;
padding:0;
font-size:12px;
}
#navigation{
display:block;
width:510px;
margin:10px auto;
overflow:hidden;
}
#navigation a{
display:block;
float:left;;
width:50px;
text-align:center;
color:#999;
border-left:1px solid #CCC;
margin-left:-1px;
}
/* ]]> */
</style>
<span id="navigation">
<a href="">菜單1</a>
<a href="">菜單2</a>
<a href="">菜單3</a>
<a href="">菜單4</a>
<a href="">菜單5</a>
<a href="">菜單6</a>
<a href="">菜單7</a>
<a href="">菜單8</a>
<a href="">菜單9</a>
<a href="">菜單10</a>
</span>
</body>
</html>
呵呵,這下看到了一個span,一串的a,li消失了,而且span是內(nèi)聯(lián)的元素,內(nèi)部裝a標簽也是符合(x)html的嵌套規(guī)范的。DOM結(jié)構(gòu)依然清晰:

沒有樣式的情況下,也很友好(下面第一個圖),而且內(nèi)聯(lián)元素是自適應寬度的,寬度不夠就折行(下面第二個圖),這就是我前面提到的,要盡可能多地往有限的屏幕里填充內(nèi)容,如果用li,那么一個一個就浪費了大片空間咯。


寫到這里,我覺得也把我的粗略的,不成熟的想法表達得差不多了,每一次的開發(fā),都要不斷地思考,不斷地傾聽別人的想法,我也只是把同事的一個想法變成了具體的實現(xiàn),做前端開發(fā)的,不僅需要技術,也需要創(chuàng)意,還需要不斷的思考。
相關文章
- 這篇文章主要介紹了CSS實現(xiàn)ul和li橫向排列的兩種方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學2020-02-21
- 怎么實現(xiàn)ul的橫向排列和去掉li那個煩人的點,現(xiàn)在找到方法了,在此與大家分享下,感興趣的朋友可以參考下,以備不時之需2013-10-23
- ul li的背景小圖標屬性設置一般會有兩種情況:定義在ul里及l(fā)i里,這兩種定義在什么情況下使用,在下文給出詳細的介紹,經(jīng)常div+css布局的朋友不妨參考下,希望對大家有所幫2013-09-27
DIV+CSS里,我們用得最多的就是ul li來顯示數(shù)據(jù),如新聞按鈕等,下面給大家一個css ul li的例子供學習
2023-05-21 UL、LI 無序列表實現(xiàn)純CSS網(wǎng)站導航菜單
三行的純CSS網(wǎng)站導航欄菜單,改改風格,讓大家感到新鮮一點,其它主要還是使用了Li列表,整體布局簡潔,美觀大方,適合大部分網(wǎng)站使用,顏色和菜單空隙可隨意調(diào)節(jié),希望大
2009-11-08
這篇文章主要介紹了CSS在UL LI的樣式用法,主要是UI上的應用,我們通過代碼分離的方式通過css完全控制css的樣式
2023-05-21