<style>
*{
padding:0px
margin: 0px
}
div{
margin: 30px 0px 0px 30px
width: 100px
height: 100px
border: 1px solid #ccc
border-right:none
border-bottom: none
}
ul{
float: left
}
ul li{
list-style: none
width: 24px
height: 24px
border-right:1px solid #ccc
border-bottom: 1px solid #ccc
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
效果如下：
#是ID选择器.是class选择器
*是通配符号
当<div id="ban3"></div>
css样式里面使用#；
当<div class="ban3"></div>
css样式里面使用. ；
当需要全局使用的样式的时候
*{font-size:14pxline-height:1.9emfont-family:"微软雅黑",Arial, Helvetica, sans-serif} ；
http://www.vipaq.com/webapp/encoding/你把代码复制到\uXXXX 下面的文本框里，就可以了。但是\5b8b\4f53，需要在前面加一个u，就是
\u5b8b\u4f53 宋体
u6b63\u5728\u52a0\u8f7d\u6570\u636e 正在加载数据
\9是为了浏览器的兼容性，IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
例如：
#div{
background:blue/*Firefox 背景变蓝色*/
background:red \9/*IE8 背景变红色*/
*background:black/*IE7 背景变黑色*/
_background:orange/*IE6 背景变橘色*/
}
