您的当前位置:首页正文

运用ul+li实现细线表格

2020-11-27 来源:汇智旅游网

本篇文章主要介绍如何使用用ul+li实现的细线表格效果不用table,非常有创意感兴趣的小伙伴了解一下。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>write by 阿会楠 环境:IE7+IE6</title> 
<style type="text/css"> 
#ulDate{ 
 width:404px; 
 margin:0; 
 border-top:1px solid #cccccc; 
 border-left:1px solid #cccccc; 
} 
#ulDate li{ 
 float:left; 
 width:100px; 
 height:30px; 
 list-style-type:none; 
 border-right:1px solid #cccccc; 
 border-bottom:1px solid #cccccc; 
 /*非必须*/ 
 line-height:30px; 
 font-size:12px; 
 text-align:center; 
 
} 
</style> 
</head> 

<body> 
<ul id="ulDate"> 
<li style="width:403px;background:#F7F7FF;text-align:center;">时间</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li></li> 
<li></li> 
</ul> 
</body> 
</html>

相关推荐:

html如何制作细线表格

使用css中border-collapse:collapse属性新建一个细线表格的示例代码

CSS实现细线表格_html/css_WEB-ITnose

显示全文