<!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=utf-8" />
<title>HTML的dl、dt、dd表格 VS Table表格</title>
<style>
*{ margin:0; padding:0;}
br{ clear:both}
#box{ margin:10px; padding:10px; float:left; border:1px solid #CCC; background:#FFFFCC; font-size:12px; line-height:1.9;}
#box dl{ background:#CCCC00; margin:0; width:120px; text-align:center; float:left; margin:5px;}
#box dt{ background:#CC0033;}
#box dt img{display:block; margin:0 auto;}
#box dd{ background:#FFFF00; }
#table dl {margin-bottom:50px;}
#table dl dt {background:#5f9be3;color:#fff;float:left;font-weight:bold;margin-right:10px;padding:5px;width:100px;}
#table dl dd {margin:2px 0;padding:5px 0;}
</style>
</head>
<body>
<div id="box">
<dl>
<dt> <img src="" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
<dl>
<dt> <img src="" /> </dt>
<dd>母亲节-祝福短信</dd>
</dl>
</div>
<br />
<div id=table>
<dl>
<dt>Name: </dt>
<dd>Squall Li</dd>
<dt>Age: </dt>
<dd>23</dd>
<dt>Gender: </dt>
<dd>Male</dd>
<dt>Day of Birth:</dt>
<dd>26th May 1986</dd>
<dt>描述</dt>
<dd>dl、dt、dd数据列表
现在让我们来看看使用了HTML dl、dt、dd标签的数据列表。首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构，然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。
说明：对于dl、dt、dd的设置建议不要用高度（height）和行高（line-height），在FF会产生错位，由于IE和FF是否自适应造成，建议使用dt、dd的padding属性来定位！</dd>
</dl>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
