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. 3.SQLAlchemy文档-SQLAlchemy Core（中文版）

    这里的文描述了关于SQLAlchemy的的SQL渲染引擎的相关内容,包括数据库API的集成,事务的集成和数据架构描述服务.与以领域为中心的ORM使用模式相反,SQL表达式语言提供了一个数据构架为中心的 ...

  2. android之网络操作(1)

    一.网络操作 在网络操作中JAVA已经为我提供了一套API用来进行网络操作,在android开发中我们仍可以这套API来做开发.下面通过一个简单的例子来了解一下android下的网络操作. 点击图中下 ...

  3. C#基础知识系列七（base、this、new、override、abstract、virtual、static）

    前言 本文主要来讲解一下C#中,自己觉得掌握的不怎么样或者用的不多,不太熟悉的关键字,主要包括base.this.new.override.abstract.virtual以及针对static字段和s ...

  4. Javascript基础系列之（四）数据类型 （数组 array）

    字符串,数值,布尔值都属于离散值(scalar),如果某个变量是离散的,那么任何时候它只有一个值. 如果想使用变量存储一组值,就需要使用数组(array). 数组是由多个名称相同的树值构成的集合,集合 ...

  5. [转]不再以讹传讹，GET和POST的真正区别

    原文地址:http://www.nowamagic.net/librarys/veda/detail/1919 如果有人问你,GET和POST,有什么区别?你会如何回答? 我的经历 前几天有人问我这个 ...

  6. [转]Oracle数据库中的约束

    SQL 约束 约束用于限制加入表的数据的类型. 可以在创建表时规定约束(通过 CREATE TABLE 语句),或者在表创建之后也可以(通过 ALTER TABLE 语句). 我们将主要探讨以下几种约 ...

  7. Html-input文本框只能输入数字

    onKeyPress="if ((event.keyCode < 48 || event.keyCode > 57)) event.returnValue = false;&qu ...

  8. Java设计模式-享元模式（Flyweight）

    享元模式的主要目的是实现对象的共享,即共享池,当系统中对象多的时候可以减少内存的开销,通常与工厂模式一起使用. FlyWeightFactory负责创建和管理享元单元,当一个客户端请求时,工厂需要检查 ...

  9. 装了虚拟机，但是没有虚拟网卡vmnet0 vmnet1 vmnet8

    在服务里面启动图中的两个服务,在再你的虚拟网络编辑器里面点恢复默认设置就会出现了,我的是win8.1,默认这两个服务是手动启动的,可能是优化软件优化的结果 我是win10  里面显示以太网3 和 4, ...

  10. Windows Server 2008 显示桌面图标

    相信有朋友们有安装使用过windows 2008 server服务器,刚安装好的时候,桌面上只有一个回收站的图标,它没有像windows 7或windows 8一样可以直接通过右击鼠标的菜单来设置,要 ...