RiPro主题美化:给二级菜单增加彩色小圆圈
本期讲解如何给RiPro主题二级菜单添加彩色小圆圈效果,本教程以最新版RiPro8.7主题为例,其他版本即可参照此教程更改!
本教程不带文章数据统计,如需更加强大的美化可参考:《RiPro主题美化:添加文章数量统计和美化二级导航菜单小圆点》
1.首先我们来看看展示效果,效果如下图

2.,教程开始,我们首先添加css样式到我们主题(或子主题)的diy.css文件中,代码如下
/***二级导航前面小圆点***/
.lanse {
box-sizing: border-box;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #7a99f2;
}
.lvse {
box-sizing: border-box;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #70d7cf;
}
.huangse {
box-sizing: border-box;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #f5c745;
}
.hongse {
box-sizing: border-box;
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
top: 50%;
margin-left: 10px;
margin-top: -6px;
left: 0;
border-color: #61e1b9;
border: 3px solid #f1787f;
}
3.登录网站后台:“外观”→“菜单”,在二级目录按下图编辑,代码如下:
<span><i class="lanse"></i> 苹果CMS模板</span>
注意:苹果CMS为你的菜单名称,代码<i class="lanse"></i>与苹果CMS模板(你的菜单名之间有一个空格)
4.本样式共四个颜色,分别是:hongse(红色)、huangse(黄色)、lanse(蓝色)、lvse(绿色),使用时在每个菜单添加不同的颜色即可。
<span><i class="hongse"> 二级菜单</i></span>
<span><i class="lanse"></i> 二级菜单</i></span>
<span><i class="huangse"></i> 二级菜单</i></span>
<span><i class="lvse"></i> 二级菜单</i></span>
5.至此RiPro主题美化二级菜单增加彩色小圆圈效果就完成了,感谢大家对360模板吧的支持,更多精品网站建设教程、网站源码、网站模板,请访问www.360mb.net!
1. 本站所有源码、模板、插件等其他资源,都不包含技术服务请大家谅解!
2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
6. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
7. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考退款规则!
360模板吧 » RiPro主题美化:给二级菜单增加彩色小圆圈
2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
6. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
7. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考退款规则!
360模板吧 » RiPro主题美化:给二级菜单增加彩色小圆圈