运用ul+li实现细线表格

来源：动视网责编：小采时间：2020-11-27 18:48:41

运用ul+li实现细线表格

运用ul+li实现细线表格:本篇文章主要介绍如何使用用ul+li实现的细线表格效果不用table，非常有创意感兴趣的小伙伴了解一下。代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

推荐度：

点击下载本文 文档为doc格式

导读运用ul+li实现细线表格:本篇文章主要介绍如何使用用ul+li实现的细线表格效果不用table，非常有创意感兴趣的小伙伴了解一下。代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

本篇文章主要介绍如何使用用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>

运用ul+li实现细线表格

推荐度：

点击下载本文 文档为doc格式

标签：表格 ul li

热门焦点

运用ul+li实现细线表格

运用ul+li实现细线表格

运用ul+li实现细线表格

最新推荐

猜你喜欢

热门推荐