网页导航栏制作时，菜单项之间常用1像素细线做分隔，如上图。
给菜单栏菜单项添加分隔线代码如下：
/* 给菜单栏菜单项添加分隔线 */
.nav li {
border-right: 1px solid #666;
}
最后一个菜单项右边就不需要这个边框线了，如何处理呢？
去除最后一个菜单项右边的分隔线，代码
/* 移除分隔线 */
.nav li:last-child {
border-right: none;
}
今天中国网页设计教给大家使用伪类 :not() 将样式只应用到你需要的元素上：
/* 使用:not()去除导航上不需要的边框*/
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
.nav li:not(:last-child) 的意图特别清晰，菜单项最后一个将不使用border-right: 1px solid #666; 样式。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2254.html
一个精美的滑出式水平导航特效，打开页面只能看到文本链接，用户将鼠标悬停于标签上时，该导航菜单项目会滑出。 预览 下载源码 1、HTML结构 导航实现仅用一个简单的无序列表 <ul id=”navigation”> <li class=”home”><a href=””><span>Home</sp…
ScrollPicLeft.js实现的图片的前后切换效果，适用于网页中的证书展示、推荐商品之类的栏目。 功能：可以手动点击前后切换箭头按钮，进行图片的翻页，浏览上一张，下一张的效果。 特点：代码精简，不需要使用JQuery，功能强大，使用非常的简单，便利。！ 在网页引入ScrollPicLeft.js <script type=”text/javasc…
在<head></head>之间引入 <link rel=”stylesheet” type=”text/css” href=”css/font-awesome.css”> <link rel=”stylesheet” href=”css/style.css”> 在<body></body&g…
实例名称：立体动画按钮、切换开关在线预览：https://codepen.io/chrisgannon/pen/ZaPmKp HTML代码： <div id=”app”></div> CSS代码： body { background-color:#FFFCF9; overflow: hidden; text-align:center;…
在《中国省、市区二级联动下拉选择框-JS源码》文章中我们分享了省、市区二级联动的JS实现代码，今天125建站网给大家分享一款中国省、市、区县三级联动的代码，通过jQuery插件实现，调用非常简洁。 HTML结构 基本的HTML结构是使用一个<div>容器来包裹一组<select>元素。 <div><!– conta…
用户点击导航或菜单上不同的栏目，被选中的导航栏目会变换样式，出现图片或背景颜色的变化，用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前（活动）菜单样式变化，导航菜单模式用的是背景颜色，你可以换成背景图片以符合建站需要。 当前（活动）菜单样式变化实现原理 在html代码中给首页（默认选中）加上class名cur <a href=…
微信扫一扫 
支付宝扫一扫