整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖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小時內與您取得聯系。
