css设置无序列表的方法

这篇文章主要介绍css设置无序列表的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联主要从事网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务东丽,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

css怎么样设置无序列表的样式你知道吗？这里有无序列表的详细应用，去掉这些图标之类的，还介绍了去掉小圆点给添加的图片的介绍，大家可以自己试试看。现在就让我们一起来看看这篇文章吧

首先我们先来看看无序列表：

我们都知道无序列表通常都是使用小圆点代替的，但是有些时候用小圆点不好看，为了增加美观性，在css样式中有几种样式设计的方法第一种：当然是无序列表中的默认小圆点
第二种：是把小圆点改为小方块显示
第三种：是把小圆点改为空心圆显示
第四种：是把小圆点给去掉，这个应该是比较常用的。
第五种：也是不太常用的，就是把无序列表编程有序列表的方法，前面加数字

现在我们来看看关于css这五种样式的完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创新互联</title>
<style type="text/css">
.zhe1{list-style-type:disc;}
.zhe2{list-style-type:square;}
.zhe3{list-style-type:circle;}
.zhe4{list-style-type:none;}
.zhe5{list-style-type:decimal;}
</style>
</head>
<body>
<ul>
<li class="zhe1">我是默认小圆点</li>
<li class="zhe2">我是小方块</li>
<li class="zhe3">我是空心圆</li>
<li class="zhe4">我是没有标记的</li>
<li class="zhe5">我是要有序列表</li>
</ul>
</body>
</html>

这是一个比较简单的代码了，我们先来看看在浏览器中的显示效果吧：

css设置无序列表的方法

这五种效果全部显示出来了。是不是很简单呢。（想看更多css样式的知识，就到创新互联css参考手册栏目学习）

现在我们来说说css对列表样式的总结：

list-style-image：url图片地址属性使用图像来替换列表项的标记；
list-style-position 属性设置在何处放置列表项标记；还有一个inside的值：放在文本以内。
list-style 复合写法

这个的最后一种是现在比较常用的，如果你不想写太多代码的话，可以使用这种符合写法，简单的完成这些我们看个实例：

<style type="text/css">
.zhe1,.zhe2,.zhe3,.zhe4,.zhe5{list-style:none;}
</style>

这个css样式，加上这个，就能去掉那些不想要的东西了，还能写入别的属性，就这个我们来看看效果吧：

css设置无序列表的方法

效果就是很明显了是不是，我们就这样把这些列表都去掉了，当然这只是最基础的符合写法，还能写入别的属性样式，这样才能显示节省更多的时间。

以上是css设置无序列表的方法的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

名称栏目：css设置无序列表的方法
浏览地址：https://www.cdcxhl.com/article28/gedocp.html

成都网站建设公司_创新互联，为您提供Google、网站制作、网站营销、手机网站建设、全网营销推广、

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容

​css设置无序列表的方法

css设置无序列表的方法