<html lang="en">
<head>
<meta charset="UTF-8">
<title>GIS枫</title>

设置DIV样式
<style>
body {margin: 0; padding: 0;}
.Header{ margin: 0 100px; height: 120px; background-color: #369;}
.Header1, .Header2 ,.Header3, .Header4{height: 30px;}
.Header2 {background-color: blue;}
.Header3 {background-color: yellow;}
.Header4 {background-color: red;}
.Header1 {background-color: orange;}
.Footer { margin: 0 100px; height: 70px; background-color: #369;}
.Left, .Right {
position: absolute;
top: 120px;
width: 100px;
height: 300px;
background-color: pink;
}
.Left {left: 0;}
.Right {right: 0;}
.Cont {margin: 0 100px;}
.con1, .con2 {height: 150px;}
.con1 {background-color: silver;}
.con2 {background-color: slateGrey;}
.Head1,.Head2{
position: absolute;
top: 0px;
width: 100px;
height: 120px;
background-color: silver;
}
.Head1{left:0;}
.Head2{right: 0;}
.Head3,.Head4{
position: absolute;
top: 420px;
width: 100px;
height: 70px;
background-color: pink;
}
.Head3{left: 0;}
.Head4{right: 0;}

</style>
</head>
<body>
<div class="Head1"> Head1</div>
<div class="Header">
    <div class="Header1">Header1</div>
    <div class="Header2">Header2</div>
    <div class="Header3">Header3</div>
    <div class="Header4">Header4</div>
</div>
<div class="Head2"> Head2</div>
<div class="Left">Left</div>
<div class="Cont">
    <div class="con1">con1</div>
    <div class="con2">con2</div>
</div>
<div class="Right">Right</div>
<div class="Footer">Footer</div>
<div class="Head4"> Head4</div>
<div class="Head3"> Head3</div>
</body>
</html>

效果如下图：

DIV的常用属性：

1、margin:用于设置DIV的外延边距，也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left]

2、Height:设置DIV的高度；Width:设置DIV的宽度。

3.background:设置DIV的背景样式；background后可直接跟背景的颜色、背景图片、平铺方式等样式。也可以用以下属性分别设置。

4、position:设置DIV的定位方式。position的属性中有static、fixed、relative、absolute四个属性。常用relative和absolute。若指定为static时，DIV遵循HTML规则；若指定为relative时，可以用top、left、right、bottom来设置DIV在页面中的偏移（相对于自身的偏移），但是此时不可使用层；若指定为absolute时，可以用top、left、right、bottom对DIV进行绝对定位（对自己最近的父级元素）；若指定为fixed时，在IE7与FF中DIV的位置相对于屏屏固定不变，IE6中没有效果（不知为什么）。

利用DIV，实现简单的网页布局的更多相关文章

  1. HTML实例之简单的网页布局

    需求: <html> <head> <title>简单的表格网页布局</title> <meta charset="UTF-8" ...

  2. CSS简单的网页布局

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  4. Python3网络爬虫（1）：利用urllib进行简单的网页抓取

    1.开发环境 pycharm2017.3.3 python3.5 2.网络爬虫的定义 网络爬虫,也叫网络蜘蛛(web spider),如果把互联网比喻成一个蜘蛛网,spider就是一只在网上爬来爬去的 ...

  5. 8.html表格相关的标记9.html表格实战《简单的网页布局》

    <html> <head> <title>第八课标题表格</title> <meta charset="utf-8"> ...

  6. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

  7. 一个简单的网页布局HTML+CSS

    <!doctype html> <html> <head> <meta charset="utf-8"/> <title> ...

  8. 简单的网页布局效果html5+CSS3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 利用Div+CSS整体布局页面的操作流程

    简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head>  <meta chars ...

随机推荐

  1. 【CF】244C Checkposts

    题目需要求啥很明确了.主要思想是先计算机联通块,然后每个块内找到一个最小值(以及该值的次数).最小值和结果1,次数乘积为结果2.联通块tarjan可解. /* 427C */ #include < ...

  2. 教程：在 VM Depot 中查找 Azure 可用的虚拟机镜像

     发布于 2014-07-08 作者 陈 忠岳 对于 Azure 的社区管理虚拟机资源库--VM Depot--的用户来说,网站的搜索功能已得到极大的改善.这一搜索能力的增强,可以帮助用户更容易地 ...

  3. Kafka Topic Partition Replica Assignment实现原理及资源隔离方案

    本文共分为三个部分:   Kafka Topic创建方式 Kafka Topic Partitions Assignment实现原理 Kafka资源隔离方案   1. Kafka Topic创建方式 ...

  4. (组合数学3.1.1.1)POJ 1146 ID Codes(字典序法)

    /* * POJ_1146.cpp * * Created on: 2013年10月8日 * Author: Administrator */ #include <iostream> #i ...

  5. 层层递进Struts1（八）之总结

    先来看一下Struts1学习总结的思维导图,画的主要是Struts1中的重点和博客分布,如下所示: 系列博客的侧重点是: Struts1是什么? 为什么要使用它? 如何使用Struts1? Strut ...

  6. Java的序列化与反序列化（一）：初识

    Java提供了一种对象序列化的机制:一个对象可以被表示为一个字节序列,该字节序列包含对象的数据.有关对象的类型的信息和存储在对象中数据的类型. 将序列化对象写入文件之后,可以从文件中读取出来,并且对它 ...

  7. w10 系统升级

    怎么把电脑升级到w10系统? 下载一个软件,Windows10Upgrade9252.exe, 5M左右,把windows更新开启后,运行即可! 升级后,请把windows.old 文件夹删除,这个文 ...

  8. 【设计模式 - 11】之享元模式（FlyWeight）

    1      模式简介 当系统中存在大量对象时,非常容易造成内存溢出.为了解决这个问题,我们把这些对象中共有的部分抽象出来,如果有相同的业务请求,则直接返回在内存中已有的对象,避免重新创建,这就是享元 ...

  9. CSS3动画变形Animations

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. ASP.NET datable导出excel

    本文转载:http://www.cnblogs.com/chwkai/archive/2005/10/08/250426.html 不错的文章:http://www.cnblogs.com/lzhp/ ...