導航條效果圖：

我們先來看一下，首先這個整體我們可以看成一個大盒子，盒子的背景顔色為白色。

然後看一下整體的話是占到整個導航條的80%左右，上圖紅色框圈出的範圍。

這個盒子又分為兩個部分，左側的logo部分，右側的導航部分。

整個布局用到的是flex布局：

大家可以去看一下阮一峰老師的教程：

阮一峰flex布局

左側logo部分我們用到的标簽有：

1、h3标簽：

<h3><ahref="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标簽：

<ahref="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> <liclass="active"> <ahref="index.html">首頁</a> </li> <li> <ahref="">網頁模闆</a> </li> <li> <ahref="">學習資料</a> </li> <li> <ahref="">常見問題</a> </li> <li> <ahref="">網頁作業</a> </li> <li> <ahref="">聯系我們</a> </li> </ul>

視屏教程：