今天交流會(huì)上，分享前端的開發(fā)經(jīng)驗(yàn)，有一條雖然很快帶過，但是我倒是印象蠻深刻的，就寫點(diǎn)小結(jié)來分享一下吧。
不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢(shì)。似乎對(duì)于一個(gè)能被排成序列的東西，我們往往會(huì)習(xí)慣性地給它們用一個(gè)ul框起來，這樣會(huì)顯得很有語(yǔ)義。當(dāng)一個(gè)頁(yè)面里有太多的元素被這樣處理時(shí)，考慮一下如果要兼容到移動(dòng)終端的訪問或者CSS加載不正常的時(shí)候，那么用戶的體驗(yàn)是非常不佳的，試想一下移動(dòng)終端上面更好是能把盡可能多的內(nèi)容呈現(xiàn)在更其有限的屏幕里，而ul在沒有樣式修飾的情況下，是會(huì)向下延伸的，對(duì)于超長(zhǎng)的頁(yè)面，用戶在移動(dòng)終端上向下滾動(dòng)頁(yè)面時(shí)，是會(huì)失去耐心的，對(duì)于網(wǎng)頁(yè)也是一樣，至少就我本人來說，我在閱讀百度知道的一些資料時(shí)，會(huì)禁掉CSS樣式，偶爾也會(huì)碰到一些體驗(yàn)不佳的頁(yè)面。
其實(shí)我覺得inline的元素可以適當(dāng)?shù)夭捎?，特別是像做一個(gè)橫向的列表時(shí)，我們是不是可以考慮一下用內(nèi)聯(lián)來呈現(xiàn)視覺呢？好像這樣說有點(diǎn)暈，那就用一些“粗糙”的實(shí)例來說明一下問題吧。要實(shí)現(xiàn)一個(gè)這樣的導(dǎo)航，大家都會(huì)想到用ul。
OK，那我們就先用ul列表來實(shí)現(xiàn)它（樣式方面不作太多深究，只為實(shí)現(xiàn)效果，所以寫得很隨意）
源代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" 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>
<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)真是太**了：
">
<html xmlns="" 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>
<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>
呵呵，這下看到了一個(gè)span，一串的a，li消失了，而且span是內(nèi)聯(lián)的元素，內(nèi)部裝a標(biāo)簽也是符合(x)html的嵌套規(guī)范的。DOM結(jié)構(gòu)依然清晰：
沒有樣式的情況下，也很友好（下面前幾個(gè)圖），而且內(nèi)聯(lián)元素是自適應(yīng)寬度的，寬度不夠就折行（下面**個(gè)圖），這就是我前面提到的，要盡可能多地往有限的屏幕里填充內(nèi)容，如果用li，那么一個(gè)一個(gè)就浪費(fèi)了大片空間咯。
寫到這里，我覺得也把我的粗略的，不成熟的想法表達(dá)得差不多了，每一次的開發(fā)，都要不斷地思考，不斷地傾聽別人的想法，我也只是把同事的一個(gè)想法變成了具體的實(shí)現(xiàn)，做前端開發(fā)的，不僅需要技術(shù)，也需要?jiǎng)?chuàng)意，還需要不斷的思考。
網(wǎng)站建設(shè)之在網(wǎng)站設(shè)計(jì)中要慎用ul列表，希望對(duì)您有用。
