1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  5. 	<head>
  6. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 		<title>上中下布局</title>
  8. 		<style type="text/css">
  9. 			body{
  10. 				background: #42413C ;
  11. 				margin: 0;/*消除body中的留白*/
  12. 				padding: 0;
  13. 				text-align: center;
  14. 			}
  15.  
  16. 			.container{
  17. 				width: 778px;
  18. 				background: #FFF;
  19. 				margin: 0 auto;/*側边的自己主动值与宽度结合使用，能够将布局居中对齐*/
  20. 				text-align: left;
  21. 			}
  22.  
  23. 			.header{
  24. 				padding: 10px 0;
  25. 				background: #ADB96E;
  26. 			}
  27.  
  28. 			.content{
  29. 				padding: 10px 0;
  30. 			}
  31.  
  32. 			.footer{
  33. 				padding: 0px;
  34. 				background: #CCC49F;
  35. 			}
  36. 		</style>
  37. 	</head>
  38. 	<body>
  39. 		<div class="container">
  40. 			<div class="header">
  41. 				<h1>网页头部</h1>
  42. 			</div>
  43. 			<div class="content">
  44. 				<h1>网页正文</h1>
  45. 				<h1>网页正文</h1>
  46. 				<h1>网页正文</h1>
  47. 				<h1>网页正文</h1>
  48. 				<h1>网页正文</h1>
  49. 			</div>
  50. 			<div class="footer">
  51. 				<h1>脚注</h1>
  52. 			</div>
  53. 		</div>
  54. 	</body>
  55. </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. windows7 安装python

    首先去Python官网,https://www.python.org 找到downloads,我这里系统是win7 x64,下载的是最新版本3.4.2 下载完成后有个msi文件,选择文件安装目录,一路 ...

  2. Hadoop平台安装前准备

    集群配置 准备工作 1.  Iptables #chkconfig iptables –list #chkconfig iptables –level 3456off #service iptable ...

  3. django 基础入门（一）

    1. django 基本命令 新建project django-admin.py startproject project-name 新建app python manage.py startapp a ...

  4. 转:FileReader详解与实例---读取并显示图像文件

    ~~~针对需要读取本地图像,并立即显示在浏览器的情况,由于chrome firefox出于安全限制,input file并不返回文件的真实路径,经测试IE6/7/8都会返回真实路径,所以chrome, ...

  5. boost库学习随记六：使用同步定时器、异步定时器、bind、成员函数回调处理、多线程的同步处理示例等

    一.使用同步定时器 这个示例程序通过展示如何在一个定时器执行一个阻塞等待. //makefile #-------------------------------------------------- ...

  6. wiki oi 3115高精度练习之减法

    题目描述 Description 给出两个正整数A和B,计算A-B的值.保证A和B的位数不超过500位. 输入描述 Input Description 读入两个用空格隔开的正整数 输出描述 Outpu ...

  7. 【Web】CGI与Servlet技术对比

    CGI:Common Gateway Interface,通用网关接口. 1.CGI处理步骤 首先,客户端(即Web浏览器)根据某资源的URL向Web服务器提出请求:Web服务器的守护进程(HTTP ...

  8. 【centos6 , 6】linux 查看帮助文档：

    1. 使用   命令 -h 或 命令 --help ,  例: ls -h 2. man命令  : man  命令              例:man ls 3.info命令:           ...

  9. ThinkPHP分页类

    第一种:利用Page类和limit方法 $User = M('User'); // 实例化User对象$count      = $User->where('status=1')->cou ...

  10. html5 学习笔记

    一.ie8及以下对html5相关语义标签的支持 <!-[if lt IE9]> <script src="html5.js"></script> ...