RiPro主题美化:给二级菜单增加彩色小圆圈

作者 : admin 本文共1515个字,预计阅读时间需要4分钟 发布时间: 2021-02-8 共127人阅读

本期讲解如何给RiPro主题二级菜单添加彩色小圆圈效果,本教程以最新版RiPro8.7主题为例,其他版本即可参照此教程更改!

本教程不带文章数据统计,如需更加强大的美化可参考:《RiPro主题美化:添加文章数量统计和美化二级导航菜单小圆点

1.首先我们来看看展示效果,效果如下图

RiPro主题美化:给二级菜单增加彩色小圆圈插图
RiPro主题美化二级菜单彩色小圆圈

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!

 

360模板吧,累计帮助1000+用户成功建站,为草根创业提供助力!
360模板吧 » RiPro主题美化:给二级菜单增加彩色小圆圈

发表评论

开通VIP 享更多特权,建议使用QQ登录