DIV布局之三行三列之高度自适应补遗

原创 2007年09月29日 09:38:00

很显然,上篇文章只是在理想范畴内做了三行三列的三列自适应高。对于一般的站点,那样布局设计其实也就可以了,但如果针对的是门户,或者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部分写在了三列的最前面(一般情况下,网站的主要内容都体现在页面结构中的中间部位),也就是说不是按它的视觉顺序来写的,而是通过布局来达到这样的视觉顺序。

由于我们的网络环境可能并不是那么理想,于是可能需要一些技巧来弥补这些不足。

按说,如果打开一个网站,等半天还没出来内容,或者出来的都是些无关轻重的内容,这多少让人感到无趣。所以我们就想办法,让重要的内容可以先显示出来,而其他的内容则可以慢慢的加载,因为浏览者的眼球被都主要的东西给吸引了,一些轻的内容暂时不会去注意。

希望这篇文章能给朋友带来帮助。

 

DIV布局之三行三列之高度自适应

写了几篇宽度自适应的布局后,发现很多朋友都对高度自适应十分感兴趣,于是整理了一篇贴了大家参考一下:一般来说一个有好几列的布局,每列的内容都是不固定的,或多或少。所以在做布局的时候一般不会给出每列的定高...
  • storm0
  • storm0
  • 2007年09月29日 09:37
  • 518

DIV布局之三行三列左右两栏固定中间自适应

忙了2个星期,终于有时间整理出下面这篇文章了,呵呵。这个布局其实是在之前两个layout上的一个延伸,做了之前两个,再做一个这样的layout应该不会有什么问题滴,手法都差不多。要使宽度会自适应,顾名...
  • storm0
  • storm0
  • 2007年09月29日 09:30
  • 1704

脚本控制三行三列自适应高度DIV布局

CSS #fbox,#mbox,#sbox{width:250px;float:left;margin:0 5px;border:1px solid #009;}HTML body onload="P...
  • veiny
  • veiny
  • 2008年12月16日 17:36
  • 509

Android基础入门教程——2.2.3 TableLayout(表格布局)

Android基础入门教程——2.2.3 TableLayout(表格布局)标签(空格分隔): Android基础入门教程本节引言:前面我们已经学习了平时实际开发中用得较多的线性布局(LinearLa...
  • zpj779878443
  • zpj779878443
  • 2015年07月21日 09:20
  • 9246

如何利用CSS+DIV 实现三列自适应高和宽的布局(不用javascript)

需求:请用div+css自适应浏览器宽度和高度的水平三列布局,左右两列宽度均为为100px,html结构如下(可以适当修改结构): class="left"> ...
  • wgw335363240
  • wgw335363240
  • 2011年07月12日 20:05
  • 5714

三行三列的布局2

 body{background:#999;text-align:center;color: #333;font-family:arial,verdana,sans-serif;}#header{wi...
  • JackieCong
  • JackieCong
  • 2006年10月08日 22:55
  • 497

html面试题:三行三列布局,表格有合并,不准嵌套使用表格

html,body{padding:10px;margin: 0px;width:100%;height:100%;overflow: hidden;} td{width:100px; height:...
  • wuzuyu365
  • wuzuyu365
  • 2014年05月14日 09:29
  • 807

css——之三行三列等高布局

转载第一步:创建一个结构xhtml开始于header, footer, and containerCSS先定义container,给将要加入的sideleft,和sideright留下个位置#cont...
  • sxdtwlx_bj
  • sxdtwlx_bj
  • 2007年03月02日 11:52
  • 299

SQL一列三行变成一列一行

1. sqltable  table
  • suheonline
  • suheonline
  • 2014年05月07日 12:44
  • 1440

优化的一个编程题:123456789九个数组成三行三列撇捺等于15 2007-4-9

2007-04-09 13:39 using System;using System.Collection...
  • ybk441131
  • ybk441131
  • 2007年04月09日 14:31
  • 1455
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV布局之三行三列之高度自适应补遗
举报原因:
原因补充:

(最多只允许输入30个字)