用DIV+css写Table
2020-12-13 02:36
标签：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 代码如下。 用DIV+css写Table,搜素材,soscw.com 用DIV+css写Table 标签：style blog class code java ext 原文地址：http://www.cnblogs.com/tangt/p/3719129.html
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>123p>
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>
上一篇：c#中常用的js语句