CSS中的display:none;和visibility:
曾哥演唱《Creep》大家一起来体验让人醉生梦死的王者霸气
10月17
前端设计都会遇到做表格，以前用TABLE TR TD布局的时候用TABLE，现在W3C的XHTML+CSS(DIV+CSS)了很多朋友还在用TABLE，其实我也是，如何更好地运动标准标签做表格呢，以下文档给需要的朋友做个参考，欢迎留言提出给好建议！
UL+LI纯CSS表格效果
文件下载：
DL+DT+DD纯CSS表格效果
文件下载：
查看相关代码↓：
UL+LI纯CSS表格效果代码：
<!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>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>
DL+DT+DD纯CSS表格效果代码：
<!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>IE7+IE6</title>
<style>
*{ margin:0; padding:0;}
#box{ margin:10px; padding:10px; width:400px; float:left; border:1px solid #CCC;
background:#FFFFCC; font-size:12px; line-height:1.9;}
dl{ background:#CCCC00; margin:0; width:120px;
text-align:center; float:left; margin:5px;}
dt{ background:#CC0033;}dt img{display:block;
margin:0 auto;}
dd{ background:#FFFF00; }
</style>
</head>
<body>
<h3><a href="http://tommyhu.cn/" title="欢迎访问tommyhu的博客">www.tommyhu.cn</a></h3>
<div id="box">
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
</div>
</body>
</html>
最后编辑： tommyhu 编辑于2009/11/09 20:59
UL+LI纯CSS表格效果
文件下载：
下载文件 (已下载 9 次)DL+DT+DD纯CSS表格效果
文件下载：
查看相关代码↓：
UL+LI纯CSS表格效果代码：
<!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>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>
DL+DT+DD纯CSS表格效果代码：
<!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>IE7+IE6</title>
<style>
*{ margin:0; padding:0;}
#box{ margin:10px; padding:10px; width:400px; float:left; border:1px solid #CCC;
background:#FFFFCC; font-size:12px; line-height:1.9;}
dl{ background:#CCCC00; margin:0; width:120px;
text-align:center; float:left; margin:5px;}
dt{ background:#CC0033;}dt img{display:block;
margin:0 auto;}
dd{ background:#FFFF00; }
</style>
</head>
<body>
<h3><a href="http://tommyhu.cn/" title="欢迎访问tommyhu的博客">www.tommyhu.cn</a></h3>
<div id="box">
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="wish.png" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
</div>
</body>
</html>
最后编辑： tommyhu 编辑于2009/11/09 20:59
