• 客服热线：021-67820741
用户名:
密　码:

解决列高度自适应(列高度相同)的五种方法

解决列高度自适应(列高度相同)的五种方法

　　1.背景图填充

　　这是使用最广泛的一种做法，无hacks，推荐使用：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<title>Equal height(列高度相同的方法)</title>

　　<style type="text/css">

　　body{

　　padding: 0;

　　margin: 0;

　　font-size: 12px;

　　font-family: Arial, Helvetica, sans-serif;

　　line-height: 140%;

　　background:#E7DFD3;

　　}

　　#middle{

　　width: 580px;

　　float:left;

　　background:#FFFFFF;

　　text-align:left;

　　}

　　#header,#footer{

　　background: #E8E8E8;

　　width: 750px;

　　text-align:center;

　　}

　　#sideleft{

　　width: 580px;

　　float: left;

　　position:relative;

　　margin-left:-580px;

　　}

　　#sideright{

　　width: 170px;

　　float: right;

　　position:relative;

　　margin: 0 -170px 0 0;

　　background: #F0F0F0;

　　}

　　#footer{

　　clear:both;

　　}

　　h1,h2,address,p{

　　margin: 0;

　　padding: .8em;

　　}

　　h1,h2{font-size: 20px;}

　　</style>

　　<script type="text/javascript">

　　// <![CDATA[

　　function toggleContent(name,n) {

　　var i,t=‘‘,el = document.getElementById(name);

　　if (!el.origCont) el.origCont = el.innerHTML;

　　for (i=0;i<n;i++) t += el.origCont;

　　el.innerHTML = t;

　　}

　　// ]]>

　　</script>

　　</head>

　　<body>

　　<div id="header">

　　<h1>Head</h1>

　　<div id="middle">

　　<div id="sideright">

　　<div id="sideleft">

　　<h2>sideleft</h2>

　　<p><a href="javascript:toggleContent(‘sideleft‘,1)">默认长度</a>&nbsp;&nbsp;<a href="javascript:toggleContent(‘sideleft‘,2)">加长页面</a></p>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　</div>

　　<h2>sideright</h2>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　</div></div>

　　<div id="footer">

　　<address>

　　Footer

　　</address>

　　<p>制作：<a href="http://homepage.yesky.com">网页陶吧</a></p>

　　</div>

　　</body>

　　</html>

　　<script language="Javascript">

　　var now = new Date();

　　document.write("<img src=‘http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"‘ border=‘0‘ alt=‘‘ width=‘0‘ height=‘0‘>");

　　</script>

　　2.采用脚本控制列的高度（一）

　　需要事先知道哪列的高度，以此为基准用脚本控制。

　　document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"

　　上面的代码是以sideright的基准高度来控制sideleft的高度。

　　代码简单，但比较被动：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<title>Equal height(使用JS实现列高度相同的方法)</title>

　　<style type="text/css">

　　body{

　　padding: 0;

　　margin: 0;

　　font-size: 12px;

　　font-family: Arial, Helvetica, sans-serif;

　　line-height: 140%;

　　text-align: center;

　　background:#E7DFD3;

　　}

　　#wrap{

　　width: 750px;

　　margin: 0 auto;

　　/*overflow: hidden;*/

　　}

　　#header{

　　background: #E8E8E8;

　　}

　　#sideleft{

　　width: 580px;

　　float: left;

　　background: #FFF;

　　text-align: left;

　　}

　　#sideright{

　　width: 170px;

　　float: left;

　　background: #F0F0F0;

　　text-align: left;

　　}

　　#footer{

　　background: #E8E8E8;

　　width: 100%;

　　float: left;

　　}

　　h1,h2,address,p{

　　margin: 0;

　　padding: .8em;

　　}

　　h1,h2{font-size: 20px;}

　　</style>

　　</head>

　　<body>

　　<div id="wrap">

　　<div id="header">

　　<h1>Head</h1>

　　</div>

　　<div id="sideleft">

　　<h2>sideleft</h2>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　</div>

　　<div id="sideright">

　　<h2>sideright</h2>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　</div>

　　<script type="text/javascript">

　　document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"

　　</script>

　　<div id="footer">

　　<address>

　　Footer

　　</address>

　　<p>制作：<a href="http://homepage.yesky.com">网页陶吧</a></p>

　　</div>

　　</div>

　　</body>

　　</html><script language="Javascript">

　　var now = new Date();

　　document.write("<img src=‘http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"‘ border=‘0‘ alt=‘‘ width=‘0‘ height=‘0‘>");

　　</script>

　　3.采用脚本控制列的高度（二）

　　不需要事先知道哪列的高度，脚本自动判断。

　　代码较复杂，有点延时：

　　<!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" xml:lang="en" lang="en">

　　<head>

　　<title>脚本控制三行三列自适应高度DIV布局</title>

　　<script src="../js/eqCols.js" type="text/javascript"></script>

　　<style type="text/css">

　　<!--

　　body{

　　font-size: 75%;

　　font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

　　line-height: 100%;

　　margin: 5px;

　　padding: 0px;

　　}

　　#header,#mid,#footer{

　　width: 760px;

　　margin: 0px auto;

　　padding: 0px;

　　}

　　#header{

　　background: #F4F4F4;

　　height: 60px;

　　margin-bottom: 5px;

　　}

　　h3,h5{

　　padding-top: 25px;

　　color: #708090;

　　text-align: center;

　　margin: 0;

　　}

　　#fbox{

　　background: #F1F1F1;

　　width: 195px;

　　float: left;

　　}

　　#mbox{

　　background: #DFF7FF;

　　margin: 0px 5px 0px;

　　padding: 0px;

　　float: left;

　　width: 360px;

　　}

　　#sbox{

　　background: #FFEBCC;

　　width: 195px;

　　float: right;

　　}

　　p{

　　margin: 0px;

　　padding: 10px;

　　text-indent: 2em;

　　line-height: 130%;

　　}

　　#footer{

　　background: #CDDBED;

　　border-top: solid 5px #FFFFFF;

　　text-align: center;

　　height: 60px;

　　clear: both;

　　}

　　-->

　　</style>

　　</head>

　　<body onload="P7_equalCols(‘fbox‘,‘mbox‘,‘sbox‘)">

　　<div id="header"><h3>脚本控制三行三列自适应高度DIV布局</h3></div>

　　<div id="mid">

　　<div id="fbox"><p>

　　亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。

　　使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。

　　</p><p>

　　亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。

　　使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。

　　</p></div>

　　<div id="mbox"><p>

　　亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。

　　使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。

　　</p>

　　<p>

　　如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。

　　</p>

　　<p>

　　亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。

　　使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。

　　</p>

　　<p>

　　如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。

　　</p>

　　</div><div id="sbox"><p>

　　亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 - 你我变老时就会成为他们的一员。

　　使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。

　　</p></div>

　　</div>

　　<div id="footer"><h5>仅供演示<a href="http://homepage.yesky.com">网页陶吧</a></h5></div>

　　</body>

　　</html> <script language="Javascript">

　　var now = new Date();

　　document.write("<img src=‘http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"‘ border=‘0‘ alt=‘‘ width=‘0‘ height=‘0‘>");

　　</script>

　　4.采用负的外边界和内补丁相结合

　　不需要事先知道哪列的高度。

　　hacks比较多（主要是opera的），但容易使用，推荐：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>

　　<style type="text/css">

　　body{

　　padding: 0;

　　margin: 0;

　　font-size: 12px;

　　font-family: Arial, Helvetica, sans-serif;

　　line-height: 140%;

　　text-align: center;

　　background:#E7DFD3;

　　}

　　#wrap{

　　width: 750px;

　　margin: 0 auto;

　　overflow: hidden;

　　}

　　#header{

　　background: #E8E8E8;

　　}

　　#sideleft{

　　width: 580px;

　　float: left;

　　background: #FFF;

　　text-align: left;

　　}

　　#sideright{

　　width: 170px;

　　float: left;

　　background: #F0F0F0;

　　text-align: left;

　　}

　　/* easy clearing */

　　#wrap:after

　　{

　　content: ‘[DO NOT LEAVE IT IS NOT REAL]‘;

　　display: block;

　　height: 0;

　　clear: both;

　　visibility: hidden;

　　}

　　#wrap

　　{

　　display: inline-block;

　　}

　　/*\*/

　　#wrap

　　{

　　display: block;

　　}

　　/* end easy clearing */

　　/*\*/

　　#sideleft, #sideright

　　{

　　padding-bottom: 32767px !important;

　　margin-bottom: -32767px !important;

　　}

　　@media all and (min-width: 0px) {

　　#sideleft, #sideright

　　{

　　padding-bottom: 0 !important;

　　margin-bottom: 0 !important;

　　}

　　#sideleft:before, #sideright:before

　　{

　　content: ‘[DO NOT LEAVE IT IS NOT REAL]‘;

　　display: block;

　　background: inherit;

　　padding-top: 32767px !important;

　　margin-bottom: -32767px !important;

　　height: 0;

　　}

　　}

　　/**/

　　#footer{

　　background: #E8E8E8;

　　width: 100%;

　　float: left;

　　}

　　h1,h2,address,p{

　　margin: 0;

　　padding: .8em;

　　}

　　h1,h2{font-size: 20px;}

　　</style>

　　</head>

　　<body>

　　<div id="wrap">

　　<div id="header">

　　<h1>Head</h1>

　　</div>

　　<div id="sideleft">

　　<h2>sideleft</h2>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　</div>

　　<div id="sideright">

　　<h2>sideright</h2>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　</div>

　　<div id="footer">

　　<address>

　　Footer

　　</address>

　　<p>制作：<a href="http://homepage.yesky.com">网页陶吧</a></p>

　　</div>

　　</div>

　　</body>

　　</html>

　　<script language="Javascript">

　　var now = new Date();

　　document.write("<img src=‘http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"‘ border=‘0‘ alt=‘‘ width=‘0‘ height=‘0‘>");

　　</script>

　　5.采用负的左右边界和相对定位

　　下面的例子能较好地解决列高度相同的问题。

　　三行二列布局，主要内容在左边，网页宽度750px,左列580px,右列170px。

　　CSS代码：

　　以下是引用片段：

　　#middle{

　　width: 580px;

　　float:left;

　　background:#FFFFFF;

　　text-align:left;

　　}

　　#sideleft{

　　width: 580px;

　　float: left;

　　position:relative;

　　margin-left:-580px;

　　}

　　#sideright{

　　width: 170px;

　　float: right;

　　position:relative;

　　margin: 0 -170px 0 0;

　　background: #F0F0F0;

　　}

　　xhtml代码：

　　以下是引用片段：

　　<div id="middle">

　　<div id="sideright">

　　<div id="sideleft">

　　</div>

　　</div>

　　</div>

　　从结构看，middle（使用的是左列希望的背景色）在最外面，宽度等于sideleft的宽度，往里一层是sideright，其宽度为170px,浮动方向是右边。但其右面的边界是负的170px，相当于将sideright拉向右面（右面紧贴着middle的右边）170px的位置。而sideleft又是套在sideright里面的，其内容先于sideright出来，左边界是负的580，相当于在sideright左边580px，此时sideleft和middle位置重合。

　　优点：不需要背景图片，无hacks，完全的自适应高度。

　　缺点：现在的代码只能左对齐。

　　演示：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

　　<head>

　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

　　<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>

　　<style type="text/css">

　　body{

　　padding: 0;

　　margin: 0;

　　font-size: 12px;

　　font-family: Arial, Helvetica, sans-serif;

　　line-height: 140%;

　　text-align: center;

　　background:#E7DFD3;

　　}

　　#wrap{

　　width: 750px;

　　margin: 0 auto;

　　overflow: hidden;

　　}

　　#header{

　　background: #E8E8E8;

　　}

　　#sideleft{

　　width: 580px;

　　float: left;

　　background: #FFF;

　　text-align: left;

　　}

　　#sideright{

　　width: 170px;

　　float: left;

　　background: #F0F0F0;

　　text-align: left;

　　}

　　/* easy clearing */

　　#wrap:after

　　{

　　content: ‘[DO NOT LEAVE IT IS NOT REAL]‘;

　　display: block;

　　height: 0;

　　clear: both;

　　visibility: hidden;

　　}

　　#wrap

　　{

　　display: inline-block;

　　}

　　/*\*/

　　#wrap

　　{

　　display: block;

　　}

　　/* end easy clearing */

　　/*\*/

　　#sideleft, #sideright

　　{

　　padding-bottom: 32767px !important;

　　margin-bottom: -32767px !important;

　　}

　　@media all and (min-width: 0px) {

　　#sideleft, #sideright

　　{

　　padding-bottom: 0 !important;

　　margin-bottom: 0 !important;

　　}

　　#sideleft:before, #sideright:before

　　{

　　content: ‘[DO NOT LEAVE IT IS NOT REAL]‘;

　　display: block;

　　background: inherit;

　　padding-top: 32767px !important;

　　margin-bottom: -32767px !important;

　　height: 0;

　　}

　　}

　　/**/

　　#footer{

　　background: #E8E8E8;

　　width: 100%;

　　float: left;

　　}

　　h1,h2,address,p{

　　margin: 0;

　　padding: .8em;

　　}

　　h1,h2{font-size: 20px;}

　　</style>

　　</head>

　　<body>

　　<div id="wrap">

　　<div id="header">

　　<h1>Head</h1>

　　</div>

　　<div id="sideleft">

　　<h2>sideleft</h2>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　</div>

　　<div id="sideright">

　　<h2>sideright</h2>

　　<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>

　　<p> 像素是计算机屏幕上的不可缩放的点，而一个

　　h3 就是一个字大小的方块。由于字体大小的变化， h3

　　代表用户喜欢的文字大小的相对单位。 </p>

　　<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>

　　<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

　　</div>

　　<div id="footer">

　　<address>

　　Footer

　　</address>

　　<p>制作：<a href="http://homepage.yesky.com">网页陶吧</a></p>

　　</div>

　　</div>

　　</body>

　　</html>

　　<script language="Javascript">

　　var now = new Date();

　　document.write("<img src=‘http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"‘ border=‘0‘ alt=‘‘ width=‘0‘ height=‘0‘>");

　　</script>

.

  来源：互联网
阅读： 次
日期：2010-8-5
 
【 收藏此文 】 【 打印此文 】   
  • 上一篇:最小高度100%页脚保持在底部的布局方法
  • 下一篇:没有了
  • TAG: 解决列高度自适应(列高度相同)的五种方法
    		•
    推荐内容
  • DIV元素和SPAN元素的区别
  • Dreamweaver制作网页技巧20则
  • 网页设计的发展历史
    		•
    最近更新
  • 解决列高度自适应(列高度相同)的五种方法
  • 最小高度100%页脚保持在底部的布局方法
  • 设计实例：实现让多个DIV排列时居中
  • 网页特效欣赏：非常酷的角BANNER
  • 设计实例：不同色链接和其下划线
  • 设计实例：Hover over下的边框变化
  • 设计实例：看看IE中有关1px的Bug
  • CSS网页代码编写技巧：隔行换色的实现
  • CSS讨论：IE下中英文字体下划线对齐问题
  • 雅黑字体对IE显示网页布局的影响
  • 可扩展圆角标签的实现方法
  • 相册的自动播放效果SlideShow
  • CSS控制文本自动换行
  • Div+CSS+JS树型菜单，可刷新
  • 聚氨酯漆和聚酯漆有什么不同
  • 上海品牌网站建设－上海专业的网站建设公司
  • 广西移动 www.gx.chinamobile.com
  • 河南工业大学 www.zzit.edu.cn
  • 河南移动 www.ha.chinamobile.com
  • 黑龙江信息港 www.hlj.net
    		•
    人气排行
  • 辽宁福彩 www.lnlotto.com
  • 河南移动 www.ha.chinamobile.com
  • 广西移动 www.gx.chinamobile.com
  • 黑龙江卫视 www.hljtv.com
  • 河南工业大学 www.zzit.edu.cn
  • 网页设计的发展历史
  • 为所有的图片加上Alt属性
  • 使用UL列表布局导航菜单
  • 在页面head标签中引入所有的样式表文件
  • 不要使用嵌入式CSS样式
  • 黑龙江信息港 www.hlj.net
  • 一定要闭合HTML标签
  • DIV元素和SPAN元素的区别
  • CSS规则层叠时的优先级算法
  • 在页面底部引入javascript文件
  • Dreamweaver制作网页技巧20则
  • 声明正确的文档类型( DocType )
  • 不要随意使用框架
  • 不要使用嵌入式JavaScript，这都21世纪了！
  • 聚氨酯漆和聚酯漆有什么不同
  • 辽宁师范大学 www.lnnu.edu.cn
    		•
    • 官方网址: dns110.com
    • CopyRight © 2010 域名频道 版权所有
    • 地址：上海市松江区新松江路1188弄37号 邮编：201620
    • 电话： 021-67820741 67820742 67820743 传真： 转分机805 值班电话： 021-67820743
    • 在线支持QQ： 219854  客户服务QQ：714658643  MSN：chenlh@dns110.com  Email： support@dns110.com
    • 沪ICP备06024974号