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！