分类
WordPress美化

WordPress美化 – 导航菜单更新小圆点

我们经常可以在一些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>

效果图

星九

时间会带来惊喜~

发表评论

邮箱地址不会被公开。 必填项已用*标注

18 − 14 =