CSS实例教程:创建垂直导航条

Combining the previous example with the link styling techniques you learned in Chapter 4,you can create graphically rich vertical navigation bars complete with CSS rollovers, like the one in Figure 5-2.
在前面的示例中使用在第4 章中学到的链接样式技术，就可以创建图形丰富的垂直导航条和CSS 翻转，如图5-2 所示。

图5-2 垂直导航条
As always, you need to start with a good HTML framework:
与平常一样,首先需要一个良好的HTML 结构：
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li>
<li><a href="work.htm">Our Work</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
The first thing you want to do is remove the default bullets and zero down the margin and padding:
首先要做的是去掉默认的符号并将空白边和填充设置为零：
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Rather than style the list items, you are going to be styling the enclosed anchors. To create a button-like hit area, you need to set the display property of the anchors to block, and then specify the anchor’s dimensions. In this example my navigation buttons are 200 pixels wide and 40 pixels high. The line height has also been set to 40 pixels in order to center the link text vertically. The last couple of rules are just stylistic, setting the color of the link text and turning off the underlines.
对列表项并不应用样式，而是对其中包含的锚应用样式。为了创建与按钮相似的单击区域，需要将锚的disPlay 属性设置为bloCk ，然后指定锚的尺寸。在这个示例中，导航按钮是200 像素宽，40 像素高。还将行高设置为40 像素，以便让行文本垂直居中。最后两行两列只是修饰性的，它们设置链接的颜色并关闭下划线。
ul a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
}
Using the Pixy rollover technique you learned about in Chapter 4, the rollover graphic (Figure 5-3) is applied as a background image to the anchor link.
使用在第4 章中学到的Pixy 翻转技术，将翻转图像（见图5 一3 ）作为背景图像应用于锚链接。

The background image is aligned left in order to reveal the up state. The anchor text is given a 50-pixel indent so that it is not sitting directly over the arrow in the background image.
背景图像进行左对准以便露出正常状态图像．锚文本具有50 像素的缩进，这样它就不会直接盖在背景图像中的箭头上。
ul a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat  left middle;
text-indent: 50px;
}
If you look at the rollover image in Figure 5-3, you will notice that it has a solid border all the way around the image. When these images are stacked vertically, the top and bottom borders will double up. However, you only want a single, 1-pixel black line between each nav bar item. To get around this problem, clip the top line off by aligning the background images to the bottom of the anchor and then reducing the height of the links by 1 pixel:
如果看看图5 一3 中的翻转图像，就会注意到图像周围的所有边上都有实线边框。当这些图像垂直叠放时，顶边框和底边框会形成双重实线。但是，我们希望在每个导航条项之间只有一个l 像素的黑线。为了解决这个问题，将背景图像对准锚的底部，然后将链接的高度减少1 像素，这样就能够去掉顶部的线：
ul a {
display: block;
width: 200px;
height: 39px;
line-height: 39px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left bottom;
text-indent: 50px;
}
The links now stack up nicely, with a single black line appearing between each one.However, the top black line on the first link is no longer showing. To put this back you need to reset the height of the first anchor to 40 pixels—the full height of the image. You can do this by applying a class of first to the first list item: