门户网站一般会有水平导航菜单，使用图片制作水平导航是常用的一种方式，今天给大家介绍一下，请看效果图：
工具/原料
前端开发工具HBuilder
浏览器
方法/步骤
1、首先引入2张图片素材，请大家下载使用，如下：
2、首先写一个div元素，在里面放几个a标签，用来做导航元素，代码如下： <divclass="nav"><ahref="#">首页</a><ahref="#">新闻中心</a><ahref="#">合作用户</a><ahref="#">人才计划</a> </div>效果图如下：
3、给a元素设置宽高，与图片的宽高保持一致，行高设置成与茂葛锵哑高度一样，使文字垂直居中，text-align:center使文字水平居中，并设置背景图片，代码如下： .nava{wid墉掠载牿th: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标签上，把背景图片使用另外一张图片替换，这样就实现了切换效果，代码如下： .nava:hover{background-image:url(../img/bgc.png); }效果图如下：
5、最后，提供给大家全部源代码，如下：争犸禀淫<!DOCTYPEhtml><html><head><metacharset="UT僻棍募暖F-8"><title>Document</title><styletype="text/css">.nava{width:120px;height:50px;line-height:50px;text-align:center;display:inline-block;background-image:url(../img/bg.png);color:#fff;text-decoration:none;}.nava:hover{background-image:url(../img/bgc.png);}</style></head><body><div><ahref="#">首页</a><ahref="#">新闻中心</a><ahref="#">合作用户</a><ahref="#">人才计划</a></div></body></html>