利用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中没有效果(不知为什么)。
转载于:https://www.cnblogs.com/GIS-liang/p/5761849.html
利用DIV,实现简单的网页布局相关推荐
- css利用什么xhtml标记构建网页布局,css是利用什么XHTML标记构建网页布局
css是利用 的XHTML标记构建网页布局:XHTML是相对HTML来说的,比html更严格,指的是网页结构规范等,而css是用来美化各部分结构:html利用div标签实现整体的网页布局,利用css实 ...
- html中的分离式布局,DIV+CSS技术在网页布局中的应用
摘 要 信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...
- 《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源 下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
- 计算机网页div怎么划分,《网页布局与实现(DIV+CSS)》
编辑推荐:<高职高专计算机教学改革新体系规划教材>特色: ·反映产业技术升级,符合职业教育规律和高端技能型人才成长规律,根据计算机类专业建设和教育教学改革而设计. ·对接职业标准和岗位要求 ...
- html ap div,第10讲 网页布局元素:Ap DIV.ppt
第10讲 网页布局元素:Ap DIV 嵌套的含义:嵌套并不表示一个AP DIV元素在另外一个AP DIV元素里面显示,而是指一个AP元素的代码在另一个AP元素代码的内部. 嵌套在内的为子层,嵌套层外部 ...
- 使用CSS进行简单的网页布局
Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.但是这种基本的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,所以,本文来介绍最简单的几种网页布局方法. ...
- 简单的网页布局实战(表格与HTML框架)
学了html一些最常用的标签后,我们需要自己动手实战,首先,我们主要运用表格相关的标记实现网页布局,先来看一张效果图: 大概思路是整个网页被分成三大块,头部,中部(左部和右部),底部.中部又被分成左部 ...
- 利用Div CSS(嵌套 盒模型)布局页面完整实例流程
Div CSS(嵌套 盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
最新文章
- Gridview导出到Excel,Gridview中的各类控件,Gridview中删除记录的处理
- 如何零基础学习python语言_零基础如何入门Python语言?有哪些学习建议?
- R语言splines包构建基于logistic回归的自然样条分析:南非心脏病数据集、非线性:基函数展开和样条分析、你简单分析的不重要特征,可能只是线性不显著、而非线性是显著的
- Shell中常用的通配符
- 页面添加锚点后如何点击不改变URL?
- vc6开发一个抓包软件_开发一个软件多少钱?3种软件开发公司报价
- SpringBoot整合Redis缓存中间件
- 50 - 算法- LeetCode 104 -二叉树
- 为什么你拼命学,却一无所成?
- 零基础物联网开发,踩坑无数,得到这份宝典 | 原力计划
- python数据拟合
- windows安装fiddler
- linux中用户信息存储在,在linux中,用于存放用户信息的两个文件是/etc/passwd和/etc/shadow。()...
- java nlpir_1---------java调用NLPIR(ICTCLAS2016)实现分词功能
- Dorado7使用常见问题,不定时持续更新。
- 物联网在环境中的应用
- mysqldump: Got error: 1168 differently defined non-MyISAM LOCK TABLES
- 【中级软考—软件设计师】2操作系统2.6段页式存储【**】:2.6.1页式存储
- macos 切换用户_如何在macOS上使用TouchID即时切换用户
- 前端项目实战176-栅格顺序
热门文章
- java版spring cloud+spring boot+redis社交电子商务平台-spring-cloud-config
- 使用MediaCodec硬解码h.265视频及音频进行播放
- Linux命令之cut详解
- thinkphp ajax 无刷新分页效果的实现
- Ubuntu 为普通用户添加sudo权限
- Eclipse中的Web项目自动部署到Tomcat
- 也谈大公司病3——治大国不是烹小鲜
- 探测远程主机操作系统指纹的全新技术
- C++ Hash表模板
- 8.6 edu25 ,577#div2 CF补题(二分 ,dp 与 贪心