用DIV+css写Table

做出的效果样式如下图,

用DIV+css写Table

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

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

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

代码如下。

 

<!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>

 

 

你可能感兴趣的:(div+css)