用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写Table的更多相关文章
- [转]DIV+CSS和TABLE的区别
现在全国大大小小的网站都在搞一场技术“革命”,就是所谓“网站重构”说简单点就是DIV+CSS进行网站制作.用DIV+CSS代替传统的Table制作框架和美化页面.百度搜索优化 在重构之前,肯定要了解为 ...
- div+css与table布局
1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...
- html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签（转）
DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容 ...
- 网页DIV+CSS布局与ifame传统布局对比
通常我们从设计师手上拿到设计稿,按照功能划分为很多小块,然后再利用div+css写成静态页面按照设计稿排列还原,最后把具体内容填充到小块里面.网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列 ...
- 对于用div+css随心所欲布局的思考
在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用 ...
- CSS属性 table 的 border-collapse 边框合并
说明 该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框 separate 缺省值.边框分开,不合并.collapse 边框合并.即如果相邻,则共用同一个边框. 虽然在DIV+ ...
- 初学者用div+css结构写网页的几个误区
1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...
- 项目期复习总结2：Table， DIV+CSS，标签嵌套规则
文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...
- div,css&table布局有哪些区别
DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...
随机推荐
- 解决win10客户机本地账户登陆导致远程桌面没法访问问题
情景:客户机器如果是win10本地账户,我们远程桌面连接是可能会没法访问. 如果客户机器切换到win10 Microsoft账户登录,远程桌面就可以访问了(当然用户肯定不能给你说自己的Microsof ...
- UVa 208 - Firetruck 回溯+剪枝 数据
题意:构造出一张图,给出一个点,字典序输出所有从1到该点的路径. 裸搜会超时的题目,其实题目的数据特地设计得让图稠密但起点和终点却不相连,所以直接搜索过去会超时. 只要判断下起点和终点能不能相连就行了 ...
- UC浏览器插件开发
pip install UC浏览器插件是个什么玩意? 如图所看到的,便是UC的插件面板. UC通过开放浏览器插件api, 使开发人员可以进行插件的开发. 插件种类: 1 : extension. 就是 ...
- CentOS7 安装Bind
简要记录安装Bind的过程以及遇到的问题 一. 虚拟机准备 准备了2台虚拟机,都是装的CentOS7 64_1的IP地址为192.168.1.160,2的地址为161.161作为DNS服务器. 二.下 ...
- List toArrays()
import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ListToArray ...
- ORM-Dapper+DapperExtensions
ORM-Dapper+DapperExtensions 现在成熟的ORM比比皆是,这里只介绍Dapper的使用(最起码我在使用它,已经运用到项目中,小伙伴们反馈还可以). 优点: 1.开源.轻量.小巧 ...
- TortoiseGit客户端密钥配置
为了方便在windows下使用TortoiseGit客户端提交代码,提高开发效率,现对SSH key的配置进行一下说明,亲测可用. 1.安装TortoiseGit,找到开始菜单里TortoiseGit ...
- 30分钟让你了解MongoDB基本操作（转）
今天记录下MongoDB的基本操作,这只是最基本的,所以是应该掌握的. 数据库 数据库是一个物理容器集合.每个数据库都有自己的一套文件系统上的文件.一个单一的MongoDB服务器通常有多个数据库. 集 ...
- SpringMVC现实
夹 一个.前言 两.spring mvc 核心类和接口 三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说 ...
- RabbitMQ （两）工作队列
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/37620057 本系列教程主要来自于官网新手教程的翻译,然后自己进行了部分的改动与 ...