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. Xamarin 的 MVVM 之 Caliburn.Micro

    约定 Caliburn.Micro 以下简称 CMXamarin.Form 以下简称 XF 摘要CM 当前已释出 3.0 beta 版https://github.com/Caliburn-Micro ...

  2. xsd、wsdl生成C#类的命令行工具使用方法

    1.xsd生成C#类命令 示例:xsd <xsd文件路径> /c /o:<生成CS文件目录> <其他参数> 参数说明: /c 生成为cs文件,/d 生成DataSe ...

  3. vs操作快捷键

      注释:        先CTRL+K,然后CTRL+C取消注释: 先CTRL+K,然后CTRL+U 解析命名空间:shift+alt+f10   或Ctrl + .    调试快捷键 F6:   ...

  4. [BZOJ 1297][SCOI 2009]迷路（矩阵快速幂）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1297 分析:如果每条边的边权都是1,那么就相当于对邻接矩阵自乘T次(因为写一下递推式子 ...

  5. [设计模式]第四回：建造者模式（Builder Pattern）

    1.概述 将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示,这就是建造者模式. 简单的说就是生产一个产品的步骤比较稳定,单个步骤变化会产生一个不同的产品. 2.实践 物理模型 建造 ...

  6. java web中jsp，action，service，dao，po分别是什么意思和什么作用

    JSP:全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它[1] 是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动 ...

  7. Java设计模式-模板方法模式（Template Method）

    解释一下模板方法模式,就是指:一个抽象类中,有一个主方法,再定义1...n个方法,可以是抽象的,也可以是实际的方法,定义一个类,继承该抽象类,重写抽象方法,通过调用抽象类,实现对子类的调用,先看个关系 ...

  8. oracle 用Navicat创建的表的查询问题

    navicat可视化创建了表,可是就是不能查到!这个为什么呢? select * from user; 我们如果给user加上双引号才能查到 select * from "user" ...

  9. BZOJ-1196 公路修建问题 最小生成树Kruskal+（二分？？）

    题目中一句话,最大费用最小,这么明显的二分的提示(by 以前morestep学长的经验传授)...但完全没二分,1A后感觉很虚.. 1196: [HNOI2006]公路修建问题 Time Limit: ...

  10. The Longest Increasing Subsequence (LIS)

    传送门 The task is to find the length of the longest subsequence in a given array of integers such that ...