CSS在UL UI上的应用

最新推荐文章于 2024-07-24 20:18:42 发布

最新推荐文章于 2024-07-24 20:18:42 发布 · 143 阅读

文章标签：

#ui

本文介绍了一种使用CSS对表格进行布局的方法，通过设置特定样式实现响应式表格效果。利用浮动属性使列表项按指定宽度排列并自动换行，形成整齐的表格结构。

效果图：

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

<ulid="biaoge">
<liclass="biaotou">第一列</li>
<liclass="biaotou">第二列</li>
<liclass="biaotou">第三列</li>
<liclass="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>