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的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及 ...
随机推荐
- Smarterer Test
1.Using xp can swap two characters 2.In normal mode, use /abc/+4 can find the string "abc" ...
- muduo简化(1):Reactor的关键结构
说明:本文参照muduo代码,主要用意是简化muduo代码呈现其主要结构,并脱离muduo的文件依赖. 本节简化的是Reactor的关键结构部分:EventLoop.Poller.Channel.遵照 ...
- 操作数组的工具类Arrays
Java提供的Arrays类里包含一些static修饰的方法可以直接操作数组. int binarySearch(type[] a, type key)使用二分法查询key元素值在a数组中出现的索引, ...
- Windows Phone 8本地化多语言支持
原文 Windows Phone 8本地化多语言支持 在WP8平台处理本地化多语言的支持还是比较容易的,大部分工作都有VS IDE处理,开发者只需简单操作,并翻译本地资源即可实现. 无论您目前的应用是 ...
- bespoke_百度百科
bespoke_百度百科 bespoke
- [置顶] 吃论扯谈---吃货和Office 365订阅的关系
什么事物都可以和吃联系起来,在女孩子穿裙子的季节这是一个悲伤的故事! 说明: :Office365是微软云计算产品之一,其采取订阅的方式,按人头*每月的方式付费,用户可以选择自己需要的服务 2:Off ...
- Service初步了解
1.Service什么 Service它是一个应用程序组件,Android其中的四个核心组件之间 Service没有图形界面 通过经常使用来处理一些比较长耗时的操作 可以使用Service更新Cont ...
- 在Xcode中使用C++与Objective-C混编
有时候,出于性能或可移植性的考虑,需要在iOS项目中使用到C++. 假设我们用C++写了下面的People类: // // People.h // MixedWithCppDemo // // ...
- vs2013内置IISExpress相关问题
问题描述,以前做的程序迁移到vs2013后出现500.22问题. HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设 ...
- ftp上传错误
明明设置好了权限,但是在上传的时候提示如下错误,但在使用的过程当中,发现有的时候是可以上传的,很奇怪的问题. baidu 了一下,发现是下面的这个设置导致的.改过来后,果然正常. 这个设置只是一个字符 ...