<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 禁止浏览器从本地缓存中调阅页面。-->
<meta http-equiv="pragram" content="no-cache">
<!--网页不保存在缓存中,每次访问都刷新页面。-->
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<!--同上面意思差不多,必须重新加载页面-->
<!--网页在缓存中的过期时间为0,一旦网页过期,必须从服务器上重新订阅-->
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html,
body,
#box {
height:100%;
font:small/1.5 "宋体", serif;
}
body {
text-align:center;
}
#box {
text-align:left;
background:#666;
display:table;
width:80%;
margin:0 auto;
position:relative;
}
#box > div {
display:table-row;
}
#header,
#footer {
background:#fcc;
height:50px;
vertical-align:bottom;
}
#main {
background:#ccf;
}
#main #wrap {
display:table-cell;
background:#ffc;
vertical-align:middle;
}
#text {
text-align:center;
}
</style>
<!--[if IE]>
<style type="text/css">
#header,
#footer {
width:100%;
z-index:3;
position:absolute;
}
#footer {
bottom:0;
}
#main {
height:100%;
z-index:1;
position:relative;
}
#main #wrap {
position:absolute;
top:50%;
width:100%;
text-align:left;
}
#main #text {
position:relative;
width:100%;
top:-50%;
background:#ccc;
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<div id="header">header</div>
<div id="main">
<div id="wrap">
<div id="text">
<p>测试文本</p>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
分享到:
相关推荐
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... <head> <!– 禁止浏览器从本地缓存中调阅页面。–> <...–网页不保存在缓存中,每次访问都刷新页面。–> <meta http-equiv=”cac
html5新标签使用header、footer、nav、section布局,css设定及使用方法
使用css实现的三列布局,中间一列宽度固定大小,两边宽度要自适应。
三栏布局“左右宽度固定,中间自适应宽度” 方法1、设置浮动,使文档脱离文档流,注意层的顺序 方法2、同样通过负边距来实现,缺点是需要另外增加一个层 方法3、也可以通过绝对定位来实现
三栏布局,中间自适应宽度,三栏自适应高度的布局
div+css模板布局 右侧固定,左侧自适应
7三列_左右固定_中间自适应布局.rar
div+css布局 三行三列 中间自适应
上中下三行布局,上下定高,中间栏自适应浏览器高度,且内容垂直居中。 firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。 对于非ie内核浏览器,通过设定display:table、display:table-...
主要介绍了css 两边固定中间自适应布局的实现,介绍了四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
html div 自适应剧中 上下左右全部居中
网页设计与制作教程课本实例(html+css+javascript)第二版
主要介绍了详解左右宽度固定中间自适应html布局解决方案的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面和大家一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用
实现效果: jQuery网页全屏自适应图片瀑布流布局代码,能够自适应网页的大小,这样的效果还是很酷炫的,在项目中,需要用到瀑布流,还是用自适应的会更佳,php中文网推荐下载!
jQuery网页全屏自适应图片瀑布流布局代码
今天写一个供给大家参考学习,希望大家可以在这个基础上衍生一些其他的,比如三栏布局的那种:左右固定,中间自适应的效果等等 使用方法: 1、引入head部分的CSS代码 2、将body中的代码部分拷贝到你需要的地方
iframe网页上下左右布局模板,可以修改里面的css代码来更改各个模块的大小,位置。很基本使用的网页布局模板
div宽度自适应布局(左边自适应)