Back to home
Div实现表格布局一例
2014-04-07 09:00:04 -0400
代码说明
CSS Div来实现表格，不像之前说的那么复杂，有人说用Div去做表格还不如直接用Table算了，其实经过实践你会发现，其实用Div来生成表格，同样简单，而且后续在CSS中容易对表格进行控制，十分方便。不懂的就看下面的代码吧，绝对实用。转自源码爱好者
HTML代码
<style> *{margin: 0 auto;padding: 0px;list-style: none;} .e{width: 500px;border-top: solid #f00 1px;border-left: 1px solid #f00;display: table;margin-top: 50px;} li{float: left;} .id,.name,.x,.z,.d{color: #999;font-size: 12px;text-align: center;border-right: 1px solid #f00;border-bottom: 1px solid #f00;height: 22px;line-height: 22px;} .id{width: 20px;} .name{width: 50px;} .x{width: 30px;} .z{width: 30px;} .d{width: 365px;} </style> <body> <div class="e"> <ul> <li class="id">ID</li> <li class="name">名字</li> <li class="x">性别</li> <li class="z">年龄</li> <li class="d">地址</li> </ul> <ul> <li class="id">1</li> <li class="name">本山</li> <li class="x">女</li> <li class="z">22</li> <li class="d">北京</li> </ul> <ul> <li class="id">2</li> <li class="name">小曾</li> <li class="x">男</li> <li class="z">26</li> <li class="d">上海</li> </ul> </body>
代码演示
ID
名字
性别
年龄
地址
1
本山
女
22
北京
2
小曾
男
26
上海
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N