CSS布局中应用ul、li实现表格形式

你对DIV CSS布局中应用ul、li实现表格形式是否熟悉，表格类的数据，它有着得天独厚的条件，也非常方便组织，这类数据内容直接使用表格就可以了，希望本文的介绍能让你有所收获。

DIV CSS布局中应用ul、li实现表格形式

或许你认为你的数据并不是表格式的数据，还有着其它的用法或你自己的见解，我们也可以用。我们看下面的效果：

　　我们首先分析一下如何制作：li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：

引用：

　　一个无序列表biaoge，前四个列表项我们赋予了类biaotou。因为这四个项是表格头部，应该与表格数据有所区别。所以单独赋予了类，可以方便控制。下面我们开始CSS代码的编写：

引用：

 
 
 
 
  
  
  
  *{    
  
  
  margin:0;    
  
  
  padding:0;    
  
  
  font-size:12px;    
  
  
  color:#000;    
  
  
  }

　　CSS整体布局声明，边距为零，填充为零，文字大小为12px，文字颜色为黑色#000；

引用：

 
 
 
 
  
  
  
  #biaoge{    
  
  
  width:405px;    
  
  
  margin:50pxauto;    
  
  
  }

ID为biaoge的ul的CSS编码，宽度为405px（一列100px*4列+li的边距），上下边距为50px，左右为自动，实现水平居中对齐。

引用：

 
 
 
 
  
  
  
  #biaogeli,#biaogeli.biaotou{    
  
  
  list-style-type:none;    
  
  
  width:100px;    
  
  
  height:30px;    
  
  
  line-height:30px;    
  
  
  text-align:center;    
  
  
  float:left;    
  
  
  margin-left:1px;    
  
  
  margin-bottom:1px;    
  
  
  background:#ccc;    
  
  
  }

　　对各个列表项li（即单元格）进行样式定义，设置列表项预设标记为无，宽度与高度分别是100px、30px，为了让文字垂直居中于li中，设置行高为30px，文字水平居中。设置为向左浮动，并且左边距与底边距均为1px，实现了简单的表格线的效果。（如果设计成border的表格线，很多CSSHACK很难控制与调整，特别是FF中极不正常，不建议使用border来实现这类ul+li实现表格线的定义！）设置背景色为浅灰色#ccc。

引用：

 
 
 
 
  
  
  
  #biaogeli.biaotou{    
  
  
  background:#999;    
  
  
  }

　　我们设置四个“表头”li的背景色为深灰色#999，与其它的li区别开来。我们的样式定义基本就完成了。你可以在色彩上对它进行一些其它的美化。

　　最后我们再次声明，表格类的数据最好是用表格来实现，符合WEB标准不必拘泥于完全不用表格，只是在适当的情况下，可以使用此案例的方法来实现类似于表格的布局，点击这里查看最终效果。

【编辑推荐】

DIV CSS表单布局五个小技巧使用秘笈
技术分享如何实现CSS横向导航
术语汇编基本CSS滤镜概述
完美实现丰富的CSS文字效果
鼠标经过时改变DIV背景颜色的三种途径

本文题目：CSS布局中应用ul、li实现表格形式
文章URL：http://www.shufengxianlan.com/qtweb/news10/416810.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容