最近在做網(wǎng)站的時(shí)候碰到了一個(gè)問(wèn)題：我用 ul 標(biāo)簽和 li 標(biāo)簽構(gòu)建的導(dǎo)航欄想要在不確定 li 數(shù)量和 li, ul 寬度的情況下居中，但是給 ul 使用了 text-align:center 之后卻沒(méi)有起到應(yīng)有的效果。

原來(lái)的頁(yè)面結(jié)構(gòu)是：


樣式表結(jié)構(gòu)是：


這樣本來(lái)也是沒(méi)有什么問(wèn)題的，但是因?yàn)橐獙?shí)現(xiàn)一個(gè)功能卻定義了一個(gè)ID（menu）和兩個(gè)CLASS（menu_ul, menu_li），這樣CSS文件就臃腫了。

我之所以搞不定 ul 居中的問(wèn)題，就是因?yàn)?nbsp;CSS 寫(xiě)的太亂太多，到最后一環(huán)套一環(huán)，自己都糊涂了，定義結(jié)構(gòu)的代碼混雜在各種為了顯示效果而寫(xiě)的代碼之中，于是便寫(xiě)亂了。

在大腦發(fā)暈的情況下，不想修改了，于是重新寫(xiě)了實(shí)現(xiàn)以上功能的代碼，頁(yè)面結(jié)構(gòu)：


完整的樣式表：


像這樣，很簡(jiǎn)單的就解決了 ul 不能居中的問(wèn)題?；仡^檢查我的代碼，原來(lái)是因?yàn)樵?nbsp;li 的樣式里多加了一句 float:left，因?yàn)槎x的 display 并不是 block，而是 inline，所以并不能浮動(dòng)，造成了沖突，最終導(dǎo)致 ul 無(wú)法居中顯示。

總結(jié)一下，在寫(xiě)網(wǎng)頁(yè)結(jié)構(gòu)的時(shí)候，最好同一個(gè)功能模塊使用相對(duì)統(tǒng)一的CSS名。如果可以定義一個(gè)樣式名解決問(wèn)題的，盡量不要定義多個(gè)，代碼也要盡量簡(jiǎn)潔。因?yàn)榇a臃腫了就很容易出問(wèn)題，并且很難發(fā)現(xiàn)錯(cuò)誤在什么地方。多用些像 menu, menu ul, menu li, menu a, menu a:hover 這種一系列的樣式，而不是定義一些像 menu, menu_ul, menu_ul_li 這樣看似調(diào)理清晰、層次鮮明，但是實(shí)際上很混亂的名稱(chēng)。

習(xí)慣是以往經(jīng)驗(yàn)在潛意識(shí)中總結(jié)出的精華，但是隨著技術(shù)的進(jìn)步，很多以往的習(xí)慣都成為進(jìn)一步提高的阻礙，這時(shí)候就要多參考一下標(biāo)準(zhǔn)了，看看以往的習(xí)慣是不是值得堅(jiān)持下去。做網(wǎng)站也一樣，標(biāo)準(zhǔn)是能夠提高效率、改善性能并且指明方向的，Web標(biāo)準(zhǔn)化的設(shè)計(jì)更有助于我們提高維護(hù)網(wǎng)站的效率。

最新評(píng)論