第八步

以下是让元素们各就各位要增加的CSS：

#container {  
    background:url(images/background_main.jpg) no-repeat;  
    min-height:800px;  
    width:1000px;  
    position:relative;  
}  
  
  
/* 
    Logo / Menu / Panel Positioning 
*/  
  
#logo { position:absolute; top:58px; left:51px; }  
  
#panel { position:absolute; top:165px; left:51px; }  
  
ul#menu {   
    margin:0px; padding:0px;  
    position:absolute; top:145px; left:75px;  
}  
ul#right_menu {   
    margin:0px; padding:0px;  
    position:absolute; top:145px; right:75px;     
}  

我们再一次...一条一条看：

1. 首先，你看到一段熟悉的代码——container，这次多了两行：width:1000px和position:relative。把position（位置）设为relative（相对的）很重要，这样内部元素的绝对定位就是相对于container标签的。这也意味着我可以在已知container宽为1000px的条件下来定位盒子里的元素，例如right_menu（右侧菜单）。
2. 接着，我用一句注释来给这个新CSS分段。
3. 给logo和panel绝对定位。我怎么知道定位属性值该多大呢？很简单，拿出原始PSD图来量一下就行！你看，属性定义一简单，绝对定位也就很容易。
4. 然后给两个菜单绝对定位。这里我加了margin:0px; padding:0px;来清除无序菜单默认的margin和padding。
5. 接下来请注意，我指定right_menu的绝对定位为right:75px，让它出现在距容器右边界75px的位置。通常浏览器窗口被用作参照物，但前面我已将container设为position:relative，这就让75px从<div id="container"></div>的右边界开始算起了。

你这时可能会想：这有啥用？我用left属性定位不就行了？当然，你可以这么做，但如果你要给右侧菜单增加选项，你就得一遍又一遍地重新定位好让它距离右边界75px。而用上right，选项就会自动左移。试试看吧！

看看咱们干到哪儿了：

出处：译言
责任编辑：bluehearts

上一页 用CSS布局建站从零开始 [4] 下一页 用CSS布局建站从零开始 [6]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。