<!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. [LeetCode]题解（python）：066-Plus One

    题目来源: https://leetcode.com/problems/plus-one/ 题意分析: 给定一个数组,将数加一,返回新的数组.比如[9,9],返回[1,0,0]. 题目思路: 这道题目 ...

  2. mongoDB用java实现增删改查

    package mongo; import java.net.UnknownHostException; import com.mongodb.BasicDBObject; import com.mo ...

  3. QPushButton跑进度条（使用QSS的不同修饰来实现，其实是伪进度条）

    主要用到qlineargradient,写以下CSS样式即可实现: background:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, sto ...

  4. JAE京东云引擎Git上传管理代码教程和京东云数据库导入导出管理

    文章目录 Git管理准备工作 Git工具上传代码 发布代码装程序 mywebsql管理 京东云引擎小结   JAE京东云引擎是京东推出的支持Java.Ruby.Python.PHP.Node.js多语 ...

  5. jsp验证表单后再提交

    在提交表单时,我们常常需要验证核实表单内容,若都不为空时,方能提交:若有文本框为空则不提交,并获取鼠标焦点到文本框上 ,所以我们可以利用onsubmit的方法来做,请看下面例子: <html&g ...

  6. CKEditor和CKFinder整合实现上传下载功能

    CKEditor与CKFinder整合并实现文件上传功能 事先说明:此整合的是java版本号的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其他框架技术) ...

  7. BZOJ 2718: [Violet 4]毕业旅行( 最长反链 )

    一不小心速度就成了#1.... 这道题显然是求最长反链, 最长反链=最小链覆盖.最小链覆盖就是先做一次floyd传递闭包, 再求最小路径覆盖. 最小路径覆盖=N - 二分图最大匹配. 所以把所有点拆成 ...

  8. 百度SiteApp构建网站APP

    现在很多个人网站和企业网站都是传统的Web方式,有没有想过个人/企业网站也能做成APP应用对外宣传呢?专门找人去开发Android和IOS上的APP又太贵,为了赶上移动互联网时髦,我以个人网站试做了一 ...

  9. 《算法导论》读书笔记之图论算法—Dijkstra 算法求最短路径

    自从打ACM以来也算是用Dijkstra算法来求最短路径了好久,现在就写一篇博客来介绍一下这个算法吧 :) Dijkstra(迪杰斯特拉)算法是典型的最短路径路由算法,用于计算一个节点到其他所有节点的 ...

  10. Firemonkey使用iOS的第三方静态库（Link Binary With Libraries）

    最近需要从内存流中直接播放音频,想到了使用第三方音频播放库bass.在windows上可以很方便的使用相应动态库(具体参考万一的博客),但在iOS上却没有相应的使用介绍,准确的说是没有用于Firemo ...