CSS布局：根據瀏覽器寬度自動把布局從三欄切換成兩欄

發表日期：2015-12-19 文章編輯：南昌開優網絡瀏覽次數：4369 標簽：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布局：根據瀏覽器寬度自動把布局從三欄切換成兩欄加底欄-開優網絡</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="關于腳本使用的相關說明." >關于腳本使用的相關說明(英文)</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> 
</body> 
</html>

返回列表

上一篇：CSS布局：右欄固定寬度,左欄內容先出現... 下一篇：CSS布局：自適應高度的CSS布局

欧美日韩一区二区三区四区不卡,日韩欧美视频一区二区三区四区,久久精品欧美一区二区三区不卡,国产精品久久久乱弄

CSS布局：根據瀏覽器寬度自動把布局從三欄切換成兩欄