整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
導航欄
圖書管理功能模塊圖
圖書管理功能包4括大模塊 ，16個子模塊。
1. 制作方式： 列表<ul><li>制作。
四大模塊：用一個<ul><li></li></ul>列表制作出來，每個模塊下面的四個子模塊用同樣的<ul><li></li></ul>列表嵌套出來。
具體格式如下：
<ul> <li>模塊1 <ul> <li>模塊1.1</li> <li>模塊1.2</li> <li>模塊1.3</li> <li>模塊1.4</li> </ul> </li> <li>模塊2 <ul> <li>模塊2.1</li> <li>模塊2.2</li> <li>模塊2.3</li> <li>模塊2.4</li> </ul> </li> .......... </ul>
2.導航標簽<a>：都是一個超鏈接，通過點擊鏈接到相應的導航頁面。
所以在每個列表選項中，都應該加入超鏈接<a>標簽。
<ul> <li><a href="javascript：;" >用戶管理</a></li> ... </ul>
3.導航框的修飾：CSS樣式表
3.1 樣式表接入方式：
一般用鏈接式<link >，運用高內聚，低耦合的思想。
<link rel="stylesheet" type="text/css" href="CSS/demo.css">
3.2標簽選擇器
行內選擇器>id選擇器>class選擇器>標簽選擇器
常用到的為 id選擇器、class選擇器、標簽選擇器。
例如：
<ul> <li class="litems"><a href="javascript：;">用戶管理</a> <ul class="uitems"> <li><a href="javascript：;">添加用戶</a></li> </ul> </li> </ul>
具體用法見：HTML/CSS中可直接輸數據的表格
4.導航欄的框框
模塊標簽特點：
litems類標簽 中 <a>標簽的樣式如下：
.litems>a
{
background-color:#990020; /*背景色*/
height:30px;
display:block; /*塊顯示*/
line-height:30px; /*垂直居中*/
border-left: solid 12px #711515; /*邊框*/
padding-left:5px; /*左邊距*/
}
5.鼠標懸浮變化--- a:hover 屬性
鼠標未懸浮狀態
鼠標懸浮狀態
特點：鼠標懸浮時，字體變為黃色。
a:hover
{
color:#FF0;
}
制作一個簡單的導航欄，常用的就是列表格式。通過列表的嵌套和樣式的修改，即可建立一個簡約得體的導航列表。
以下附帶部分樣式源碼：
HTML列表內容
CSS樣式表源碼：
篇文章將教大家如何編寫導航欄，如果大家掌握之后，通過自定義樣式，完全可以實現個性化的導航欄。
效果圖
首先我們看下效果圖，后面的編輯和查看導航也是相同的效果。
效果圖
實現方式
接下來我們直接通過代碼的方式來展示如何完成導航欄的編寫
css部分代碼
首先是div的通用樣式
div通用樣式
然后是鼠標懸浮的效果
鼠標懸浮效果
最后是菜單欄的效果
菜單欄效果
js代碼控制菜單欄效果
首先是鼠標懸停和鼠標離開菜單時的效果
鼠標懸停和移除菜單欄
然后是關于高亮效果的展示和取消
高亮效果的顯示和取消
最后是菜單欄被點擊時的函數
點擊菜單欄的函數
html部分代碼
首先我們來看一下導航欄html代碼
導航欄的html代碼
然后是文件菜單的html代碼
文件菜單的html代碼
其次是編輯菜單的html代碼
編輯菜單的html代碼
最后是查看菜單的html代碼
查看菜單的html代碼
總結
至此，一個完整的自定義導航欄效果就完成了，如果覺得不好看的，完全可以自己設計樣式讓它更符合自己的品味，如果感興趣的希望自己把代碼試敲一遍，畢竟代碼要自己實踐才有效果。
航條效果圖：
我們先來看一下，首先這個整體我們可以看成一個大盒子，盒子的背景顏色為白色。
然后看一下整體的話是占到整個導航條的80%左右，上圖紅色框圈出的范圍。
這個盒子又分為兩個部分，左側的logo部分，右側的導航部分。
整個布局用到的是flex布局：
大家可以去看一下阮一峰老師的教程：
阮一峰flex布局
左側logo部分我們用到的標簽有：
1、h3標簽：
<h3><a href="index.html">多多魚網頁</a></h3>h3是一對有開始有閉合的標簽組合。以<h3>開始，以</h3>結束。
html h3標簽主要用于布局標題、欄目類內容，h3與h1最大標題標簽相比，h1標簽一般一個網頁中使用一次，而h3標簽可以在一個網頁中多次使用。默認CSS h3又比h2文字大小小一點。
html h3標簽常見應用地方：
欄目標題可以使用h3標簽
文章標題可以使用h3標簽
文章標題列表可以使用h3標簽（一般圖文列表中，圖片使用img引入，文章標題文字使用h3標簽）
2、a標簽：
<a href="index.html">多多魚網頁</a><a> 標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。
<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標。
在所有瀏覽器中，鏈接的默認外觀是：
未被訪問的鏈接帶有下劃線而且是藍色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的
右側的導航部分我們用到的標簽有：
一、無序列表簡介
無序列表，很好理解，有序列表的列表項是有一定順序的，而無序列表的列表項是沒有順序的。默認情況下，無序列表的項目符號是●，不過可以通過無序列表type屬性來改變無序列表的列表項符號。
語法：
<ul>
<li>無序列表項</li>
<li>無序列表項</li>
<li>無序列表項</li>
</ul>說明：
<ul>，即“unordered list（無序列表）”。<li>，即“list（列表項）”。理解標簽語義更有利于你記憶，而記憶HTML標簽的語義是HTML的基礎。
在該語法中，使用<ul></ul>標簽表示一個無序列表的開始和結束，<li>表示這是一個列表項。在一個無序列表中可以包含多個列表項。
注意，<ul>標簽和<li>標簽也是配合使用，沒有單獨使用，而且<ul>標簽內部不能存在任何其他標簽，一般情況下只能存在<li>標簽（對于初學者，我們忽略嵌套列表）。這個概念要非常清楚，在網站開發后期很容易犯錯。（這個情況跟有序列表一樣）。
右側導航代碼：
<ul>
<li class="active">
<a href="index.html">首頁</a>
</li>
<li>
<a href="">網頁模板</a>
</li>
<li>
<a href="">學習資料</a>
</li>
<li>
<a href="">常見問題</a>
</li>
<li>
<a href="">網頁作業</a>
</li>
<li>
<a href="">聯系我們</a>
</li>
</ul>視屏教程：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
