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>