这个效果很多站点多有，不是小伙伴在问是怎么做到的，今天我们就来学习一下这个效果是怎么完成的，RiPro主题美化:添加文章数量统计和美化二级导航菜单小圆点，下面我们先看看效果：
1.找到\ripro（或子主题）\functions.php 文件，在最下面添加下载包中的代码：
2.找到\ripro（或子主题）\assets\css\diy.css 在最下面添加以下CSS样式：
/**二级菜单文章统计**/
.num {
position: absolute;
top: 8px;
left: 68%;
color: #555;
border-radius: 8px;
text-align: center;
font-family: Calibri;
background: #eee;
font-size: 12px;
min-width: 32px;
}
/***二级导航前面小圆点***/
.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="hongse"> 二级菜单</i></span>
<span><i class="lanse"></i> 二级菜单</i></span>
<span><i class="huangse"></i> 二级菜单</i></span>
<span><i class="lvse"></i> 二级菜单</i></span>说明：hongse（红色） lanse（蓝色） huangse（黄色） lvse（绿色）四款样式，望大家按自己喜欢样式进行修改！
公告： 本站提供的源码、模板、插件等等其他资源，除资源本身问题外，都不包含免费技术服务，如需技术支持需支付100+技术服务费，具体依客服说明为准，请大家谅解！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
