HTML——左右側边栏布局
<!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——左右側边栏布局的更多相关文章
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- ViewPager+GridView实现首页导航栏布局分页效果
如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...
- Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- H5横向三栏布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- CSS布局：Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- CSS 实现：两栏布局（一边固定，一边自适应）
☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...
- 转：CSS布局：Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- CSS3超酷移动手机滑动隐藏側边栏菜单特效
这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及 ...
随机推荐
- java反射机制入门04
需要jxl.jar package com.rainmer.main; import java.io.File; import java.io.IOException; import java.uti ...
- C++对C语言的非面向对象特性扩充(3)
今天要讲的是C++作用域运算符"::",强制类型转换的扩充,C++中相对于C中malloc和free函数的运算符new和delete,以及C++对C的一个重要扩充:引用(refer ...
- 为什么cp很多小文件非常慢——对cp和rm命令的一些思考
linux中的文件复制命令——CP linux中文件剪切的命令——MV 1.问题背景 今天在某个目的动作过程中想把一个文件夹下的文件复制到另外的一个文件夹下 cp -fr ./dir1/ /d ...
- select into from 和 insert into select 的用法和区别(转)
转自:http://www.studyofnet.com/news/182.html select into from 和 insert into select都是用来复制表,两者的主要区别为: se ...
- windos下安装PEAR 注意
1.在这里下载PEAR http://pear.php.net/go-pear.phar 在页面右键另存为 go-pear.phar 到PHP的根目录,并去目录查看是否保存为了go-pear.phar ...
- seajs + easyui [转]
* *content seajs+easyui使用 */ /** * 首先来看看在seajs中jquery和jquery插件如何使用 */ 1.jquery.js define(function(re ...
- [WPF疑难] 继承自定义窗口
原文 [WPF疑难] 继承自定义窗口 [WPF疑难] 继承自定义窗口 周银辉 项目中有不少的弹出窗口,按照美工的设计其外边框(包括最大化,最小化,关闭等按钮)自然不同于Window自身的,但每个弹出框 ...
- 工商管理硕士(MBA)-北大国际MBA
工商管理硕士(MBA)-北大国际MBA [EMBA校友跨届晚会]不管风雨彩虹 我们永远在一起
- mac 系统开发android，真机调试解决方式（无数的坑之后吐血总结）
近期学习android开发,安装了ADT开发环境之后,启动模拟器,慢的要死啊,全然不如苹果的好用,没法,自己买个android手机,准备联机调试程序.没想到在这个过程中,遇到了好多的坑,作为一个新人, ...
- hdu4513之manacher算法
吉哥系列故事——完美队形II Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) T ...