很显然,上篇文章只是在理想范畴内做了三行三列的三列自适应高。对于一般的站点,那样布局设计其实也就可以了,但如果针对的是门户,或者PV超过百万,千万。。。的网站,这样的布局就显得捉襟见肘了。
也就是说,在网络环境不变的情况下,我们唯有想办法通过良性的布局和程序来提高页面的执行浏览速度。
[演示地址:http://www.doyoe.com/model/xhtmlcss/layout/5.htm]
CSS部分:
body {
margin: 0;
font-size: 12px;
font-family: Verdana, Arial;
text-align: center;
}
div {
overflow: hidden;
text-align: left;
}
p,h1,h3 {
margin: 0;
}
#dyhead,#dyfoot {
width: 777px;
margin: auto;
background-color: #bbb;
}
#dymid {
width: 777px;
margin: auto;
background-color: #D2C6D2;
}
.dyleft {
width: 627px;
}
.dyleft-1 {
background-color: #FE0000;
}
.dyleft-2 {
width: 477px;
background-color: #eee;
}
.dyleft,.dyleft-1 {
float: left;
}
.dyleft-2,.dyright {
float: right;
}
.dyleft-1,.dyright {
width: 140px;
background-color: #E7DFD3;
}
.dyleft,.dyleft-1,.dyleft-2,.dyright {
padding-bottom: 32767px!important;
margin-bottom: -32767px!important;
}
#dyfoot {
clear: both;
}
XHTML部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY CSS Layout 三行三列之高度自适应(noscript && 普通模式)</title>
</head>
<body>
<div id="dyhead">
<h1>Head</h1>
</div>
<div id="dymid">
<div class="dyleft">
<div class="dyleft-2">
<h3>Center</h3>
<p>centerpart<br />centerpart<br />centerpart<br />centerpart</p>
</div>
<div class="dyleft-1">
<h3>Left</h3>
<p>leftpart<br />leftpart</p>
</div>
</div>
<div class="dyright">
<h3>Right</h3>
<p>rightpart</p>
</div>
</div>
<div id="dyfoot">
<h1>Footer</h1>
</div>
</body>
</html>
不难看出,这篇布局和上篇有些明显改变的地方,那就是在代码书写顺序上。
我把.dyleft-2也就是center部分写在了三列的最前面(一般情况下,网站的主要内容都体现在页面结构中的中间部位),也就是说不是按它的视觉顺序来写的,而是通过布局来达到这样的视觉顺序。
由于我们的网络环境可能并不是那么理想,于是可能需要一些技巧来弥补这些不足。
按说,如果打开一个网站,等半天还没出来内容,或者出来的都是些无关轻重的内容,这多少让人感到无趣。所以我们就想办法,让重要的内容可以先显示出来,而其他的内容则可以慢慢的加载,因为浏览者的眼球被都主要的东西给吸引了,一些轻的内容暂时不会去注意。
希望这篇文章能给朋友带来帮助。