li标签去掉前面小黑点换成其他漂亮的样式
作者:admin
发布时间:2018-09-23 01:12:46
浏览:4957次
在网页设计中，很多时候都会用到li标签，如果使用ul下的li标签默认前面有一个小黑点，由于是固定的黑色，有时候难免和你的网页设计起来不搭，一般我们都使用直接去掉，或者用其他的样式，比如换成好看的图标，或者好看的样式，那么我们该如何来出来呢？
其实很简单，我们只需要在css里定义：
[cc lang="css"]
ul li{list-style: none;}
[/cc]
那么这个小黑点就会自动去除了！
如果我们想要在li标签前面加上好看的图标，那么，就在css里加上
[cc lang="css"]
ul li{
list-style-type:none;//这里是去掉小黑点
list-style-image: url(images/icon.gif);//这里替换成你的图标路径
}
[/cc]
当然啦，有的人觉得一小圆点还是挺好看的，我们想要改变它的颜色和大小即可。那么我们该如何做呢？其实也很简单！
[cc lang="css"]
ul li{list-style: none;}
ul li:before {
content: "";
float: left;
width: 10px;
height: 10px;
margin: 10px 0;
background-color: #3498db;
border-radius: 50%;
}
//如果你里面有超链接，还可能会用到下面的样式
ul li a {
display: block;
height: 32px;
font-size: 14px;
color: #7c7c7c;
line-height: 32px;
text-indent: 10px;
}
[/cc]
那如果我们想在前面加上连续数字样式呢？
[cc lang="css"]
ul li{counter-increment: mycounter;}
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);
}
[/cc]
好了，各种样式就这么轻松的实现了！喜欢的就直接复制去使用吧！
如需转载请保留本文出处: https://www.zhe94.com/329.html
