首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

用DIV+css写Table

时间：2014-05-09 19:36:13   收藏：0   阅读：519

做出的效果样式如下图，

bubuko.com,布布扣

1，首先考虑的是如何显示border，就像是分割代码，我把border分割为最外层DIV全border，和内层DIV的right和bottom的border，就是右边和下边。

2，考虑DIV的布局，内层DIVfloat：left，设定每个DIV的宽度和高度，就可以达到想要的效果，外层DIV由于内层漂浮也需要float：left

3，给需要不同高度和宽度的DIV加上不懂的class

代码如下。

 

bubuko.com,布布扣
<!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>
<style type="text/css">

.hyjbtb{margin:0 auto; border:1px solid #666; width:605px; margin-left:100px;float:left;}
.colfirst{ width:200px;height:65px;border-bottom:1px solid #666;border-right:1px solid #666; float:left;}

.col{width:100px; height:65px;border-bottom:1px solid #666; border-right:1px solid #666; float:left;}
.col span b{width:100px; display:block;}
.collast{width:100px; height:65px;border-bottom:1px solid #666;float:left;}
.collast span b{width:100px; display:block;}

.colfirst1{ width:200px;height:20px;border-bottom:1px solid #666;border-right:1px solid #666; float:left;}
.col1{width:100px; height:20px;border-bottom:1px solid #666; border-right:1px solid #666; float:left;}
.collast1{width:100px; height:20px;border-bottom:1px solid #666;float:left;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<p>123</p>
<div class="hyjbtb">
       <div class="colfirst">
       <span><b>享受服务</b></span>
       </div>
       <div class="col">
       <span><b>标准会员</b>（年消费 3-30万）</span>
       </div>
       <div class="col">
       <span><b>黄金会员</b>（年消费 30-60万）</span>
       </div>
       <div class="col">
       <span><b>白金会员</b>（年消费 60-100万）</span>
       </div>
       <div class="collast">
       <span><b>钻石会员</b>（年消费 100万以上）</span>
       </div>
       <div class="colfirst1">
       <span>会员专属折扣</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>专席收藏顾问服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>艺术品免费配送服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>会员专属折扣</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>

       </div>
       <div class="colfirst1">
       <span>《馆藏》会刊赠阅服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>艺术品资讯推送服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>会员专属折扣</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>展览、活动、讲座服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div><div class="colfirst1">
       <span>贴心生日礼物赠送服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>指定茶品免费品饮</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>艺术品保养修复</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>指定茶品免费品饮</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>大师作品定制服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>私人商务专属服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>作品限期预留服务</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colfirst1">
       <span>个人藏品展示代销</span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="col1">
       <span>√  </span>
       </div>
       <div class="collast1">
       <span>√  </span>
       </div>
       <div class="colAll">
       <p>*注：1、金银类藏品不参加会员优惠活动；2、会员折扣不能与其它优惠券、活动优惠同时享用。</p>
       </div>
</div>
</body>
</html>
bubuko.com,布布扣

 

 

用DIV+css写Table,布布扣,bubuko.com

评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！