标签：style blog class code java ext
做出的效果样式如下图，
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>
标签：style blog class code java ext
原文地址：http://www.cnblogs.com/tangt/p/3719129.html
