本案例和上一个案例相同的HTML结构如下:
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">Contact Us</a>
<a href="#">Web Dev</a>
<a href="#">Web Design</a>
<a href="#">Map</a>
</div>
</body>
对于#menu容器的设置如下
#menu{
9em; /*宽度*/
margin:0 auto; /*水平居中*/
font-family:Arial, Helvetica, sans-serif; /*字体*/
font-size:14px; /*字号*/
border:1px solid #aaa; /*细灰色边框*/
}
在对#menu的设置中,宽度使用的是相对单位em,而不像上一个例子,使用像素作为单位,代码如下:
#menu a, #menu a:visiten{ /*设置菜单选项*/
display:block; /*设置为块级元素*/
text-decoration:none; /*无下划线*/
color:#000; /*黑色文字*/
line-height:2em; /*高度*/
border:0.5em solid #fff; /*白色背景,防止跳动*/
}
#menu a:hover{
color:#fff;
background-color:#aaa; /*深灰色背景色*/
border-color:#ddd #aaa; /*上下边框浅灰色,左右与背景色相同*/
}
使用相对单位的优势是,当访问者在浏览器调整了文字的大小,#menu容器的大小可以自动调整,以适用文字大小变化。
最终效果如图:
可以看出,这个边框在鼠标指针未经过之前就已经存在了,只是和背景颜色相同,所以看不出边框。而当鼠标指针经过时,边框的颜色发生改变,边框就显现出来了。