在解決ul置中問題時想到的幾點_經驗交流

來源:互聯網
上載者:User
最近在做網站的時候碰到了一個問題:我用 ul 標籤和 li 標籤構建的導覽列想要在不確定 li 數量和 li, ul 寬度的情況下置中,但是給 ul 使用了 text-align:center 之後卻沒有起到應有的效果。

原來的頁面結構是:

複製代碼 代碼如下:


  • Firede

  • Style5




樣式表結構是:

複製代碼 代碼如下:


這樣本來也是沒有什麼問題的,但是因為要實現一個功能卻定義了一個ID(menu)和兩個CLASS(menu_ul, menu_li),這樣CSS檔案就臃腫了。

我之所以搞不定 ul 置中的問題,就是因為 CSS 寫的太亂太多,到最後一環套一環,自己都糊塗了,定義結構的代碼混雜在各種為了顯示效果而寫的代碼之中,於是便寫亂了。

在大腦發暈的情況下,不想修改了,於是重新寫了實現以上功能的代碼,頁面結構:

複製代碼 代碼如下:


  • Firede

  • Style5




完整的樣式表:

複製代碼 代碼如下:


像這樣,很簡單的就解決了 ul 不能置中的問題。回頭檢查My Code,原來是因為在 li 的樣式裡多加了一句 float:left,因為定義的 display 並不是 block,而是 inline,所以並不能浮動,造成了衝突,最終導致 ul 無法置中顯示。

總結一下,在寫網頁結構的時候,最好同一個功能模組使用相對統一的CSS名。如果可以定義一個樣式名解決問題的,盡量不要定義多個,代碼也要盡量簡潔。因為代碼臃腫了就很容易出問題,並且很難發現錯誤在什麼地方。多用些像 menu, menu ul, menu li, menu a, menu a:hover 這種一系列的樣式,而不是定義一些像 menu, menu_ul, menu_ul_li 這樣看似調理清晰、層次鮮明,但是實際上很混亂的名稱。

習慣是以往經驗在潛意識中總結出的精華,但是隨著技術的進步,很多以往的習慣都成為進一步提高的阻礙,這時候就要多參考一下標準了,看看以往的習慣是不是值得堅持下去。做網站也一樣,標準是能夠提高效率、改善效能並且指明方向的,Web標準化的設計更有助於我們提高維護網站的效率。
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.