CSS首页布局实例：用CSS布局网站首页（第5页）

 

　　第八步
　　以下是让元素们各就各位要增加的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，选项就会自动左移。试试看吧！
看看咱们干到哪儿了：

　　第九步
　　上图中，logo和头部元素看上去摆在了正确的位置，但菜单还有点儿怪怪的。设计样式前我们先说一下logo和大文本图片的事。你可能在想，既然它俩都是图片为什么不放在背景图片里就好了？
这是因为我们需要给logo加上链接，点击可返回首页（让网站更好用）。而大文本图片可能要随页面而变，把它做成单独的图片我们就可以让大量HTML页面使用同一个CSS样式表，只要换上文字不同的图片就可以了。
现在咱们来设计那两个菜单，让页面真正开始成型。要用到的CSS如下：
ul#menu {
margin:0px; padding:0px;
position:absolute; top:138px; left:75px;
}
ul#right_menu {
margin:0px; padding:0px;
position:absolute; top:138px; rightright:110px;
}
ul#menu li, ul#right_menu li {
margin:0px; padding:0px;
list-style:none;
margin-right:10px;
font-size:9px;
text-transform:uppercase;
display:inline;
}
ul#menu li a, ul#right_menu li a {
text-decoration:none;
color:#bd92b2;
}
ul#menu li a:hover, ul#right_menu li a:hover {
text-decoration:none;
color:#ffffff;
}
头两条代码和之前一样（除了稍微调整了定位让它们仍然正确显示）。注意，因为两个菜单的位置不一样，这两条定义是分开的，但菜单选项的样式是相同的，所以我们把后面两条定义并成了一条。把两个属性一起定义的格式是：
.myClass, .myClass2 { ... }
这和下面的定义是完全不同的：
.myClass .myClass2 { ... }
因为第二个定义声明的对象是位于class="myClass"的标签内的所有class="myClass2"的元素
回到我们的样式表，看一遍重要的几点：

1. 和前面一样，我们把<ul>元素设为0 margin和0 padding，并绝对定位。
2. 然后我们为<ul>内部所有的<li>元素做出声明，让它们没有列表样式（即没有圆点），9px大小，统统大写，最重要的，让它们display:inline（译者注：行内显示）。行内显示意味着它们排成一行，而不是一个接在另一个下面。
3. 接下来的定义声明了<li>内部的<a>链接们应该是某个颜色的并且没有下划线。这里的<li>包括<ul id="menu"> 和<ul id="right_menu">内的所有<li>。

加上这些定义，我们的页面现在看上去相当不错啦！