導航欄
圖書管理功能模塊圖
圖書管理功能包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小時內與您取得聯系。