整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
图1
图2
图3
就爱UI - 分享UI设计的点点滴滴
篇文章将教大家如何编写导航栏，如果大家掌握之后，通过自定义样式，完全可以实现个性化的导航栏。
效果图
首先我们看下效果图，后面的编辑和查看导航也是相同的效果。
效果图
实现方式
接下来我们直接通过代码的方式来展示如何完成导航栏的编写
css部分代码
首先是div的通用样式
div通用样式
然后是鼠标悬浮的效果
鼠标悬浮效果
最后是菜单栏的效果
菜单栏效果
js代码控制菜单栏效果
首先是鼠标悬停和鼠标离开菜单时的效果
鼠标悬停和移除菜单栏
然后是关于高亮效果的展示和取消
高亮效果的显示和取消
最后是菜单栏被点击时的函数
点击菜单栏的函数
html部分代码
首先我们来看一下导航栏html代码
导航栏的html代码
然后是文件菜单的html代码
文件菜单的html代码
其次是编辑菜单的html代码
编辑菜单的html代码
最后是查看菜单的html代码
查看菜单的html代码
总结
至此，一个完整的自定义导航栏效果就完成了，如果觉得不好看的，完全可以自己设计样式让它更符合自己的品味，如果感兴趣的希望自己把代码试敲一遍，毕竟代码要自己实践才有效果。
识点：
width:宽度120px
height：高度50px
.nav{}:类
text-align:文本对齐方式
background-image:url（）：背景图片
display: inline-block：行内块（点击☛块级元素和行内元素-前端CSS基础）
line-height:行高
.nav :hover{background-image: url(images/images/bg7.png);}：鼠标移动到链接上显示效果
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>14</title>
<style>
.nav {
text-align: center; /*文本居中，单纯的居中只会让部分文字居中，这里需要整体居中，采取类居中*/
}
.nav a1{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg1.png);/*图片存放地址配置要对应*/
display: inline-block;
line-height: 50px;
}
.nav a2{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg2.png);
display: inline-block;
line-height: 50px;
}
.nav a3{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg3.png);
display: inline-block;
line-height: 50px;
}
.nav a4{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg4.png);
display: inline-block;
line-height: 50px;
}
.nav a5{
color: aliceblue;
text-decoration: none;
text-align: center;
width: 120px;
height: 50px;
background-image:url(images/images/bg5.png);
display: inline-block;
line-height: 50px;
}
.nav :hover{
background-image: url(images/images/bg7.png);
}
</style>
</head>
<body>
<div class="nav">
<a1 href="#">网站首页</a1>
<a2 href="#">网站首页</a2>
<a3 href="#">网站首页</a3>
<a4 href="#">网站首页</a4>
<a5 href="#">网站首页</a5>
</div>
</body>
</html>
整体效果：
每天学点新知识，总有一天我们都会“学富五车”！
初出茅庐，如有不严谨之处敬请指正
图文来源:网络编辑加工处理网络图文视频版权归原作者所有，如有侵权请您告知@！
点击了解更多获取源码及素材
提取码：C818
*请认真填写需求信息，我们会在24小时内与您取得联系。
