当前位置:首页>百宝箱>正文

li标签去掉前面小黑点换成其他漂亮的样式

发布时间:2018-09-23 01:12:46 作者:小超越君

在网页设计中,很多时候都会用到li标签,如果使用ul下的li标签默认前面有一个小黑点,由于是固定的黑色,有时候难免和你的网页设计起来不搭,一般我们都使用直接去掉,或者用其他的样式,比如换成好看的图标,或者好看的样式,那么我们该如何来出来呢?

其实很简单,我们只需要在css里定义:

1
ul li{list-style: none;}

那么这个小黑点就会自动去除了!
如果我们想要在li标签前面加上好看的图标,那么,就在css里加上

1
2
3
4
ul li{
list-style-type:none;//这里是去掉小黑点
list-style-image: url(images/icon.gif);//这里替换成你的图标路径
}

当然啦,有的人觉得一小圆点还是挺好看的,我们想要改变它的颜色和大小即可。那么我们该如何做呢?其实也很简单!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
}

那如果我们想在前面加上连续数字样式呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
}

好了,各种样式就这么轻松的实现了!喜欢的就直接复制去使用吧!

文章内容欢迎转载,请保留本文链接:https://www.zhe94.com/329.html

专注高端湛江网站建设及湛江SEO优化服务 立即咨询