li标签美化让页面的li标签更好看

微信扫一扫,分享到朋友圈

li标签美化让页面的li标签更好看
收藏 00

在 HTML 中 <li> 标签可以用来定义列表,使用 <li> 标签定义的列表可以是个无序列表也可以是有序列表。

在写文章时候li标签经常用到,如果使用ul下的li标签默认前面有一个小黑点,由于是固定的黑色,有时候难免和你的网页设计起来不搭,这里分享几种精美li标签样式。

案例1

去掉li标签前面的黑点

ul,li{list-style:none;}

案例2

  .entry-content ul li:before {
    display: block;
    float: left;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 0 12px 0 0;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    font-style: normal;
    background-color: #c2c2c2;
    text-align: center;
    content: counter(mycounter);
}
.entry-content ul li{counter-increment: mycounter;list-style-type:none}

案例3

li {
    list-style: none;
}

ul>li {
    position: relative;
    padding-left: 20px;
    line-height: 40px;
}

ul>li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: gold;
}

 

一个热爱互联网的咸鱼
上一篇

深度解析后续搜索词对搜索引擎排名的影响

下一篇

全职站长三个月的一些感悟

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

热门

    抱歉,30天内未发布文章!
返回顶部