做出的效果样式如下图，

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. Linux开机自启动

    永久打开或则关闭 chkconfig iptables on chkconfig iptables off 即时生效,重启后还原 service iptables start service ipta ...

  2. UI设计学习路径（一个）—好酒也怕巷子深

    来源 參与米老师对项目的验收的时候.听了老师对UI的看法才注意UI这块内容.非常奇怪为什么我们总是不能注意到本该注意的问题呢?软件开发难道仅仅是功能的实现不包含界面设计吗?当然不是.问题的根源在于我们 ...

  3. TabbedPaneDemo

    package swing.tabbedpane; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import ja ...

  4. 【C++基金会 06】explictkeyword

    C++提供keywordexplicit,你应该不能阻止的转换构造隐式转换发生的同意.声明explicit的构造不能在一个隐式转换使用. 1.演示样例 我们先来看一段演示样例代码: class A { ...

  5. SQL Server 2008性能故障排查（三）——I/O

    原文:SQL Server 2008性能故障排查(三)--I/O 接着上一章:CPU瓶颈 I/O瓶颈(I/O Bottlenecks): SQLServer的性能严重依赖I/O子系统.除非你的数据库完 ...

  6. web 环境项目（intellj部署的tomcat） 重启时报 Exception in thread "HouseKeeper" java.lang.NullPointerException （转）

    Exception in thread "HouseKeeper" java.lang.NullPointerException at org.logicalcobwebs.pro ...

  7. 具体说明 Flume介绍、安装和配置

    社论: 本文总结"Hadoop生态系统"中的当中一员--Apache Flume 写在前面二: 所用软件说明: 一.什么是Apache Flume 官网:Flume is a di ...

  8. 解决IE下Ajax请求无效

    在做web开发是,大多时候都会使用FireFox作为调试的浏览器.上面携带的FireBug用来调试JavaScript实在是太方便了,绝大多数的问题都能够通过它跟踪调试出来.但是,当项目发布时,不能仅 ...

  9. C代码分析器（一个 公开赛冠军）

    最近心血来潮,我希望能写一个通用的代码分析工具(其实这个词有点太.事实上为C代码).看到这几天我看到代码头晕眼花,尽管Source Insight救命,仍然没有足够的智慧思考很多地方. 如今主要遇到的 ...

  10. 键盘enter事件时间页面绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...