如何实现侧边栏菜单之间的分割线——不用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="">商业模式 <span class="arrow arrow2"></span></a>
</li>
<li class="menuli1 select">
<a class="menuname1 final" href="">关于我们</a>
</li>
</ul>
</div>
显然,我们呢看到,侧边栏菜单彼此之间有分隔线,但菜单“关于我们”的底部则没有边框线。
如何实现侧边栏菜单之间的分割线——不用border-bottom的更多相关文章
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- ListView(1)几个重要属性,关闭滚动到顶部,底部的动画,item之间的分割线,背景等
见表: android:stackFromBottom="true" 设置该属性之后你做好的列表就会显示你列表的最下面,值为true和false android:transcrip ...
- 好用的侧边栏菜单/面板jQuery插件
我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单(转载)
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- Android App 侧边栏菜单的简单实现
效果图 Layout 注意事项 想要实现侧边栏,需要配合使用DrawerLayout.因为会用到嵌套布局,所以根布局不能是 ConstraintLayout,最好使用 LinearLayout 布局. ...
- Java初学者作业——为某超市设计管理系统,需要在控制台展示系统菜单,菜单之间可以完成跳转。
返回本章节 返回作业目录 需求说明: 为某超市设计管理系统,需要在控制台展示系统菜单,菜单之间可以完成跳转. 实现思路: 定义mainMenu方法,用于显示主菜单. 主菜单主要负责显示4个选项,分别是 ...
- TornadoFx实现侧边栏菜单效果
原文地址:TornadoFx实现侧边栏菜单效果 - Stars-One的杂货小窝 之前年前研究的东西,给蓝奏批量下载器重构了页面,实现了侧边栏菜单的效果,稍微总结下把 效果 实现 首先,要说明的是,总 ...
- 代码:PC 链接列表面板border的一种做法(每行之间有分割线)
PC 链接列表面板,border的一种做法 做页面经常遇到一种问题,上面是标题,下面是单行链接列表.为了保证后台套页面方便,所有列表项必须完全一样.但我们无法解决第一行或最后一行多出来的分割线. 使用 ...
- vue+elementui搭建后台管理界面(3侧边栏菜单)
上一节搭好了主框架,但是标签页和侧边栏只是分别展示了各自的菜单,如何将二者联动起来? 定义路由规则:当有 children 属性时,从 children 里取出 path 填充到侧边栏,如: { pa ...
随机推荐
- 010 使用netmap API接管网卡,接收数据包,回应ARP请求
一.本文目的: 上一节中,我们已经在CentOS 6.7 上安装好了netmap,也能接收和发送包了,这节我们来调用netmap中的API,接管网卡,对网卡上收到的数据包做分析,并回应ARP请求. 二 ...
- C语言中链表任意位置怎么插入数据?然后写入文件中?
链表插入示意图:(图是个人所画)因为链表指针指来指去,难以理解,所以辅助画图更加方便. 插入某个学号后面图: 定义的结构体: struct student { ]; //学生学号 ]; //学生姓名 ...
- BootStrap学习(2)
使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...
- linux 文件系统解析及相关命令
简介 文件系统就是分区或磁盘上的所有文件的逻辑集合. 文件系统不仅包含着文件中的数据而且还有文件系统的结构,所有Linux 用户和程序看到的文件.目录.软连接及文件保护信息等都存储在其中. 不同Lin ...
- 150923-碎觉要-PHP,Linux
今天懒懒的,还是每天都懒懒的. 早上下午都没有更.还好还有晚上更的想法和行动. 总结如下 1.PHP --wamp的一点配置问题,把根文件改为自己所要的文件夹.改动Apache的配置文件以及更改wam ...
- MMORGP大型游戏设计与开发(客户端架构 part13 of vegine)
一些数据是需要不断改动的,程序不可能因为这些改动而不厌其烦的去改动代码,早期的这种做法就成了程序员们最悲哀的痛苦.自从有了数据管理后,程序的世界逐渐清晰,这些烦恼也不再出现,不过若是要很好的管理数据可 ...
- [Top-Down Approach] Chatper 4 Notes
4.2 Virtual Circuit and Datagram Networks VC Set up connection Exchange data Free the connection The ...
- 洛谷⑨月月赛Round2 P3392涂国旗[DP]
题目描述 某国法律规定,只要一个由N*M个小方块组成的旗帜符合如下规则,就是合法的国旗.(毛熊:阿嚏——) 从最上方若干行(>=1)的格子全部是白色的. 接下来若干行(>=1)的格子全部是 ...
- [No00001F]阅读速度如何快一点、再快一点?-不知道读啥?试试这些电影剧本!
少侠萌好,还记得包大人给大家推荐过的语感培养大法——“电影剧本阅读法”吗?最近,包大人陆陆续续收到了好几位少侠的实践报告,他们中不少人抱怨:“大人,你明明说过电影剧本篇幅短.用词简单的,可为什么我还是 ...
- android 调用系统的音乐和视频播放器
package com.eboy.testsystemaudiovideo; import android.app.Activity;import android.content.Intent;imp ...