CSS在UL UI上的应用

效果图：


csstest.css

* {
margin-left : 0 ;
margin-top : 0 ;
font-size : 12px ;
color : White ;
}
#biaoge
{
/* 对ID为biaoge的标签使用此CSS */
width : 405px ;/*列宽100，加上五个为1的边距，四列就是405*/
margin : 45pxauto ;
border-width : 1px ;
border-color : Black ;
}

#biaogeli
{
/* 对ID为biaoge的标签里面的LI使用此CSS */
list-style-type : none ;
width : 100px ;
height : 30px ;
background-color : Gray ;
line-height : 30px ;
text-align : center ;
margin-left : 1px ;
margin-bottom : 1px ;
float : left ; /*这里很关键，有了它，li才会根据ul的宽度来换行*/

}

#biaogeli.biaotou
{
background-color : Black ;

}

test.aspx

< ul id ="biaoge" >
< li class ="biaotou" > 第一列 </ li >
< li class ="biaotou" > 第二列 </ li >
< li class ="biaotou" > 第三列 </ li >
< li class ="biaotou" > 第四列 </ li >
< li > 数据1-1 </ li >
< li > 数据1-2 </ li >
< li > 数据1-3 </ li >
< li > 数据1-4 </ li >
< li > 数据2-1 </ li >
< li > 数据2-2 </ li >
< li > 数据2-3 </ li >
< li > 数据2-4 </ li >
< li > 数据3-1 </ li >
< li > 数据3-2 </ li >
< li > 数据3-3 </ li >
< li > 数据3-4 </ li >
< li > 数据4-1 </ li >
< li > 数据4-2 </ li >
< li > 数据4-3 </ li >
< li > 数据4-4 </ li >
</ ul >