上中下布局是最主要的布局方式，本比如果用户屏幕分辨率为800*600像素。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3Vuc2h1bWlu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>上中下布局</title>

		<style type="text/css">

			body{

				background: #42413C ;

				margin: 0;/*消除body中的留白*/

				padding: 0;

				text-align: center;

			}

			.container{

				width: 778px;

				background: #FFF;

				margin: 0 auto;/*側边的自己主动值与宽度结合使用，能够将布局居中对齐*/

				text-align: left;

			}

			.header{

				padding: 10px 0;

				background: #ADB96E;

			}

			.content{

				padding: 10px 0;

			}

			.footer{

				padding: 0px;

				background: #CCC49F;

			}

		</style>

	</head>

	<body>

		<div class="container">

			<div class="header">

				<h1>网页头部</h1>

			</div>

			<div class="content">

				<h1>网页正文</h1>

				<h1>网页正文</h1>

				<h1>网页正文</h1>

				<h1>网页正文</h1>

				<h1>网页正文</h1>

			</div>

			<div class="footer">

				<h1>脚注</h1>

			</div>

		</div>

	</body>

</html>

HTML——上中下布局的更多相关文章

  1. Xamarin.Android 上中下布局

    xml代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:and ...

  2. div上中下布局中间自适应

    需求1: 头尾固定高度,中间自适应 1.上部(header)Div高度固定100px,宽度100%: 2.下部(footer)Div高度固定100px,宽度100%: 3.中部(middle)DIV高 ...

  3. Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  4. 用frame实现最基本的上中下三层布局,中间又分左右两部分.

    用frame实现最基本的上中下三层布局,中间又分左右两部分. 用frame的好处在于不用象DIV一样要对浮动和大小进行精确控制,以及要考虑宽屏的时候怎么办.而且在导航的时候非常简单.比如说,左边是导航 ...

  5. css布局 - 常规上中下分左右布局的一百种实现方法（更新中...）

    一. 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部.底部和左侧固定不动,只有中间右侧超出可滚动. html: <header>我是头部position: fix ...

  6. java面试必备知识点-上中下三篇写的很详细

    参考博客:写的还是相当的经典 http://www.cnblogs.com/absfree/p/5568849.html 上中下三篇写的很详细 http://blog.csdn.net/riverfl ...

  7. 使用easyui进行上左右布局

    在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架. 1.在页面中引入easyui所需的文件 1 &l ...

  8. css上下或者上中下 自适应布局

    方法就是头部不变,中间和底部绝对定位 *{ margin: ; padding: ; } div{ text-align: center; font-size: 30px; } .header,.fo ...

  9. 《转》ACTIONBAR-PULLTOREFRESHLIBS+沉浸式在部分手机上的布局错乱,目前知道的三星系统（TouchWiz）

    转载:http://www.cnblogs.com/wubingshenyin/p/4413672.html(原文连接) 前段时间看见ActionBar-PullToRefreshLibs用来刷新很好 ...

随机推荐

  1. js指定区域全屏

    <html>     <head>         <title>js指定区域全屏</title>         <style>      ...

  2. iOS开发者中心重置设备列表

    苹果开发者账号允许的测试设备为100台,如果你注册了,这台机器就算是一个名额,禁用也算一个名额,仍被计入机器总数,每年可以重置一次,那我们怎么重置机器数量呢? 我们需要给苹果发送申请: https:/ ...

  3. 【BZOJ4448】【SCOI2015】情报传递

    这题面错别字真tm多 题意: Description 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有n名情报员.每名情报员口J-能有若T名(可能没有)下线,除1名大头日外其余n-1 ...

  4. Vue中路由的使用

    在Vue中动态挂载组件 首先需要安装  cnpm install vue-router --save 在main.js中引入VueRouter 并使用 定义一个路由 创建router实例 通过rout ...

  5. [USACO10FEB]吃巧克力Chocolate Eating

    题目:洛谷P2985. 题目大意:有n块巧克力要吃d天,并且只能按顺序吃.一块巧克力有一个开心值,吃了就能增加开心值.一个人初始开心值为0,且每天早上开心值变为原来的一半.问如何吃巧克力才能使开心值最 ...

  6. caioj 1161 欧拉函数3：可见点数

    (x, y)被看到仅当x与y互质 由此联想到欧拉函数 x=y是1个点,然后把正方形分成两半,一边是φ(n) 所以答案是2*∑φ(n)+1 #include<cstdio> #include ...

  7. size(A,1)

    在matlab中,size()用来返回数据序列的行数和列数.size(A,1)返回的是矩阵A所对应的行数.另外,(1)s=size(A), 当只有一个输出参数时,返回一个行向量,该行向量的第一个元素时 ...

  8. Raw-OS源代码分析之任务删除与总结

    分析的内核版本号截止到2014-04-15,基于1.05正式版,blogs会及时跟进最新版本号的内核开发进度,若源代码凝视出现"???"字样,则是未深究理解部分. Raw-OS官方 ...

  9. Java 深拷贝和浅拷贝 利用序列化实现深拷贝

    Java 深拷贝和浅拷贝 转自:http://www.cnblogs.com/mengdd/archive/2013/02/20/2917971.html 深拷贝(deep clone)与浅拷贝(sh ...

  10. vijos--P1211--生日日数(纯模拟)

    P1211生日日数 未递交 标签:[显示标签] 描述 CCC老师的生日是YY年MM月DD日,他想知道自己出生后第一万天纪念日的日期(出生日算第0天). 格式 输入格式 从文件的第一行分别读入YY,MM ...