门户网站一般会有水平导航菜单，使用图片制作水平导航是常用的一种方式，今天给大家介绍一下，请看效果图：
工具/原料
1
前端开发工具HBuilder
2
浏览器
方法/步骤
1
首先引入2张图片素材，请大家下载使用，如下：
2
首先写一个div元素，在里面放几个a标签，用来做导航元素，代码如下：
效果图如下：3
给a元素设置宽高，与图片的宽高保持一致，行高设置成与高度一样，使文字垂直居中，text-align:center使文字水平居中，并设置背景图片，代码如下： .nav a{ width: 120px; height: 50px; line-height: 50px; text-align: center; display: inline-block; background-image: url(../img/bg.png); color: #fff; text-decoration: none; }效果图如下：
4
添加鼠标经过效果，当鼠标停留在a标签上，把背景图片使用另外一张图片替换，这样就实现了切换效果，代码如下： .nav a:hover { background-image: url(../img/bgc.png); }效果图如下：
注意事项
图片相对路径要设置好，要不然找不到图片
上一篇：想学炒股怎么入门