腾讯的三栏布局考题
这是TC 06年初的一道布局考题,最近还要朋友在讨论,也就挖出来写写我的理解啦!
按附件(下图)制作要求如下:
制作一个页面，首先要一个top，下面是一个bottom，中间是一个三列块的模式，leftpart，midpart，rightpart。特殊要求是这个页是一个门户网站的基本框架,访问量大于100W每日。因成本限制，网络带宽可能满足不了此访问量，会出滞连情况。(另备注:此布局不可用背景图片辅助实现。)
解题思路:
1. 由于网络环境极差，带宽流量极少，页面内容会一部分一部分的慢慢显示出来，由此我们需要把重要的内容(midpart)放在最前端，先让用户得到想要的内容，如上不重要的当然就放在最后啦。(以上所指的是XHTML包含内容的顺序，此时先不考虑样式把内容按次要排好)
2. 接下来就考虑到样式问题,可以利用定位跟浮动把布局调整如下图的样式。
3. 由于不可以使用背景，实现三列同高，难道挺大的，还好用 “正负边界(padding-bottom: 32767px;margin-bottom: -32767px;)” 的方法来还能解决。
根据以上分析所做的答案:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>gulu77制作</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #eee; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 12px/200% Arial; PADDING-TOP: 0px
}
#top {
BACKGROUND: #666; LEFT: 50%; MARGIN-LEFT: -400px; WIDTH: 800px; POSITION: absolute; TOP: 0px; HEIGHT: 20px
}
#main {
MARGIN: 20px auto 0px; OVERFLOW: hidden; WIDTH: 800px
}
#midpart {
BACKGROUND: #fe0000; FLOAT: left; MARGIN-LEFT: 180px; WIDTH: 440px
}
#leftpart {
BACKGROUND: #ffa401; FLOAT: left; MARGIN-LEFT: -620px; WIDTH: 170px
}
#rightpart {
BACKGROUND: #ffa401; FLOAT: right; WIDTH: 170px
}
#midpart {
MARGIN-BOTTOM: -9999px; PADDING-BOTTOM: 9999px; HEIGHT: auto
}
#leftpart {
MARGIN-BOTTOM: -9999px; PADDING-BOTTOM: 9999px; HEIGHT: auto
}
#rightpart {
MARGIN-BOTTOM: -9999px; PADDING-BOTTOM: 9999px; HEIGHT: auto
}
#bottom {
BACKGROUND: #666; MARGIN: auto; WIDTH: 800px
}
</STYLE>
<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY>
<DIV id=main>
<DIV id=midpart>midpart<BR>midpart<BR>midpart<BR>midpart<BR></DIV>
<DIV
id=leftpart>leftpart<BR>leftpart<BR>leftpart<BR>leftpart<BR>leftpart<BR>leftpart<BR>leftpart<BR></DIV>
<DIV
id=rightpart>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR>rightpart<BR></DIV></DIV>
<DIV id=top>top</DIV>
<DIV id=bottom>bottom</DIV></BODY></HTML>