|
效果是： 第六步：将链接以块级元素显示有朋友问，菜单链接的背景色为什么没有填满整个li的宽度？恩，解决的方法很简单，在a的样式定义中增加display:block，使链接以块级元素显示。 同时我们微调了如下细节： - 用text-align:center将菜单文字居中；
- 用height:30px增加背景的高度；
- 用margin-left:3px使每个菜单之间空3px距离；
- 用line-height:30px;定义行高，使链接文字纵向居中；
CSS定义象这样： .test a{display:block；text-align:center;height:30px;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;} 效果变成： 这样就漂亮多了吧。 第七步：定义背景图片我们通常都会在每个链接前加一个小图标，这样导航更清楚。CSS是采用定义li的背景图片来实现的： .test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;} 说明：“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”这句代码是一个CSS缩写，表示背景图片是arrow_off.gif；背景颜色是#CCC；背景图片不重复"no-repeat"，背景图片的位置是左边距5px、上边距12px； 默认状态下，图标为arrow.off.gif，当鼠标移动到链接上，图标变为arrow_on.gif 效果变成： | 