360表格布局：

CSS定义标签：

@charset "utf-8";
/* CSS Document */
.bt1
{
border:#309 solid 1px;
height:100px;
width:900px;
margin:10px;
top:100px ;
left:180px;
position:absolute;
}
.bt2
{
border:#309 solid 1px;
height:50px;
width:900px;
margin:10px;
top:220px;
left:180px;
position:absolute;
}
.a
{
border:#0F6 solid 1px;
width:200px;
height:500px;
margin:10px ;
top:290px;
left:180px;
position:absolute;
}
.b
{
border:#0F6 solid 1px;
width:680px;
height:400px;
margin:10px;
top:290px;
left:400px;
position:absolute;
}
.c
{
border:#0F6 solid 1px;
width:200px;
height:940px;
margin:10px ;
top:820px;
left:180px;
position:absolute;
}

.d
{
border:#0F6 solid 1px;
width:680px;
height:250px;
margin:10px;
top:720px;
left:400px;
position:absolute;
}

.e
{
border:#0F6 solid 1px;
width:680px;
height:600px;
margin:10px;
top:990px;
left:400px;
position:absolute;
}

.f
{
border:#0F6 solid 1px;
width:680px;
height:150px;
margin:10px;
top:1610px;
left:400px;
position:absolute;
}
.bt3
{
border:#309 solid 1px;
height:300px;
width:900px;
margin:10px;
top:1780px ;
left:180px;
position:absolute;
}
.bt4
{
border:#309 solid 1px;
height:400px;
width:900px;
margin:10px;
top:2100px ;
left:180px;
position:absolute;
}

源代码：
<link href="CSS.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="bt1">bt1</div>
<div class="bt2">bt2</div>
<div class="a" >a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
<div class="bt3">bt3</div>
<div class="bt4">bt4</div>
</body>
</html>

3月23.CSS表格布局的更多相关文章

  1. 浅谈分析表格布局与Div+CSS布局的区别

    (1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表 ...

  2. 用CSS实现“表格布局”

    当我们进行浮动布局时,会发现存在着非浮动元素与浮动元素的底部难以对齐的情况,这就是浮动布局的缺陷.因此,过去的前端工作者曾利用<table>以实现"表格布局".因为表格 ...

  3. html/css 表格元素以及表格布局

    一,html之表格 1,一个完整的html表格所包含的元素 <!--一个完整的html表格--> <!--cellpadding代表单元格内的文字和单元格边框之间的间距--> ...

  4. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  5. 关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg)"> (这事设置背景图片) <img src="images/bbs_student1.gif" />如果是这样的就是直接插入图片。你看看,...

    关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg ...

  6. CSS基础布局--居中对齐，左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  7. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  8. CSS Grid 布局

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  9. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

随机推荐

  1. 错误C2665: “AfxMessageBox”: 2 个重载中没有一个可以转换所有参数类型

    第一种方法: AfxMessageBox( "Simple   message   box. ");如果先定义一个CString   变量,再赋值就没问题CString   sTe ...

  2. C#出题库项目的总结（1）

    前记: 截止18点05分(4月9号),完成了代码部分的编写,明天争取把文档完成,毕竟在这个上面花的时间太多了,还有单词和书需要背,好吧,不说废话啦,下面进入正题. (PS:因为学院的模拟招聘笔试出题和 ...

  3. WebAPI2使用Autofac实现IOC属性注入完美解决方案

    一.前言 只要你是.NETer你一定IOC,IOC里面你也会一定知道Autofac,上次说了在MVC5实现属性注入,今天实现在WebApi2实现属性注入,顺便说一下autofac的程序集的注入方式,都 ...

  4. 微信小程序「官方示例代码」浅析【上】

    从某个微信群里,拿到了这个IDE的下载地址,然后就有了这个: 根本登不上去,怎么办,怎么办呢? 看代码啊... 反正我又没有保密协议,解压缩一看NodeWebkit + React: 好啦 ,逛逛呗, ...

  5. node设置cookie

    // 获得客户端的Cookie     var Cookies = {};     req.headers.cookie && req.headers.cookie.split(';' ...

  6. c# JD快速搜索工具，2015分析JD搜索报文，模拟请求搜索数据，快速定位宝贝排行位置。

    分析JD搜索报文 搜索关键字 女装 第二页,分2次加载. rt=1&stop=1&click=&psort=&page=3http://search.jd.com/Se ...

  7. codevs 1690 开关灯 线段树水题

    没什么好说的,标记put表示开关是否开着. #include<cstdio> #include<cstring> #include<algorithm> using ...

  8. BIEE 仪表盘的创建

    1.新建仪表盘 选择共享文件夹里创建的表拖到仪表盘中 保存并运行  也可以新建更多仪表盘页 2.新建仪表盘提示 把提示和表都拖到仪表盘中 3.主从关系:第二张表的结果页面 ——>编辑视图——&g ...

  9. asp.net 回发或回调参数无效的各种情况分析及解决办法

    昨天,在实现级联菜单的时候,突然出现一下错误: 回发或回调参数无效.在配置中使用 <pages enableEventValidation="true"/> 或在页面中 ...

  10. HDU 5714

    Problem Description 小明在旅游的路上看到了一条美丽的河,河上有许多船只,有的船只向左航行,有的船只向右航行.小明希望拍下这一美丽的风景,并且把尽可能多的船只都完整地拍到一张照片中. ...