如何實現側邊欄菜單之間的分割線——不用border-bottom


  相信大家都遇到過這樣一個老生常談的問題,就是如果當我們所要做的菜單是側邊欄,垂直方向自上而下的排列的菜單欄,我們在做的時候通常的構想是這樣的,就是在每兩個菜單之間添加分割線,通常的想法就是說給每個菜單添加border-bottom:1px solid #fff;但是這樣做有個問題,因為每兩個菜單之間需要添加分割線,那么這樣做的結果將導致最后一個菜單的邊框也會存在邊框線,那么我們不得不給最后一個 菜單添加邊框線,但是問題有來了,在我們的后台管理系統,比如織夢CMS后台管理系統,我們需要給新的頁面添加側邊欄,而添加的方法就是添加側邊欄模板,而隨着需求的不斷提升和改進,有些側邊欄中的某個菜單勢必會因為需求的改變而變得不是那么的必要,比如最下面的菜單,如果刪除了,那么倒數第二個菜單的邊框線還是會存在在那里,這與我們設計初衷是相悖的,而如果我們再在模板中給側邊欄添加菜單,那么添加之后的菜單也會存在多余的邊框線,問題來了,怎么消除?

  現象:

  

  大家的眼力可能看的不大清楚,其實在“關於我們”菜單的底部有一條1px的細線,使用的方法就是常規的border-bottom:1px solid #808080;然后我們在給最后一個<li>單獨添加一個類,並加上border-bottom:0px;消除了底部線。

  后來經過本人在撰寫中的多次調試時和改進,終究——還是未能想出一個更好,更巧妙的方法

  於是,一次偶然的機會,我進入了http://www.cnblogs.com/wangfupeng1988/p/4282954.html這位大神的博客,發現了解決方法,就是:

  .inside_leftnav ul li+li{
    border-top: 1px solid #A7A7A7;
  }

  html代碼如下:

  <div class="inside_leftnav">
    <p class="L_title">品牌中心</p>
    <ul class="menuul1">
      <li class="menuli1 select">
        <a class="menuname1" href="">品牌價值</a>
      </li>
      <li class="menuli1 select">
        <a class="menuname1 menuchange" href="">商業模式&nbsp<span class="arrow arrow2"></span></a>
      </li>
      <li class="menuli1 select">

        <a class="menuname1 final" href="">關於我們</a>

      </li>
    </ul>
  </div>

  顯然,我們呢看到,側邊欄菜單彼此之間有分隔線,但菜單“關於我們”的底部則沒有邊框線。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM