三栏复合布局演示,XHTML,WEB标准

作者：[转载] 文章来源：http://www.alixixi.com/ 更新时间：2005-12-13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>三栏复合布局演示</TITLE>
<META content="Holly Bergevin, April 1, 2003" name=author>
<META http-equiv=content-Type content="text/html; charset=gb2312">
<META content=true name=mssmarttagspreventparsing>
<META
content="A demo showing possibilities for laying out a 
	complex 3-col page."
name=description>
<META
content="demo,test,big john,big,john,position is everything,
	position,css,html,bug,bugs,bug fix,holly bergevin,holly's wilderness"
name=keywords>
<META content=global name=distribution>
<META content=document name=resource-type>
<META content=all name=robots>
<META http-equiv=imagetoolbar content=no>
<STYLE type=text/css>HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 100%; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 100%; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
FONT-SIZE: 80%; BACKGROUND: #9ba49b; COLOR: #000; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}
#pagetitle {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 210%; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #771464; PADDING-TOP: 10px; TEXT-ALIGN: center
}
PRE {
FONT-WEIGHT: normal; FONT-SIZE: 95%; MARGIN: 0px 0px 0px 10px; PADDING-TOP: 8px; FONT-FAMILY: Verdana, sans-serif
}
P {
PADDING-RIGHT: 7px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 8px
}
#contents P {
FONT-WEIGHT: bold
}
.altcolor {
FONT-WEIGHT: bold; COLOR: #eef7e2
}
.altcolor2 {
COLOR: #cde7a8
}
.altcolor3 {
FONT-WEIGHT: bold; COLOR: #771464
}
#demotext {
BORDER-RIGHT: #233622 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #233622 2px solid; PADDING-LEFT: 0px; BACKGROUND: #cde7a8; PADDING-BOTTOM: 5px; MARGIN: 8px 149px 5px 10px; BORDER-LEFT: #233622 2px solid; COLOR: #233622; PADDING-TOP: 0px; BORDER-BOTTOM: #233622 2px solid; POSITION: relative
}
A:link {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: #eef7e2; PADDING-TOP: 1px; TEXT-DECORATION: underline
}
A:visited {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; COLOR: #eef7e2; PADDING-TOP: 1px; TEXT-DECORATION: underline
}
A:hover {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BACKGROUND: #eef7e2; PADDING-BOTTOM: 1px; COLOR: #000; PADDING-TOP: 1px; TEXT-DECORATION: underline
}
#leftbox A:link {
COLOR: #233622; TEXT-DECORATION: underline
}
#leftbox A:visited {
COLOR: #233622; TEXT-DECORATION: underline
}
.right A:link STRONG {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BACKGROUND: #eef7e2; PADDING-BOTTOM: 1px; COLOR: #000; PADDING-TOP: 1px; TEXT-DECORATION: underline
}
.right A:visited STRONG {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BACKGROUND: #eef7e2; PADDING-BOTTOM: 1px; COLOR: #000; PADDING-TOP: 1px; TEXT-DECORATION: underline
}
.right A:link {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BACKGROUND: #eef7e2; PADDING-BOTTOM: 1px; COLOR: #000; PADDING-TOP: 1px; TEXT-DECORATION: underline
}
.right A:visited {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BACKGROUND: #eef7e2; PADDING-BOTTOM: 1px; COLOR: #000; PADDING-TOP: 1px; TEXT-DECORATION: underline
}
.right A:hover STRONG {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BACKGROUND: #f4e6ef; PADDING-BOTTOM: 1px; COLOR: #771464; PADDING-TOP: 1px
}
.right A:hover {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BACKGROUND: #f4e6ef; PADDING-BOTTOM: 1px; COLOR: #771464; PADDING-TOP: 1px
}
#contents A:link {
BACKGROUND: #f4e6ef; COLOR: #000; PADDING-TOP: 0px; TEXT-DECORATION: underline
}
#contents A:visited {
BACKGROUND: #f4e6ef; COLOR: #000; PADDING-TOP: 0px; TEXT-DECORATION: underline
}
#contents A:hover {
BACKGROUND: #233622; COLOR: #f9f; PADDING-TOP: 0px
}
#footer A:link {
COLOR: #771464
}
#footer A:visited {
COLOR: #771464
}
STRONG {
FONT-WEIGHT: bold; COLOR: #233622
}
PRE STRONG {
COLOR: #000
}
#contents STRONG {
COLOR: #f9f
}
#contents PRE.altcolor2 STRONG {
COLOR: #cde7a8
}
.alignright {
PADDING-RIGHT: 10px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2.5em; MARGIN: 0px; PADDING-TOP: 1em; TEXT-ALIGN: right
}
.small {
FONT-SIZE: 0.9em; COLOR: #771464
}
.alignright STRONG {
FONT-WEIGHT: bold; COLOR: #771464
}
.decoration {
FLOAT: right; MARGIN: 0.5em 1em 3px 3px; POSITION: relative
}
UNKNOWN {
MARGIN: 0px 1em 0px 0px
}
.kudos {
BORDER-TOP: #233622 3px double; MARGIN-TOP: 3em; PADDING-BOTTOM: 5px; BORDER-BOTTOM: #233622 3px double
}
#bottom {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
#header {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(images/waterlilies6.jpg) no-repeat 0px 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 100px
}
#leftbox {
BORDER-TOP: #000 1px solid; LEFT: 0px; WIDTH: 215px; COLOR: #000; PADDING-TOP: 5px; POSITION: absolute; BACKGROUND-COLOR: #9ba49b
}
#container {
BACKGROUND: url(images/rightbg.gif) #faf5f8 repeat-y 100% 0px; MARGIN-LEFT: 215px; BORDER-LEFT: #000 1px solid
}
#navmenu {
BORDER-RIGHT: #000 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; BORDER-LEFT: #000 0px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #000 1px solid; POSITION: relative; BACKGROUND-COLOR: #879186
}
#navmenu UL {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0px; FONT-FAMILY: Verdana, sans-serif; LIST-STYLE-TYPE: none; TEXT-ALIGN: center
}
#navmenu UL LI {
BORDER-RIGHT: #000 2px solid; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FLOAT: left; PADDING-BOTTOM: 1px; MARGIN: 3px 0px; WIDTH: 10em; PADDING-TOP: 1px; POSITION: relative
}
#navmenu UL LI.first {
MARGIN-LEFT: 0px; LIST-STYLE-TYPE: none
}
#navmenu UL LI.last {
BORDER-RIGHT-STYLE: none
}
#navmenu A {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; COLOR: #000; PADDING-TOP: 3px
}
#navmenu A:hover {
BACKGROUND: #879186; COLOR: #faf5f8
}
#navclear {
CLEAR: both; DISPLAY: block
}
#rightbox {
RIGHT: 16px; WIDTH: 138px; MARGIN-RIGHT: -15px; PADDING-TOP: 5px; POSITION: absolute
}
#rightbox {
RIGHT: 0px; MARGIN-RIGHT: 0px
}
#wrapper {
MARGIN-RIGHT: 138px; PADDING-TOP: 5px
}
HTML #wrapper {
WIDTH: auto
}
.left {
PADDING-RIGHT: 5px; PADDING-LEFT: 0px; BACKGROUND: #c3c8c3; FLOAT: left; PADDING-BOTTOM: 5px; MARGIN-LEFT: 6px; WIDTH: 43%; PADDING-TOP: 5px
}
UNKNOWN {
MARGIN-LEFT: 12px
}
.right {
PADDING-RIGHT: 5px; PADDING-LEFT: 0px; BACKGROUND: #c3c8c3; FLOAT: right; PADDING-BOTTOM: 5px; WIDTH: 43%; MARGIN-RIGHT: 6px; PADDING-TOP: 5px
}
UNKNOWN {
MARGIN-RIGHT: 12px
}
.clear {
CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#contents {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 15px; MARGIN: 8px 149px 5px 10px; COLOR: #eef7e2; PADDING-TOP: 3px; POSITION: relative; BACKGROUND-COLOR: #233622
}
#footer {
BORDER-TOP: #888 1px dashed; MARGIN-TOP: 1.5em; BACKGROUND: #f0f1f0; MARGIN-RIGHT: 139px
}
</STYLE>

<META content="MSHTML 6.00.3790.2541" name=GENERATOR></HEAD>
<BODY>
<DIV id=header>
<H1 id=pagetitle>Perched Upon a Lily Pad</H1></DIV>
<DIV id=leftbox><PRE><STRONG>#leftbox</STRONG> {
position: absolute;
left: 0px;
width: 215px;
}
</PRE>
<P>该固定宽度的侧栏 <STRONG>#leftbox</STRONG>，是以绝对方式定位的，指定了它的left，而 top
没有指定。因而可以根据<STRONG>#header</STRONG>的高度自动确定它的位置。</P>
<P class=altcolor>此处的背景色来自于 <STRONG><body></STRONG> 标签，这样就可充满整个页面高度。 </P><PRE><STRONG>#header</STRONG> {
background-image:
url("images/waterlilies6.jpg");
background-position: 0 0;
background-repeat: no-repeat;
height: 100px;
}
</PRE>
<P>页面顶部的 <STRONG>#header</STRONG> div
充满了整个视区宽度，它有背景图片，也为其指定了高度，这样在页面装入时，就可以确定后面以绝对定位放置的div的位置。 </P>
<P class="altcolor kudos">多谢<A
href="http://plikt.sverok.net/">Jonas Erlandsson</A>，是他当初的请求引发了这个演示的想法，还要感谢<A
title="Philippe's inspiring image gallery"
href="http://www.l-c-n.com/phiw/">Philippe Wittenbergh</A>在Mac下的测试和很好的建议，并多谢<A
title="Big John's bug and demo site"
href="http://www.positioniseverything.net/index.html">Big John</A>的检查和支持，并鼓励我制作这个演示。</P></DIV>
<DIV id=container>
<DIV id=navmenu>
<UL>
<LI class=first><A
href="http://www.onestab.net/a/pie/3colcomplex.html#">links and links</A>
</LI>
<LI><A
href="http://www.onestab.net/a/pie/3colcomplex.html#">links and links</A>
</LI>
<LI><A
href="http://www.onestab.net/a/pie/3colcomplex.html#">links and links</A>
</LI>
<LI><A
href="http://www.onestab.net/a/pie/3colcomplex.html#">links and links</A>
</LI>
<LI class=last><A
href="http://www.onestab.net/a/pie/3colcomplex.html#">links and links</A>
</LI></UL><SPAN id=navclear></SPAN></DIV>
<DIV id=rightbox><PRE><STRONG>#rightbox</STRONG> {
position: absolute;
right: 0;
margin-right: 0;
width: 138px;
}
</PRE>
<P>这个绝对定位的 <STRONG>#rightbox</STRONG> 有宽度固定，设置了 right 位置。同样，这个div的 top
也没有指定，使得它可以根据前面的对象的高度自动调整位置。</P>
<P
class=altcolor3>这个div的背景色来自于<STRONG>#container</STRONG>内<STRONG>.gif</STRONG>图片，该图片在垂直方向上重复。.</P>
<P>由于本div和 <STRONG>#leftbox</STRONG>都是宽度固定的以绝对定位的div，所以内容过长不能换行时要特别小心，比如很长的 URL
或<STRONG><pre></STRONG>。 IE 会违反标准，将div撑开以包含内容。其他的浏览器会将过宽的内容显示在div之外。 </P>
<P class=altcolor3>IE4/Mac对该绝对定位的div则另有一套。详情和解决方法请看源文件。</P></DIV>
<DIV id=demotext>
<P class=alignright style="PADDING-BOTTOM: 0.5em"><A
href="http://www.onestab.net/a/pie/index.html"><STRONG>返回 p.i.e.</STRONG></A>
</P>
<P>在<STRONG>#leftbox</STRONG>之后是一个放置页面其余内容的<STRONG>#container</STRONG>
div，这个div的左边距(left
margin)等于前面的以绝对定位(AP)的div的宽度。此时，<STRONG>#container</STRONG>的左边框和右面重复的背景图片构成了<STRONG>#rightbox</STRONG>这拦的背景色。</P><PRE><STRONG>#container</STRONG> {
margin-left: 215px;
background-image: url("rightbg.gif");
background-position: 100% 0;
background-repeat: repeat-y;
}
</PRE>
<P>在<STRONG>#container</STRONG>内，固定的div
<STRONG>#navmenu</STRONG>包含有导航链接，我们在此使用了水平显示的无序列表。 <IMG class=decoration
height=142 alt="Water Lily Flowers" src="三栏复合布局演示_files/waterlilysmall.jpg"
width=215></P><PRE><STRONG>#navmenu ul</STRONG> {
display: block;
list-style: none;
text-align: center;
}

<STRONG>#navmenu ul li</STRONG> {
display: block;
float: left;
width: 10em;
}
</PRE>
<P><STRONG><ul></STRONG>中的 <STRONG><li></STRONG>向左浮动并且宽度固定，
而且<STRONG><ul></STRONG> 和 <STRONG><li></STRONG>的 display属性都是
<STRONG>{display: block}</STRONG>。之后是一个清除(浮动)的<STRONG><span></STRONG>。当浏览器窗口变窄或文字较长时，这个菜单会恰到好处地换行。</P></DIV>
<DIV id=wrapper>
<DIV class=left><PRE><STRONG>#wrapper</STRONG> {
margin-right: 138px;
}
</PRE>
<P>这个 <STRONG>#wrapper</STRONG> div 用来包含一些浮动对象。用于它在 <STRONG>#container</STRONG>
的内部，所以要为它指定右边距(right margin) 来清除绝对定位的<STRONG>#rightbox</STRONG>。</P>
<P
class=altcolor3>在IE5.5下必须为这个<STRONG>#wrapper</STRONG>指定宽度，来防止水平滚动条的出现，而IE6却又不能有宽度。其中的窍门请查看源文件。</P><PRE><STRONG>.left</STRONG> {
float: left;
width: 43%;
}
<STRONG>.right</STRONG> {
float: right;
width: 43%;
}
</PRE>
<P>在<STRONG>#wrapper</STRONG>中有两个浮动的容器，分别向左右浮动，没有特别之处。 </P></DIV>
<DIV class=right>
<P>由于这两个div都是浮动的，所以当一个div比另一个较长时，在IE中不会出现 <A title="请见Big John对这个问题的解释"
href="http://www.onestab.net/a/pie/explorer/threepxtest.html"><STRONG>3个像素的误差</STRONG></A></P>
<P class=altcolor3>IE 会双倍计算容器（此时为<STRONG>#wrapper</STRONG>）内紧靠浮动元素的边距(margins)，
所以必须采用些技巧来纠正这个错误，具体请看源文件。</P><PRE><STRONG>.clear</STRONG> {
clear: both;
margin: 0;
padding: 0;
}
</PRE>
<P>浮动元素之后是一个清除浮动的div，样式为： <STRONG>{clear: both}</STRONG>.</P>
<P class=altcolor3>IE5/Mac 必须将这个div的 margin 和 padding
设为0。因此，如果要在这个清除用div内放些文本或设置其边框，他就会充满<STRONG>#wrapper</STRONG>的整个宽度。
在本演示中，只包含一个空格。</P></DIV>
<DIV class=clear> </DIV></DIV>
<DIV id=contents><PRE class=altcolor2><STRONG>#contents</STRONG> {
margin-right: 149px;
margin-left: 10px;
}
</PRE>
<P class=altcolor>包含页面其余内容的另一个div，必须有右边距(right
margin)，用来清除右侧绝对定位的div。如果希望将<STRONG>#container</STRONG>的背景色作为<STRONG>#contents</STRONG>的框架（正如此处这般），则它的左右边距(margin)还可以增加。</P>
<P class=altcolor2><STRONG>注意:</STRONG>
由于这个演示排版格式的需要(包含有<STRONG><pre></STRONG>标签)，所以如果浏览器窗口过小或者字体过大，本页面看起来可能很乱。如果您想调整浏览器大小或改变文字大小，请看这个<A
href="http://www.onestab.net/a/pie/3colcomplexside.html">
演示页</A>，其中没有使用<STRONG><pre></STRONG>标签，而且<A
href="http://www.onestab.net/a/pie/3colcomplexside.html">
该页</A>还有更多的布局技巧和已知的问题。</P></DIV>
<DIV id=footer>
<P class="small alignright"><STRONG>~ holly</STRONG>  <A
href="mailto:holly@communitymx.com">e-mail</A> ©~ holly's wilderness ~<BR>Last
updated: October 30, 2003<BR>Created: April 1, 2003</P>
<P class="small alignright">中文翻译：<STRONG>onestab</STRONG>
2004.02.06</P></DIV></DIV>
<DIV id=bottom></DIV></BODY></HTML>

【发表评论】【加入收藏】【打印此文】【关闭窗口】

上一篇：如何让DIV层居中 [2005-12-13]
下一篇：什么是web标准 [2005-12-13]

网友评论