如何用CSS制作横向菜单(2)

同时我们微调了如下细节：

• 用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

效果变成：

• 首页
• 产品介绍
• 服务介绍
• 技术支持
• 立刻购买
• 联系我们

现在css的完整代码是：

.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}

页面的完整代码是：

<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>

好了，主要步骤就是这7步，立刻拷贝和修改代码试试，你也可以用CSS做横向菜单了！

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有