html中无序列表的默认样式及其修改：

html中无序列表的默认样式及其修改：

在我们进行常规的网页设计的时候经常要用到无序列表；然而在css3中；无序列表
是有默认样式的，这些默认样式对我们来说有时候是不合适的。

  <ul>
      <li>列</li>
      <li>表</li>
  </ul>

从上图可以明显的看出，列表前面有一个很可能没必要存在的黑点！这对我们进
行自由设计是一个不必要的存在。其实不仅仅是前面的小黑点，它还有另外一个
默认样式，那就是边距，当然，我们也一定希望边距也是可调的。事实也是
如此，下面我就如何消除黑点和调整边距进行分别说明。
消除黑点：
我们只须在样式里加入 li { list-style:none; }即可：

但是有时候我们又想在列表前面加一些其他图案，而非小黑点，那该怎末办呢？
你可能首先想到的是插入背景图片或svg图案；这当然可以啊。其实，如果你要
求并不高；那么幸运了，css3提供一些类型供你选择！
它们有
这样的：
还有这样的：
其实这都得益于 list-style 属性；比如 list-style:circle；list-style:square；就分别
表现出圆圈和方块了。
默认边距：
结构

• 列


• 表

样式

#div1 { width:100%; 
        height:20px; 
		background:green; 
	  }
ul { background:purple; }
li { list-style:flower; 
	 margin-bottom:1px; 
	 font-size:16px;
	 background:skyblue; 
	  } 
#div2 { width:100%; 
        height:20px; 
		background:yellow; 
	  }

结果

现在可以明白了吧；列表的上下都存在一定的间距，其实也就是默认的margin
既然是margin，我们就试着写写它的样式；
margin:none;？。。。。。。。。。。。。。。。。。。。。。。。。。没变化！
margin:1px 0;。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

这个可以啊，那…
margin:0;。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

这样就成功消除了边距。同样，只要设置好适当的margin值，就可以根据自己的需要
设置好边距了！