利用DIV，实现简单的网页布局
<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，实现简单的网页布局的更多相关文章
- HTML实例之简单的网页布局
需求: <html> <head> <title>简单的表格网页布局</title> <meta charset="UTF-8" ...
- CSS简单的网页布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- Python3网络爬虫（1）：利用urllib进行简单的网页抓取
1.开发环境 pycharm2017.3.3 python3.5 2.网络爬虫的定义 网络爬虫,也叫网络蜘蛛(web spider),如果把互联网比喻成一个蜘蛛网,spider就是一只在网上爬来爬去的 ...
- 8.html表格相关的标记9.html表格实战《简单的网页布局》
<html> <head> <title>第八课标题表格</title> <meta charset="utf-8"> ...
- DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
- 一个简单的网页布局HTML+CSS
<!doctype html> <html> <head> <meta charset="utf-8"/> <title> ...
- 简单的网页布局效果html5+CSS3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用Div+CSS整体布局页面的操作流程
简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head> <meta chars ...
随机推荐
- C#隐私信息(银行账户，身份证号码，名字)中间部分特殊字符替换(*)
最近做到一个关于银行的一个功能模块,需要将隐私信息银行账号中间部分用*代替,于是写下了,如下代码: /// <summary> /// 将传入的字符串中间部分字符替换成特殊字符 /// & ...
- [BZOJ 1086] [SCOI2005] 王室联邦 【树分块】
题目链接:BZOJ - 1086 题目分析 这道题要求给树分块,使得每一块的大小在 [B, 3B] 之间,并且可以通过一个块外的节点(块根)使得整个块联通. 那么我们使用一种 DFS,维护一个栈,DF ...
- Warm up 2
hdu4619:http://acm.hdu.edu.cn/showproblem.php?pid=4619 题意:题目大意:给你两种纸牌 ,一种水平放置共有n张 ,一种竖直放置共有m张.水平放置的纸 ...
- zoj 3841 Cards
题意:给你52张牌,已知一个牌的序列,然后利用剩余的牌,能排成多少个序列,这个序列比已知的序列字典序小. 思路:从左到右尽可能放比已知序列相应位置小,找不到就放一样,然后求组合数就可以.多重集排列定理 ...
- RSA算法原理（一）
如果你问我,哪一种算法最重要? 我可能会回答"公钥加密算法". 因为它是计算机通信安全的基石,保证了加密数据不会被破解.你可以想象一下,信用卡交易被破解的后果. 进入正题之前,我先 ...
- SQLserver 数据库
1.数据库: 结构化查询语言(Structured Query Language)简称SQL: 数据库管理系统(Database Management System)简称DBMS: 数据库管理员(Da ...
- druid配置（转）
java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,有不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色的性能,也 ...
- LeetCode解题报告:Insertion Sort List
Insertion Sort List Sort a linked list using insertion sort. leetcode subject思路:标准的插入排序.考察一下链表的操作. 对 ...
- WebSorcket学习
传统 Web 模式在处理高并发及实时性需求的时候经常采用以下方案: 1.轮询,原理简单易懂,就是客户端通过一定的时间间隔以频繁请求的方式向服务器发送请求,来保持客户端和服务器端的数据同步.问题很明显, ...
- （转载）php获取mysql版本的几种方法小结
(转载)http://www.jb51.net/article/13930.htm 查询当前连接的MYSQL数据库的版本,可以用下面SQL语句来实现 select VERSION(); 当前$res= ...