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

我们可以在一些资源站点看到导航菜单的位置会有一些hot或new的小标签提醒,既能提醒访客那里是最近更新的栏目,又可以对导航栏起到一定的美化作用。

具体步骤

在主题根目录下的style.css底部添加以下代码:

.n_hot {
display: block;
    animation: hot 1s infinite linear;
    -moz-animation: hot 1s infinite linear;
    -webkit-animation: hot 1s infinite linear;
    -o-animation: hot 1s infinite linear;
    width: 25px;
    height: 14px;
    background: url(http://wp.nuue.cn/wp-content/uploads/2020/07/2.png) no-repeat center;
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -12.5px;
}
  • background:背景图片
  • top:顶部距离
  • left:左边距离

代码中的链接更换为自己站点图片的链接即可,各位可自行更换背景图片达到不同的效果。

代码调用

示例页面<i class="n_hot"></i>

参考图片

人已赞赏
WordPress美化

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

2020-8-19 8:00:00

WordPress美化

WordPress美化 - 自定义网页鼠标指针样式

2020-8-26 8:00:00

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