文為大家介紹如何使用 CSS 創建一個帶搜索的導航欄。

以下實例均是響應式的。

可以先看下效果圖：

創建一個搜索欄

HTML 代碼

<div class="topnav">

<a class="active" href="#home">主頁</a>

<a href="#about">關于</a>

<a href="#contact">聯系我們</a>

<input type="text" placeholder="搜索..">

</div>

CSS 代碼

/* 在頂部導航欄中添加黑色背景顏色 */

.topnav {

overflow: hidden;

background-color: #e9e9e9;

}

航欄效果圖：

導航欄功能模塊圖

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

模塊標簽特點：

1. 背景色background-color ：暗紅色；
2. 形狀：長方塊block 、寬width、高height,左邊有突出小方塊樣式， 分析為內邊距padding。
3. 內容：字體font-family、字體顏色color、字體大小font-size, 垂直居中line-height=height
4. 邊框：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;
}

制作一個簡單的導航欄，常用的就是列表格式。通過列表的嵌套和樣式的修改，即可建立一個簡約得體的導航列表。

以下附帶部分樣式源碼：

CSS樣式表源碼：