<!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. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  2. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  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. H5横向三栏布局

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

  5. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  6. CSS 实现：两栏布局（一边固定，一边自适应）

    ☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...

  7. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  8. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  9. CSS3超酷移动手机滑动隐藏側边栏菜单特效

    这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及 ...

随机推荐

  1. HDU 1045(质因数分解)

    Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Description Tomor ...

  2. Phases of translation

    Phases of translation--翻译阶段 The C++ source file is processed by the compiler as if the following pha ...

  3. 「OC」内存管理

    一.基本原理 (一)为什么要进行内存管理. 由于移动设备的内存极其有限,所以每个APP所占的内存也是有限制的,当app所占用的内存较多时,系统就会发出内存警告,这时需要回收一些不需要再继续使用的内存空 ...

  4. 条款21： 必须返回对象时，不要强行返回对象的reference

    总结: 绝不要返回一个local栈对象的指针或引用:绝不要返回一个被分配的堆对象的引用:绝不要返回一个静态局部对象(为了它,有可能同时需要多个这样的对象的指针或引用). 条款4中给出了“在单线程环境中 ...

  5. Node.js学习笔记2（安装和配置Node.js）

            1.安装         windows下安装,在http://nodejs.org下载安装包进行安装即可.         linux下安装,使用yum或者下载源码进行编译.     ...

  6. typeof操作符的返回值

    使用typeof操作符 对一个值使用typeof操作符可能返回下列某个字符串: 1):undefined——如果这个值未定义 2):boolean——如果这个值是布尔值 3):string——如果这个 ...

  7. poj 2480 Longge's problem

    /** 大意: 计算f(n) = ∑ gcd(i, N) 1<=i <=N. 思路: gcd(i,x*y) = gcd(i,x) * gcd(i, y ) 所以gcd 为积性函数 又因为积 ...

  8. C陷阱与缺陷(一)

    第一章 词法陷阱 术语“符号”指的是程序的一个基本组成单元,其作用相当于一个句子中的单词.编译器中负责将程序分解为一个一个符号的部分,一般称为“词法分析器”. 1.1 =不同于== 一般容易将比较运算 ...

  9. Sqlite出现SQL error: database disk image is malformed的处理

    SQLite有一个很严重的缺点就是不提供Repair命令.导致死亡提示database disk image is malformed它的产生有很多种可能,比如,磁盘空间不足,还有就是写入数据过程中突 ...

  10. python list comprehension twos for loop 嵌套for循环

    list comprehension 后面可以有多个for loops,每个for后面可以有if [(x, y, x * y)for x in(0,1,2,3)for y in(0,1,2,3)if ...