CSS布局：根據(jù)瀏覽器寬度自動把布局從三欄切換成兩欄加底欄

2012-11-19　來源/作者：懶人圖庫　分類：CSS樣式　 «»

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>CSS布局：根據(jù)瀏覽器寬度自動把布局從三欄切換成兩欄加底欄-懶人圖庫</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   class="mgcwuyc"   id="wrapper" class="minwidth">
<div   class="y2qkgky"   id="header">
<H1>根據(jù)瀏覽器寬度自動把布局從三欄切換成兩欄加底欄</H1></DIV>
<div   class="ic4oiyq"   id="main">
<div   class="ucyg2uu"   id="content">
<P>因為要把主內(nèi)容放這里又想先顯示..所以.多套了個div</P>
<P>因為偷懶..選了幾個剛剛好的寬度.高度也寫死了..只是讓大家能看到切換的效果..</P>
<P>米美化..用色塊顯示..奇丑無比.</P>
<P>相關(guān)資料：<A title="關(guān)于腳本使用的相關(guān)說明." href="http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/">關(guān)于腳本使用的相關(guān)說明(英文)</A></P></DIV>
<div   class="oucg2ka"   id="extrabar">
<P>這里是ID為extrabar的層...</P></DIV></DIV>
<div   class="ogqkeuo"   id="sidebar">
<div   id="q2kuegk"   class="box s1">
<P>在ID為sidebar的層里的一個小欄1</P></DIV>
<div   id="i02yswm"   class="box s2">
<P>在ID為sidebar的層里的一個小欄2</P></DIV>
<div   id="2uo2ccu"   class="box s3">
<P>在ID為sidebar的層里的一個小欄3</P></DIV></DIV>
<div   class="wuoi2y0"   id="footer">
<P>Copyright <A  rel="me">aoao</A> , <A >Some 
Rights Reserved</A> .</P></DIV></DIV>
<p>查找更多代碼，請訪問：<a href="http://www.cxj168.com/" target="_blank">懶人圖庫</a></p>

</body>
</html>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

根據(jù)瀏覽器寬度自動把布局從三欄切換成兩欄加底欄，腳本換樣式，用腳本去讀取瀏覽器寬度然后改變樣式，寬度如果設(shè)計得好會比較好玩。

標簽：CSS樣式