用DIV+css制作一个单元长度的米字表格

html-css08

用DIV+css制作一个单元长度的米字表格,第1张

<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 背景变橘色*/

}