亲,现在你还在用table展示数据么?
不要那么守旧哦,告诉你要接触新的布局标签了。
今天闲来无事打酱油,自己做了一些效果,写点简单的放博客上,增加一点人气,嘻嘻。
看到最近大家流行用dl dt dd布局,我也能照着做了一个,反照表格做的,效果如图:
代码也贴出来给大家看看:
<html>
<head>
<title></title>
<style type="text/css">
dl,div{width:800px;margin:0 auto; text-align:center;}
dt{clear:both;text-align:center;font-weight: bold;}
dd{float: left;width:125px;text-align: center;height: auto;padding: 5px 0;border:solid 1px #963;margin:0px;}
body {font-size:12px;margin:0px;padding:0px;background:#eee;}
.title{text-align:center;font-size:14px;font-weight:bold;color:#631;}
</style>
</head>
<body>
<br />
<div><h3>亲们,没有搞错,这是一个用 dl dt dd 做的表格</h3></div>
<dl>
<dd class="title">名称</dd><dd class="title">花费金额</dd><dd class="title">备注</dd><dd class="title">记录时间</dd><dd class="title">记录人</dd><dd class="title">签名</dd>
<dt></dt>
<dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd>
<dt></dt>
<dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd>
<dt></dt>
<dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd> <dd>计算机消费系统</dd>
<dt></dt>
</dl>
</body>
</html>
如此简单的布局,没什么好解释了,亲们懂得。请注意行高,火狐跟IE解析不一样,建议用Padding和margin。