可以尝试以下初始化代码:
body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{ margin:0padding:0}
h1,h2,h3,h4,h5,h6{ font-size:100%font-weight:normal}
ol,ul{ list-style:none}
img,fieldset{ border:0 nonedisplay:block}
由于各个版本的浏览器,对一些标签的初始值不一样,我们需要帮它们初始化成一样的,用于兼容各个版本的浏览器。
设置li标签的list-style属性为none
如下例子
li标签在没有设置li{list-style:none}的时候,前面是有圆点的,设置之后,圆点消失
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{list-style: none}/*这里设置*/
</style>
</head>
<body>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</body>
</html>
新建一个html文件,命名为test.html,用于讲解css如何清除li列表默认样式。
请点击输入图片描述
在test.html文件内,使用ul、li标签创建一个列表。
请点击输入图片描述
在test.html文件内,设置ul标签的class属性为mycss。
请点击输入图片描述
在css标签内,通过class设置ul的样式,将list-style属性设置为none,消除列表的默认序号。
请点击输入图片描述
在css标签内,再将padding属性和margin属性消除li列表的内外边距。
请点击输入图片描述
6
在浏览器打开test.html文件,查看实现的效果。
请点击输入图片描述