<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>根据浏览器宽度自动把布局从三栏切换成两栏加底栏</title>
<STYLE type="text/css">
*{ margin:0; padding:0}
body{ text-align:center
#wrapper{
margin-left:auto;
margin-right:auto;
text-align:left;
}
#header,#footer{
clear:both;
text-align:center;
}
h1,p{padding:10px;}
#main{
float:left;
width:720px;
}
#content{
float:right;
width:480px;
height:360px;
color:#333;
background-color:#efefef;
}
#extrabar{
float:left;
width:240px;
height:360px;
color:#fff;
background-color:#6666CC;
}
.box{
float:left;
width:240px;
height:120px;
}
#sidebar{ float:left;}
.minwidth{
width:720px;
}
.maxwidth{
width:960px;
}
.minwidth #sidebar{
width:720px;
}
.maxwidth #sidebar{
width:240px;
}
.s1{
color:#fff;
background-color:#6600CC;
}
.s2{
color:#fff;
background-color:#6666CC;
}
.s3{
color:#fff;
background-color:#6633CC;
}
</STYLE>
<SCRIPT type="text/javascript">
//from http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/
wraphandler = {
init: function() {
if (!document.getElementById) return;
// set up the appropriate wrapper
wraphandler.setWrapper();
// and make sure it gets set up again if you resize the window
wraphandler.addEvent(window,"resize",wraphandler.setWrapper);
},
setWrapper: function() {
// width stuff from ppk's http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/index.html
var theWidth = 0;
if (window.innerWidth) {
theWidth = window.innerWidth
} else if (document.documentElement &&
document.documentElement.clientWidth) {
theWidth = document.documentElement.clientWidth
} else if (document.body) {
theWidth = document.body.clientWidth
}
if (theWidth != 0) {
if (theWidth < 1000) {
document.getElementById('wrapper').className = 'minwidth';
} else {
document.getElementById('wrapper').className = 'maxwidth';
}
}
},
addEvent: function( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
}
}
wraphandler.addEvent(window,"load",wraphandler.init);
</SCRIPT>
</head>
<body>
<DIV id="wrapper" class="minwidth">
<DIV id="header">
<H1>根据浏览器宽度自动把布局从三栏切换成两栏加底栏</H1></DIV>
<DIV id="main">
<DIV id="content">
<P>因为要把主内容放这里又想先显示..所以.多套了个div</P>
<P>因为偷懒..选了几个刚刚好的宽度.高度也写死了..只是让大家能看到切换的效果..</P>
<P>米美化..用色块显示..奇丑无比.</P>
<P>相关资料:<A title="关于脚本使用的相关说明." href="http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/">关于脚本使用的相关说明(英文)</A></P></DIV>
<DIV id="extrabar">
<P>这里是ID为extrabar的层...</P></DIV></DIV>
<DIV id="sidebar">
<DIV class="box s1">
<P>在ID为sidebar的层里的一个小栏1</P></DIV>
<DIV class="box s2">
<P>在ID为sidebar的层里的一个小栏2</P></DIV>
<DIV class="box s3">
<P>在ID为sidebar的层里的一个小栏3</P></DIV></DIV>
<DIV id="footer">
</body>
</html>
代码来自:
http://www.zzsck.org/js/css/1187.html
分享到:
相关推荐
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之...左栏div和右栏div都是固定宽度的,并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际
左栏显示89栏排列的数字,中栏排列为90栏,右栏为91栏。 下面的面板显示从 1 开始的第一个数字,其中线性模式很明显。 中间一行从 1e6 开始,上面一行从 1e15 开始,其中质数更稀少,模式看起来几乎是随机的。
} /* --网页中部左栏的CSS定义结束-- */ /* --网页中部中栏的CSS定义开始-- */.main_tdbgall /* 中栏表格总背景颜色定义 */{width: 572;background:#ffffff;}.main_shadow /* 中栏内容间隔表格背景颜色定义(575) *...
居中栏-个人喜好; 我不喜欢阅读左侧的主要供稿方式。 邮件隐私-在邮件列中模糊文本,直到将鼠标悬停在其上方。 更高的媒体预览-使Feed中的媒体卡高375px,而不是默认的200px。 较大的tweet页脚-使“赞” /“ RT...
左列定宽,右列自适应 .left{width:100px;float:left;} .right{overflow:hidden;} 两列顶宽,中栏自适应 .left{width:100px;float:left;} .right{width:100px;float:right;} .center{width:100%;margin:0 100px;} 2...
适用于网站中栏,上栏的flash广告条,源文件,可以自行下载修改,建议用flash8.0以上版本编辑。客家祖地网宣传广告。
在女生100m跨栏跑的教学中,采用3种不同的栏间步教法进行对比实验。其结果经单因素方差分析表明,在女生跨栏跑教学中栏间3步与4步的混合使用,可以最大限度的发挥学生的身体素质水平并取得较好的达标成绩。
SharePoint 2010 文档库编辑视图中栏的汇总设置 SharePoint 2010 文档库编辑视图中项目的表格视图 SharePoint 2010 文档库编辑视图中项目的分组依据 SharePoint 2010 文档库编辑视图中项目的文件夹设置 SharePoint ...
3.网站首页中栏广告,第二排的图片广告显示不正常,希望高手能调用数据库相关图片 4.热点文章排行没按点击数排行,显示条目数限制,好文章不能优先推荐 5.相关文章的调用也有些问题 如有疑问请联系qq79047212 ...
强度图和强度图表通过在笛卡尔平面上放置颜色块的方式在二维图上显示三维数据,例如强度图和图表可显示温度图和地形图(以量值代表高度)。强度图和图表接收三维数字数组,数组中的每一个数字代表一个特定的颜色。在...