HTML——上中下布局
上中下布局是最主要的布局方式,本比如果用户屏幕分辨率为800*600像素。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3Vuc2h1bWlu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
<!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——上中下布局的更多相关文章
- Xamarin.Android 上中下布局
xml代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:and ...
- div上中下布局中间自适应
需求1: 头尾固定高度,中间自适应 1.上部(header)Div高度固定100px,宽度100%: 2.下部(footer)Div高度固定100px,宽度100%: 3.中部(middle)DIV高 ...
- Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 用frame实现最基本的上中下三层布局,中间又分左右两部分.
用frame实现最基本的上中下三层布局,中间又分左右两部分. 用frame的好处在于不用象DIV一样要对浮动和大小进行精确控制,以及要考虑宽屏的时候怎么办.而且在导航的时候非常简单.比如说,左边是导航 ...
- css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)
一. 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部.底部和左侧固定不动,只有中间右侧超出可滚动. html: <header>我是头部position: fix ...
- java面试必备知识点-上中下三篇写的很详细
参考博客:写的还是相当的经典 http://www.cnblogs.com/absfree/p/5568849.html 上中下三篇写的很详细 http://blog.csdn.net/riverfl ...
- 使用easyui进行上左右布局
在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架. 1.在页面中引入easyui所需的文件 1 &l ...
- css上下或者上中下 自适应布局
方法就是头部不变,中间和底部绝对定位 *{ margin: ; padding: ; } div{ text-align: center; font-size: 30px; } .header,.fo ...
- 《转》ACTIONBAR-PULLTOREFRESHLIBS+沉浸式在部分手机上的布局错乱,目前知道的三星系统(TouchWiz)
转载:http://www.cnblogs.com/wubingshenyin/p/4413672.html(原文连接) 前段时间看见ActionBar-PullToRefreshLibs用来刷新很好 ...
随机推荐
- VB学习生成JavaBean
Application.ActiveWorkbook.Path 获取当前excel文件所在的文件地址 Excel VBA中表示当前工作簿,有Activeworkbook和Thisworkbook 两种 ...
- 【BZOJ4487】【JSOI2015】染色问题
题意: 棋盘是一个n×m的矩形,分成n行m列共n*m个小方格.现在萌萌和南南有C种不同颜色的颜料,他们希望把棋盘用这些颜料染色,并满足以下规定: 1. 棋盘的每一个小方格既可以染色(染成C种颜色中 ...
- [USACO4.1]篱笆回路Fence Loops
题目:USACO Training 4.1(在官网上提交需加文件输入输出).洛谷P2738. 题目大意:给你一张图里的边集,让你求出这张图的最小环. 解题思路:求最小环很简单,用Floyd即可.最重要 ...
- 让div垂直居中
参考链接:https://www.cnblogs.com/softwarefang/p/6095806.html 以前我的方法总是比较粗暴,纯粹通过margin来实现,这个方法的缺点不仅在于需要多次微 ...
- 【Henu ACM Round#24 E】Connected Components
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 要求把连续的一段li..ri的边全都删掉. 然后求剩下的图的联通数 如果暴力的话 复杂度显然是O(k*m)级别的. 考虑我们把li. ...
- 【BZOJ 1150】[CTSC2007]数据备份Backup
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 选择的连接肯定是相邻的点对. 那么我们处理出来长度为n-1的数组a 其中a[i-1] = dis[i]-dis[i-1] 那么问题就 ...
- Mysql导入Sql文件时报Error Code: 2013 - Lost connection to MySQL server during query
MySql 有时我们导入sql文件,文件过大,导致Error Code: 2013 - Lost connection to MySQL server during query这种错误 执行以下: S ...
- 2.Maven特点,Maven约定,建立第一个Maven项目
1 Maven是跨平台的项目管理工具.主要服务于基于java平台的项目构建,依赖管理和项目信息管理. 项目构建 清理à编译à測试à报告à打包à部署 理想的项目构建: 高度自己主动化 跨平台 可重 ...
- HDU1232 畅通project 并查集
这道题跟HDU 1213 How Many Tables 并查集很接近,都是赤裸裸的并查集的题. 思路:如果还须要建n-1条路.每并一次就自减1. 參考代码: #include<stdio.h& ...
- html5播放m3u8视频,web端看直播
https://github.com/jiqing9006/hLive <!DOCTYPE html> <html> <head> <meta charset ...