CSS經(jīng)驗(yàn):ul列表不正確使用的趨勢(shì)
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2009-04-02 19:35:06 作者：佚名 
我要評(píng)論
我要評(píng)論網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢(shì)。
今天交流會(huì)上，分享前端的開發(fā)經(jīng)驗(yàn)，有一條雖然很快帶過，但是我倒是印象蠻深刻的，就寫點(diǎn)小結(jié)來分享一
不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢(shì)。
那么，同樣的效果，我自己有什么新的考慮呢？請(qǐng)看代碼：
<!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>
呵呵，這下看到了一個(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)意，還需要不斷的思考。
相關(guān)文章
CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法
這篇文章主要介紹了CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2020-02-21CSS的ul和li實(shí)現(xiàn)橫向排列和去掉li的點(diǎn)
怎么實(shí)現(xiàn)ul的橫向排列和去掉li那個(gè)煩人的點(diǎn)，現(xiàn)在找到方法了，在此與大家分享下，感興趣的朋友可以參考下，以備不時(shí)之需2013-10-23css中ul li的背景小圖標(biāo)屬性設(shè)置的兩種情況
ul li的背景小圖標(biāo)屬性設(shè)置一般會(huì)有兩種情況：定義在ul里及l(fā)i里，這兩種定義在什么情況下使用，在下文給出詳細(xì)的介紹，經(jīng)常div+css布局的朋友不妨參考下，希望對(duì)大家有所幫2013-09-27
DIV+CSS里，我們用得最多的就是ul li來顯示數(shù)據(jù)，如新聞按鈕等,下面給大家一個(gè)css ul li的例子供學(xué)習(xí)
2023-05-21 UL、LI 無序列表實(shí)現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單
三行的純CSS網(wǎng)站導(dǎo)航欄菜單，改改風(fēng)格，讓大家感到新鮮一點(diǎn)，其它主要還是使用了Li列表，整體布局簡(jiǎn)潔，美觀大方，適合大部分網(wǎng)站使用，顏色和菜單空隙可隨意調(diào)節(jié)，希望大
2009-11-08 
這篇文章主要介紹了CSS在UL LI的樣式用法，主要是UI上的應(yīng)用，我們通過代碼分離的方式通過css完全控制css的樣式
2023-05-21