html中dldtdd如何居中,用 dl dt dd 做表格展示数据

亲,现在你还在用table展示数据么?

不要那么守旧哦,告诉你要接触新的布局标签了。

今天闲来无事打酱油,自己做了一些效果,写点简单的放博客上,增加一点人气,嘻嘻。

看到最近大家流行用dl dt dd布局,我也能照着做了一个,反照表格做的,效果如图:

113ad5c3ca354d7a8f9c5b1a9ac6288c.png

代码也贴出来给大家看看:

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;}

亲们,没有搞错,这是一个用 dl dt dd 做的表格

名称
花费金额
备注
记录时间
记录人
签名
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统
计算机消费系统

如此简单的布局,没什么好解释了,亲们懂得。请注意行高,火狐跟IE解析不一样,建议用Padding和margin。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部