做出的效果样式如下图，

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写Table的更多相关文章

  1. [转]DIV+CSS和TABLE的区别

    现在全国大大小小的网站都在搞一场技术“革命”,就是所谓“网站重构”说简单点就是DIV+CSS进行网站制作.用DIV+CSS代替传统的Table制作框架和美化页面.百度搜索优化 在重构之前,肯定要了解为 ...

  2. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  3. html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签（转）

    DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容 ...

  4. 网页DIV+CSS布局与ifame传统布局对比

    通常我们从设计师手上拿到设计稿,按照功能划分为很多小块,然后再利用div+css写成静态页面按照设计稿排列还原,最后把具体内容填充到小块里面.网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列 ...

  5. 对于用div+css随心所欲布局的思考

    在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用 ...

  6. CSS属性 table 的 border-collapse 边框合并

    说明 该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框 separate 缺省值.边框分开,不合并.collapse 边框合并.即如果相邻,则共用同一个边框. 虽然在DIV+ ...

  7. 初学者用div+css结构写网页的几个误区

    1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...

  8. 项目期复习总结2：Table， DIV+CSS，标签嵌套规则

    文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...

  9. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

随机推荐

  1. 动软.NET 分页存储过程UP_GetRecordByPage

    1, ------------------------------------ --用途:支持任意排序的分页存储过程 --说明: ----------------------------------- ...

  2. 伪异步IO理解

    伪异步IO实在堵塞IO的基础上将每个client发送过来的请求由新创建的线程来处理改进为用线程池来处理.因此避免了为每个client请求创建一个新线程造成的资源耗尽问题. 来看一下伪异步IO的服务端代 ...

  3. 【剑指offer】面试题39：深度二叉树

    def TreeDepth1(root): if None == root: return 0 if None == root.left and None == root.right: return ...

  4. 运行safari提示：无法启动此程序，因为计算机中丢失 QTCF.dll

    解决办法: 1.去百度搜索“QTCF.dll”,找到一个靠谱的下载地址获取到该dll文件: 2.将文件放到 安装目录:Safari\Apple Application Support 下边.

  5. 64位操作系统下用Microsoft.Jet.OLEDB.4.0出现未注册错误

    在WIN7 64位下用Microsoft.Jet.OLEDB.4.0方法访问数据库Access,出现未注册错误 如果是要建立64位的应用程序 1.Microsoft Access Database E ...

  6. SDUT oj 3005 打怪升级(内存搜索)

    当比赛一直纠缠骑2如何做一个非常大的数量,数组不开啊...后来他们发现自己很傻啊,该数不超过最大10什么,这个上限就是力量100什么.. .. 其它的就是记忆化搜索啊,还有就是加一点力量的瓶子当时就要 ...

  7. Sass 基础和入门

    css本身很有趣,但是随着样式表变大,会越来越复杂,更加难以管理.css预处理器在这里就能帮上忙了.SASS 让你使用在css中不存在的特性,譬如变量.嵌套.mixins(混入),继承和一些其他好的特 ...

  8. IQ调制、整形滤波器与星座映射

    http://www.cnblogs.com/touchblue/archive/2013/01/15/2861952.html 现代通信中.IQ调制基本上属于是标准配置,由于利用IQ调制能够做出全部 ...

  9. 概率图形模型（PGM）学习笔记（四）-贝叶斯网络-伯努利贝叶斯-贝叶斯多项式

    之前忘记强调重要的差异:链式法则的条件概率和贝叶斯网络的链式法则之间的差异 条件概率链式法则 P\left({D,I,G,S,L} \right) = P\left( D \right)P\left( ...

  10. top使用命令

    top命令 第一行和uptime命令一样,都有系统的负载. 10:36:19 当前时间 up 1day .7min 系统执行时间.格式为天 时:分 1 user 当前登录用户数 load averag ...