上中下布局是最主要的布局方式，本比如果用户屏幕分辨率为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. layui层级

    zIndex:layer.zIndex, success : function(layero){ var zIndex = layer.index; $(layero).css(‘z-index’,z ...

  2. django框架-DRF视图中的request和response

    1.Request 相对于django框架,DRF工程的request类则是继承自HttpRequest类,Rest framework提供了parser解释器,用来解释请求中的content_typ ...

  3. 紫书 例题8-7 UVa 11572（滑动窗口）

    滑动窗口这个方法名字非常形象, 先是窗口的右指针尽量往右滑, 滑不动了就滑窗口的左指针, 滑到右指针又可以开始滑动为止. 这道题是要记录滑的过程中最大的窗口长度, 限制条件是窗口中不能出现重复的值. ...

  4. 紫书 例题11-8 UVa 11082（网络流最大流）

    这道题的建模真的非常的秀, 非常牛逼. 先讲建模过程.源点到每一行连一条弧, 容量为这一行的和减去列数, 然后每一列到汇点连一条弧, 容量为这一列 的和减去行数, 然后每一行和列之间连一条弧, 容量为 ...

  5. 紫书 习题 8-20 UVa 1620 （找规律+求逆序对）

    这道题看了半天没看出什么规律, 然后看到别人的博客, 结论是当n为奇数且逆序数为奇数的时候 无解, 否则有解.但是没有给出证明, 在网上也找到详细的证明--我也不知道是为什么-- 求逆序对有两种方法, ...

  6. Ruby创建命令

    Ruby创建命令

  7. AppCan中标首都机场移动平台项目

    近日.正益无线AppCan依托东方航空.吉祥航空.国家电网.中化集团等大客户项目的丰富成功经验,凭借企业移动信息化建设的良好口碑.强大的移动化实施部署经验和高速响应的技术团队,在与多家国内外移动厂商比 ...

  8. 从一次生产事故说起——linux的单用户模式，救援模式等等

    伴随着今年linux上面最大一个安全漏洞bash漏洞的出现,我们公司也開始了风风火火的漏洞修复工作,机器一多,也就easy出问题,有台64位的linuxserver一不小心就升级了32位 bash 的 ...

  9. 关于Android制作.9.png图片

    第一个问题,.9格式的图片与我们之前的一般图片有什么问题呢? 这是安卓开发里面的一种特殊的图片. 这样的格式的图片在android 环境下具有自适应调节大小的能力. (1)同意开发者定义可扩展区域,当 ...

  10. 封装一个ViewPager真正的实现图片无限循环滚动带导航点

    效果图: 大家在写项目的过程中常常会碰到须要实现Viewpager里面载入几张图片来循环自己主动轮播的效果,假设不封装一下的话代码分散在activity里面会显得非常乱.并且也不利于我们下次复用,所以 ...