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>

效果图

人已赞赏
WordPress美化

WordPress美化 - 为菜单添加个性角标

2020-8-18 13:03:30

WordPress美化

WordPress美化 - 导航菜单hot/new小图片

2020-8-20 8:00:00

⚠️
恩月阁文章由星九进行编写或整理,部分内容来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
若无意中侵害到您的权益,请发送邮件至 xingjiu@nuue.cn 或点击右侧 私信:星九 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索