CSS/HTML

css创意ul+li实现的细线表格实现代码

网络 2008-08-03CSS/HTML2245

非常用创意的用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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

很赞哦！()