如何去掉列表的默认样式

html-css021

如何去掉列表的默认样式,第1张

新建一个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文件,查看实现的效果。

请点击输入图片描述

因为各个浏览器默认的样式不同,你这种情况可以使用下面代码清除边距

<style>*{margin:0padding:0}</style>建议做网站的时候,设置个reset.css样式表清除各个浏览器的默认样式,已达到做的网页在各个浏览器中达到统一,下面把YUI

Reset

CSS代码贴出

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

margin:0

padding:0

}

table {

border-collapse:collapse

border-spacing:0

}

fieldset,img {

border:0

}

address,caption,cite,code,dfn,em,strong,th,var {

font-style:normal

font-weight:normal

}

ol,ul {

list-style:none

}

caption,th {

text-align:left

}

h1,h2,h3,h4,h5,h6 {

font-size:100%

font-weight:normal

}

q:before,q:after {

content:''

}

abbr,acronym { border:0

}

可以尝试以下初始化代码:

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}

由于各个版本的浏览器,对一些标签的初始值不一样,我们需要帮它们初始化成一样的,用于兼容各个版本的浏览器。