css 美化有序标签

寻梦xunm| 859| 收集

3年前

超过1263天温馨提示

本文最后更新于2021年06月07日，已超过1263天没有更新，若内容或图片失效，请留言反馈。

示例及效果如下：

我们在 md 中书写的有序标签，会在渲染成 html 时自动转换为

标签，所以只需要在上述 _core/style.less 中增加如下样式，或者直接在 main.css 中增加如下代码：

ol{
  list-style: none;  /* 隐藏原来的 1. 2. 等序号样式 */
  counter-reset: ol-li;
}
 
ol li:before {
    display: block;
    float: left;
    width: 19px;   /* 宽度和高度需要根据自己的字体大小进行修正 */
    height: 19px;
    line-height: 19px;
    margin: 4px 12px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    font-style: normal;
    background-color: #49b1f5;
    border-radius: 50%;
    text-align: center;
    content: counter(ol-li);
    counter-increment: ol-li;
    transition: all .5s;
}

请注意，上面的修改作用于博客所有页面的有序标签，而一些其它有序标签的使用会受到该样式的影响，因此正常情况下，需要对该样式限定范围，比如限制在文章页面中生效。文章的 HTML 内容渲染都是在一个 class 或者 id 为 post-ctx 的 DOM 元素中的，如以下所示：

<div class="post-ctx">
<ol>
<li>美化样式一</li>
</ol>
</div>

因此你需要根据你的主题找到这个父 DOM 元素，然后增加该 class 作用域限制，以下修改内容均同理，不再赘述。

.post-ctx ol{
  ...
}
 
.post-ctx ol li:before {
    display: block;
    ...
}

然后通过编译 less 并压缩 main.css 得到 main.min.css 后在页面中查看样式效果。更进一步的，还可以设置鼠标放置在有序标签文本上旋转，继续增加如下样式：

ol li:hover::before{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

文章来源于：https://bestzuo.cn/posts/halo-beauty.html

css 美化标签列表有序

0 赞 or 打赏

喜欢就打赏一点