<!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. jQuery源码，匿名函数自执行

    jQuery框架的首尾是这样写的()(), (function(window){//这个window是个入参,随便起个名字都行 //这里面全都是js代码 })(window)//这个括号里的windo ...

  2. web.xml 的加载顺序

    context-param -> listener -> filter -> servlet

  3. ThinkPHP第五天(提交类型判定常量IS_POST等，错误页面种类，Model实例化方式，模板中使用函数，foreach循环，模板中.语法配置)

    1.IS_GET.IS_POST.IS_PUT.IS_DELETE.IS_AJAX常量,方便快捷实现各个判断. 在Action类中还可以使用$this->isPost()等进行判断. 2.错误页 ...

  4. tomcat简介之web.xml详解（转）

    http://blog.csdn.net/facepp/archive/2008/04/19/2306602.aspx 位于每个Web应用的WEB-INF路径下的web.xml文件被称为配置描述符,这 ...

  5. kinect for windows - 初认识

    kinect是微软开发的一种计算机输入设备,原来只是用于xbox,kinect负责捕捉用户的动作,让xbox游戏做出相应的反应.很快大家对此非常有兴趣,因此有些geek和组织为kinect开发了驱动和 ...

  6. [置顶] PHP开发实战权威指南-读书总结

    从今年开始,断断续续学习PHP已经有4个月了. 最初,认真学习PHP几天,就弄WordPress搭建了一个个人博客,这也符合技术人的实践理念. 最近,重温PHP开发实战权威指南,做点总结,整理下自己学 ...

  7. [计算机网络] vsftpd的安装与使用

    简单介绍: vsftpd是一个能够执行在类UNIX操作系统上的FTPserver软件,它能够执行在Linux.BSD.Solaris.HP-UX等系统上. 1 vsftpd的安装 在ubuntu系统上 ...

  8. ceph存储之ceph客户端

    CEPH客户端: 大多数Ceph用户不会直接往Ceph存储集群里存储对象,他们通常会选择Ceph块设备.Ceph文件系统.Ceph对象存储之中的一个或多个: 块设备: 要实践本手册,你必须先完成存储集 ...

  9. gpexpand error:Do not have enough valid segments to start the array.

    gpstart error: Do not have enough valid segments to start the array. 这个时候需要检查一下shared_buffers设置改小点,就 ...

  10. BZOJ 2242: [SDOI2011]计算器( 快速幂 + 扩展欧几里德 + BSGS )

    没什么好说的... --------------------------------------------------------------------- #include<cstdio&g ...