一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

wordpress导航菜单添加分隔符的例子

时间:2022-06-25 18:49:55 编辑:袖梨 来源:一聚教程网

wordpress导航菜单分隔符一般采用背景图片的方式实现,但是,这样一来会限制每个菜单的宽度,而且会影响网页打开速度。也有用js来实现的。这里,我为大家介绍一种比较简单的方法——通过CSS来实现wordpress导航菜单分隔符。

效果:菜单之间有分隔符, 整个菜单最前或最后不要显示分隔符
只需通过下面的css代码就可以完成。

.read_footer_menu li{ float:left;font-size:14px; line- margin-bottom:15px;padding:0 8px 0 8px; border-left:1px solid #888888; }
.read_footer_menu li:first-child{ padding:0 8px 0 0px; border-left:0px solid #888888; }

第一句:给每一个菜单 li 添加一个左边框,并且将 li 的行高小于字体的高度,
第二句:通过li:first-child 给第一个菜单取消左边框

热门栏目