我们经常可以在一些app或者网页见到新消息提醒的红色小圆点,非常的简洁且醒目。对于大多数站点,我们是每日一更或数更,我们完全可以使用小圆点放在我们的导航菜单上,提醒访问者最近有文章更新的是哪一个分类。
- 参考页面:详情
具体操作
在主题根目录下的style.css底部添加以下代码:
.n-mark{
position: absolute;
background-color: #f16b6f;
top: 20px;
left: 1px;
width: 10px;
height: 10px;
border-radius: 100%;
}
- background-color:背景颜色
- top:离顶部距离
- left:离左边距离
可自行调整相关参数。
调用方式
在菜单中依据如下方法调用:
示例页面<i class="n-mark"></i>
效果图
