CSS+HTML制作一個一般的導航欄

航欄效果圖：

導航欄

導航欄功能模塊圖

圖書管理功能模塊圖

圖書管理功能包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.導航欄的框框

模塊標簽特點：

背景色background-color ：暗紅色；
形狀：長方塊block 、寬width、高height,左邊有突出小方塊樣式，分析為內邊距padding。
內容：字體font-family、字體顏色color、字體大小font-size, 垂直居中line-height=height
邊框：border：solid 1px #ff0；

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樣式表源碼：

家好，今天給大家介紹一款，帶圖標的垂直導航菜單的html頁面源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

點擊每個按鈕時，都有切換特效，并顯示按鈕的說明，看起來非常不錯（圖2）

圖2

代碼完整，需要的朋友可以下載（圖3）

圖3

本源碼編碼：10148，需要的朋友，點擊下面的鏈接后，搜索10148，即可獲取。

就愛UI - 分享UI設計的點點滴滴

位同學大家好，開始進入到本節課。通過之前的課程已經把浮動給徹底的學完了，很多同學跟我私信、留言說：老師，我已經看完了，覺得好刺激，想要實戰，想要鍛煉自己，有這樣的感覺是好的。所以從本期開始老師將帶領大家進行實戰，把源碼專區的界面做出來，進行實戰挑戰自己。

本期課首先要把導航界面一步步的實現出來。首先來實現logo的專區，logo可以打開瀏覽器的f12，然后分析一下它。把鼠標移動上去過后可以明顯的看見它是一個mg標簽，mg標簽是圖片框標簽，所以這個區域可以用圖片框標簽來實現。

·首先把圖片進行儲存，將它儲存到本地，然后將所儲存的標簽放到原本的布局的源碼的列表里面去。可以新建文件夾叫做文件或是im、a、t、e，盡量文件夾的起名都用英文好一點，雖然是用中文編程，但是文件夾可以用英文或者是拼音，覺得更標準一點。

·然后對文件進行引用，引用之前首先新建一個篩選器，篩選器可以把它理解為是一個分組，新建一個試點器，比如叫做全局文件logo，它是屬于全局文件，新建一個全局文件的文件夾。

·然后進行引用，打開文件，找到目錄，選擇圖像文件進行引用。引用過后再來新建一個文件夾，這個文件夾叫做原碼專區，cs或者是原碼專區都可以，就叫做原碼專區。

·然后在原碼專區里面去新建一個文件，新建一個原碼專區的cs文件，這里點擊lcs，點擊創建。這里創建之前其實也可以再新建一個文件夾，這個文件夾就是cs文件，可以把cs文件放到cs目錄以后，需要加斯cable可以再放到加斯cable的目錄，要把這分目錄的分組做好。

·選擇目錄，將它保存在項目里面的，等一下找到目錄，將它保存項目里面的css文件夾里面，點擊選擇，點擊創建。

·創建過后打開點lcs的文件，將之前所編寫這些布局的cs文件拷貝過去，剪切一下，然后再粘貼過來。粘貼過來過后來進行代碼格式化，整理一下，這樣看起來代碼就非常的舒服了。

·然后把標簽、樣式標簽就可以刪掉了，這樣原代碼可以很清晰的進行觀看，cs可能以后會寫很多cs，原碼主要寫cs就寫這里就好了，atm就寫h n代碼，是不是非常的舒服？

·接下來還要對cs進行引用，雖然創建了cs，但是cs還沒有在h s引用一下就好了，cs文件就屬于h m a的文件了。

·首先還對頁面進行分析，可以看見最基礎布局是可以把最基礎布局先運行起來，最基礎布局是頂部導航已經把實現了，其實頂部的布局是居中的，內容是居中的，是從這個位置開始居中的，所以還要創建一個居中的盒子在頂部導航里面，都要進行居中。

·接下來來實現這一步，在頂部導航區域里面新建一個區塊盒子，盒子可以在頂部導航這里盡量挨著它，再新建一個類名，比如叫做居中，叫導航頂部，導頂部導航居中盒子，頂部導航集中盒子更好理解一點。

·寬度之前分析過專區的寬度是一千一百七十px，就輸一千一百七十px就好了，一千一百七十px高度就不填高度，讓它默認去繼承頂部盒子高度。

·改個背景顏色，方便去查看背景顏色，給它一個紅色，然后進行設置，類名要記住經常性的保存，不保存是不生效的。

·進行設置，點擊運行，可以看見運行過后目前為止是沒有效果的，可以再次打開代碼來看一下，寬度一千一百七十px，背景顏色為紅色，但是沒有生效，可以給它指定個高度，指定高度為五十五px，運行起來看一下，有效果，現在是有效果的。

·有效果過后先讓它進行居中，比如背景居中是外邊距，首先是零ps，自動就居中了，運行起來是不是居中了？

·然后就可以在盒子里面去寫logo圖片了，首先來分析下logo圖片，用f4，打開開發者工具，點擊這里，鼠標移動上去，可以看見圖片的寬度和高度是多少，這里有顯示，圖片下面都有顯示，是八十的寬，三十的高。

·所以這個時候可以打出一個圖片框，在這里打出一個圖片框，這個圖片框的圖片地址就是logo，文件logo。

·這個時候設置一下圖片框的寬度和高度，可以這樣寫，可以直接點上面盒子名稱，點圖片框，這么寫的含義就是指定類名下面的圖片框。這個方式之前是沒有學習過，給大家講一下。

·通過類名，比如指定一個類名指定的盒子，盒子下面的所有的組件都可以通過類名，類名點某一個組件名稱來進行指定，理解吧？比如這里是類名是這個，頂部導航居中盒子，類名點頂部導航居中盒子，給個空格，名稱就是組建名，圖片框的名稱，可以設置它的一些屬性了。

·比如設它的寬度為八十px，高度三十px，可以運行起來看一下效果，點擊運行，是不是有個圖片框，這就顯示到八十和三十，把紅色刪掉，紅色的背景刪掉，是不是八十、三十，看起來很舒服。

·接下來要讓它進行居中，既然讓它進行居中，其實也很簡單，只需要設置它的外面就好了。首先要進行分析，它的高度是三十px，而這個副組件盒子的高度是五十五px，就是五十五px，要經常做計算，要嚴格一點來做計算，五十五減去三十就等于二十五px，二十五px就可以除以二。

·比如上邊距是十五點，十二點五px，下邊距是十二點五px，所以直接指定一個外邊距，外邊距第一個參數是上下，十二點五px，左右零px，這樣就好了，點擊運行，可以看見是不是就居中了。

本節課就簡單的先實現這樣的logo效果，下節課再來實現，比如像這里面的導航的效果，一步步來實現。本節課到此結束，下節課再見。

在線咨詢

上一篇：刪除文字貫穿線的方法有哪些
下一篇：HTML常考知識點

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商