div+css布局事例1

<! 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 &#10;&#9;complex 3-col page."
name =description >
< META
content ="demo,test,big john,big,john,position is everything,&#10;&#9;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 > &lt; body &gt; </ 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 &nbsp; 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 &nbsp; 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 &nbsp; and &nbsp; links </ A >
   </ LI >
   < LI >< A
   href ="http://www.onestab.net/a/pie/3colcomplex.html#" > links &nbsp; and &nbsp; links </ A >
   </ LI >
   < LI >< A
   href ="http://www.onestab.net/a/pie/3colcomplex.html#" > links &nbsp; and &nbsp; links </ A >
   </ LI >
   < LI >< A
   href ="http://www.onestab.net/a/pie/3colcomplex.html#" > links &nbsp; and &nbsp; links </ A >
   </ LI >
   < LI  class =last >< A
   href ="http://www.onestab.net/a/pie/3colcomplex.html#" > links &nbsp; and &nbsp; 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 > &lt; pre &gt; </ STRONG > 。 IE 会违反标准，将div撑开以包含内容。其他的浏览器会将过宽的内容显示在div之外。  </ P >
< P  class =altcolor3 > IE4/Mac对该绝对定位的div则另有一套。详情和解决方法请看源文件。 </ P ></ DIV >
< DIV  id =demotext > <!--  This is an added textbox for the purposes of the demo  -->
< 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 > &lt; ul &gt; </ STRONG > 中的  < STRONG > &lt; li &gt; </ STRONG > 向左浮动并且宽度固定，
而且 < STRONG > &lt; ul &gt; </ STRONG >  和  < STRONG > &lt; li &gt; </ STRONG > 的 display属性都是
<  STRONG > {display: &nbsp; block} </ STRONG > 。之后是一个清除(浮动)的 <  STRONG > &lt; span &gt; </ 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 > &nbsp; </ 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 > &lt; pre &gt; </ STRONG > 标签)，所以如果浏览器窗口过小或者字体过大，本页面看起来可能很乱。如果您想调整浏览器大小或改变文字大小，请看这个 < A
href ="http://www.onestab.net/a/pie/3colcomplexside.html" >
演示页 </ A > ，其中没有使用 < STRONG > &lt; pre &gt; </ STRONG > 标签，而且 < A
href ="http://www.onestab.net/a/pie/3colcomplexside.html" >
该页 </ A > 还有更多的布局技巧和已知的问题。 </ P ></ DIV >
< DIV  id =footer >
< P  class ="small alignright" >< STRONG > ~ holly </ STRONG > &nbsp;   < A
href ="mailto:holly@communitymx.com" > e-mail </ A >   &copy; ~ 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 >