相信大家都遇到过这样一个老生常谈的问题,就是如果当我们所要做的菜单是侧边栏,垂直方向自上而下的排列的菜单栏,我们在做的时候通常的构想是这样的,就是在每两个菜单之间添加分割线,通常的想法就是说给每个菜单添加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>

  显然,我们呢看到,侧边栏菜单彼此之间有分隔线,但菜单“关于我们”的底部则没有边框线。

如何实现侧边栏菜单之间的分割线——不用border-bottom的更多相关文章

  1. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  2. ListView(1)几个重要属性,关闭滚动到顶部,底部的动画,item之间的分割线,背景等

    见表: android:stackFromBottom="true" 设置该属性之后你做好的列表就会显示你列表的最下面,值为true和false android:transcrip ...

  3. 好用的侧边栏菜单/面板jQuery插件

    我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...

  4. 近20个绚丽实用的jQuery/CSS3侧边栏菜单(转载)

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  5. Android App 侧边栏菜单的简单实现

    效果图 Layout 注意事项 想要实现侧边栏,需要配合使用DrawerLayout.因为会用到嵌套布局,所以根布局不能是 ConstraintLayout,最好使用 LinearLayout 布局. ...

  6. Java初学者作业——为某超市设计管理系统,需要在控制台展示系统菜单,菜单之间可以完成跳转。

    返回本章节 返回作业目录 需求说明: 为某超市设计管理系统,需要在控制台展示系统菜单,菜单之间可以完成跳转. 实现思路: 定义mainMenu方法,用于显示主菜单. 主菜单主要负责显示4个选项,分别是 ...

  7. TornadoFx实现侧边栏菜单效果

    原文地址:TornadoFx实现侧边栏菜单效果 - Stars-One的杂货小窝 之前年前研究的东西,给蓝奏批量下载器重构了页面,实现了侧边栏菜单的效果,稍微总结下把 效果 实现 首先,要说明的是,总 ...

  8. 代码:PC 链接列表面板border的一种做法(每行之间有分割线)

    PC 链接列表面板,border的一种做法 做页面经常遇到一种问题,上面是标题,下面是单行链接列表.为了保证后台套页面方便,所有列表项必须完全一样.但我们无法解决第一行或最后一行多出来的分割线. 使用 ...

  9. vue+elementui搭建后台管理界面(3侧边栏菜单)

    上一节搭好了主框架,但是标签页和侧边栏只是分别展示了各自的菜单,如何将二者联动起来? 定义路由规则:当有 children 属性时,从 children 里取出 path 填充到侧边栏,如: { pa ...

随机推荐

  1. linux系统的任务计划crontab使用详解

    linux系统的任务计划crontab使用详解 其实大部分系统管理工作都是通过定期自动执行某一个脚本来完成的,那么如何定期执行某一个脚本呢?这就要借助linux的cron功能了. 关于cron任务计划 ...

  2. Flash Download Failed-"Cortex-M3"

    rror:Flash Download Failed-"Cortex-M3"出现一般有两种情况: 1.SWD模式下,Debug菜单中,Reset菜单选项(Autodetect/HW ...

  3. 跨应用程序域(AppDomain)的单例(Singleton)实现

    转载自: 跨应用程序域(AppDomain)的单例(Singleton)实现 - CorePlex代码库 - CorePlex官方网站,Visual Studio插件,代码大全,代码仓库,代码整理,分 ...

  4. Python地址簿

    #!/usr/bin/python #coding=UTF-8 # FileName:address.py # Python地址簿 import cPickle as p; import os; im ...

  5. 详细解密FineReport中的报表执行过程

    在报表开发工具FineReport中,报表的执行过程大体可分为两步:1.报表计算:2.页面转换. 报表计算过程:先读取我们的sql语句,将完整的sql语句传至数据库服务器,由数据库返回数据给报表服务器 ...

  6. 玩转Windows Azure存储服务——网盘

    存储服务是除了计算服务之外最重要的云服务之一.说到云存储,大家可以想到很多产品,例如:AWS S3,Google Drive,百度云盘...而在Windows Azure中,存储服务却是在默默无闻的工 ...

  7. CF149D. Coloring Brackets[区间DP !]

    题意:给括号匹配涂色,红色蓝色或不涂,要求见原题,求方案数 区间DP 用栈先处理匹配 f[i][j][0/1/2][0/1/2]表示i到ji涂色和j涂色的方案数 l和r匹配的话,转移到(l+1,r-1 ...

  8. 石子合并[DP-N3]

    题目描述 在一个园形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得分. 试设计出1个算法,计算出将N堆石子合并成1 ...

  9. Markdown(MD)写作

    简洁的写作 目前正逐步使用Makedown来写博客或其它的文档,本文记录一下Markdown的相关知识 Markdown语法 标题 # 内容 (一级标题) ## 内容 (二级标题) ### 内容 (三 ...

  10. u3d_shader_surface_shader_4

    Rim Lighting  轮廓自发光 一:疑问:1.总感觉在编辑器Scene状态下,脚本计算的ViewDir是我漫游的Cam,而不是项目中的MainCam啊! 然后就会造成Scene状态下轮廓自发光 ...