在 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; }