用 dl dt dd 做表格展示数据

最新推荐文章于 2021-08-15 10:38:26 发布

weixin_33851177

最新推荐文章于 2021-08-15 10:38:26 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lianyi/blog/42123

为什么80%的码农都做不了架构师？>>>

亲，现在你还在用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。

转载于:https://my.oschina.net/lianyi/blog/42123