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 : 45px auto ;
    border-width : 1px ;
    border-color : Black ;
     }
    
#biaoge li
{
/* 对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的宽度来换行*/
    
     }

#biaoge li.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 >