22 五 07 根据浏览器分辨率自动调整网页宽度的一个例子
）及更高的分辨率，将逐步成为主流。就用户的使用习惯而言，纵向滚动是很自然的，但横向滚动，就让人恼火了。所以，当前的大部分web页面设计，均采用800px宽度居中的形式来设计。这样的好处无疑是很明显的，较好的兼容性，无横向滚动，并且由于固定大小，界面可以设计得很美观。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=GBK”
/>
<meta name=”Security” content=”public” />
<meta name=”DC.Rights” content=”Copyright (c) 2007 by Johnson
Zhong” />
<meta name=”KEYWords” contect=”xhtml sample” />
<meta name=”DEscription” contect=”xhtml sample” />
<meta name=”Author” contect=”Johnson Zhong” />
<meta name=”Robots” contect=”all” />
<style type=”text/css”>
BODY{
MARGIN: 0px;
}
#wrap {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px;
BACKGROUND: #ffffff; PADDING-BOTTOM: 10px; OVERFLOW: hidden;
WIDTH:
expression(this.offsetParent.clientWidth<800?”770px”:”99%”);
PADDING-TOP: 2px; min-width: 770px
}
#main {
CLEAR: both; BACKGROUND: #fff; MARGIN-TOP:
6px;
}
#leftbar {
BORDER-RIGHT: #dddddd 1px solid; BORDER-LEFT:
#dddddd 1px solid; BORDER-TOP: #dddddd 1px solid; BORDER-BOTTOM:
#dddddd 1px solid; BACKGROUND: #F2F9DC; FLOAT: left;
PADDING-BOTTOM: 5px; WIDTH: 188px; height:100%
}
#cenbar {
FLOAT: left; PADDING-BOTTOM: 10px; WIDTH:
100%;
}
#sublogopanel {
CLEAR: both; width:100%; height:80px;
position:relative; BACKGROUND: url(/_img/ad-bg.jpg) repeat-y
left;
}
#rightbar {
FLOAT: left; PADDING-BOTTOM: 10px; OVERFLOW:
hidden; WIDTH: 180px; margin-left:0px; margin-top:0px;
background:#cccccc
}
</style>
<title>xhtml sample!</title>
</head>
<body>
<!–body层开始–>
<div id=”wrap”>
<div id=”main”>
<table width=”100%” height=”100%”
cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td width=”188″
height=”100%” valign=”top”>
<!–左边–>
<div id=”leftbar”>
<table
width=”100%” height=”100%” cellspacing=”0″ cellpadding=”0″
border=”0″>
<tr>
<td
height=”72″ valign=”top”> </td>
</tr>
</table>
</div>
<!–左边结束–>
</td>
<td width=”100%”
valign=”top”>
<!–中间内容–>
<div id=”cenbar”>
<table width=”100%”
height=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td
width=”100%”>
<div
id=”sublogopanel”>
<img
height=”80″ width=”388″
src=”/_img/sublogo_esource.jpg”>
</div>
</td>
</tr>
</table>
</div>
<!–中间内容结束–>
</td>
<td width=”180″
valign=”top”>
<!–右边–>
<div id=”rightbar”>
<table width=”100%”
height=”72″>
<tr>
<td
width=”180″ height=”1″>
</td>
</tr>
</table>
</div>
<!–右边结束–>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
以上代码中，将页面树向分为三栏，其中左右栏宽度固定，中间栏宽度自动调整。
加红的两处地方比较关键，第一处：
WIDTH:
expression(this.offsetParent.clientWidth<800?”770px”:”99%”);
通过在CSS样式表中应用javascript判断：如果当前窗口宽度小于800，则页面宽度为770px，否则为当前窗口宽度*99%；
<img height=”80″
width=”388″ src=”/_img/sublogo_esource.jpg”>
在中间层插入一张图片，确保当用户窗口宽度小于800时候，页面宽度不在缩小。
浏览效果分别如下：
1280*1024
1024*768
800*600
