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. 20145222黄亚奇《Java程序设计》第10周学习总结

    20145222 <Java程序设计>第10周学习总结 学习总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接 ...

  2. IIS7 IIS7.5 配置备份

    IIS 7 提供了一个新的命令行工具 Appcmd.exe,可以使用该工具来配置和查询 Web 服务器上的对象,并以文本或 XML 格式返回输出. IIS 备份还原命令如下: 开始-运行-CMD 进入 ...

  3. Android开发者资源大汇总

    本文总结了最新的Android开发资源.下面列出的资源都是常用的,每个Android程序员都应该知道,能大大方便App开发.Enjoy~ 来源:Android开发周刊 中文的Android开发信息,资 ...

  4. onload是代码在也买你的追加元素的完成，而不是http请求的完成

  5. The entity type <type> is not part of the model for the current context

    这是在网站里遇到的一个错误,自动生成的不能手动添加, reference: http://stackoverflow.com/questions/19695545/the-entity-type-xx ...

  6. [wikioi 1307][poj 2054]欧少堆（乱搞）

    题目:http://www.wikioi.com/problem/1307/ 题意:给你一个树,上面有n个节点,每个节点都有一个价值p,求一个n个节点的排列顺序,是的Σi*p[i]最小(要求父节点一定 ...

  7. 《TCP/IP详解卷1：协议》第3章 IP：网际协议（2）-读书笔记

    章节回顾: <TCP/IP详解卷1:协议>第1章 概述-读书笔记 <TCP/IP详解卷1:协议>第2章 链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...

  8. 实现一个基于WCF的分布式缓存系统

    tks:http://www.cnblogs.com/xiguain/p/3913220.html

  9. xml基本操作

    在实际项目中遇到一些关于xml操作的问题,被逼到无路可退的时候终于决定好好研究xml一番.xml是一种可扩展标记语言,可跨平台进行传输,因此xml被广泛的使用在很多地方. 本文由浅入深,首先就xml的 ...

  10. 第二节Unity3D开发环境安装（windows系统）

        这一节准备安装开发环境. 1. 首先先下载软件包:http://pan.baidu.com/s/1imYVv  4.2版本2.下载完后,解压会看到两个文件(运行第二个安装包) 3.准备安装,这 ...