html+css寫出響應式側邊導航欄

果圖

html部分：先寫用div畫好六個導航的卡片，再利用css添加響應效果

<div class='card-holder'>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-01'>
                <span class='card-content'>item #1</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-02'>
                <span class='card-content'>long menu item #2</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-03'>
                <span class='card-content'>menu item #3</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-04'>
                <span class='card-content'>item #4</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-05'>
                <span class='card-content'>menu item #5</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-06'>
                <span class='card-content'>long menu item #1</span>
            </div>
        </a>
    </div>
</div>

css部分：通過hover選擇器和transition屬性實現導航響應式操作，即可實現如圖效果

a:link,
a:hover,
a:visited,
a:active {
  color: #fff;
  text-decoration: none;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
.card-holder {  
  position: fixed;
  width: 0px;
  overflow: visible;
}
.card-wrapper {
  display: inline-block;
  float: right;
  clear: both;
}
.card {
  position: relative;
  left: 32px;
  padding: 16px 32px 16px 64px;
  margin: 8px;  
  background: #fff;
  transition: all 0.3s ease-in-out 0.1s;
}
//添加導航的響應式效果
.card:hover {
  position: relative;
  left: 100%;
  margin-left: -32px;
  transition: all 0.3s ease-in-out;
}
.card-content {
  display: inline-block;
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.bg-01 { background: #539770; }
.bg-02 { background: #4B7D74; }
.bg-03 { background: #8DC2BC; }
.bg-04 { background: #EDD6B4; }
.bg-05 { background: #BE7467; }
.bg-06 { background: #E2AE63; }

然后就能實現我們這個實用又美觀的側邊導航欄啦

航條效果圖：

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

然后看一下整體的話是占到整個導航條的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>

視屏教程：

tml 的結構部分標簽

二、網頁常見的結構

header 標簽 --- 頭部分結構

nav 標簽 --- 導航條部分結構

main 標簽 --- 主核心部分內容

footer 標簽 --- 頁尾

01.代碼示例：

<body>

</body>

02.以上源代碼使用 DOM（文件對象模型）表示：

body

header

nav

main

footer

03. header 與 footer 用法

header --- 指整個網頁/或某個區塊的頭部。

一定會包含該區塊的標題

可能會包含該區塊的副標題、版本、署名等等

footer --- 表示整個網頁/或某個區塊的腳部

可能包括版權信息、參考資源、附注等等

小結：

頭是header,腳是footer。

header 和 footer 都可能多次出現，但它們的級別是不同的。

04.nav(navgation 導航) --- 包含一組鏈接，連接至網站其它主要頁面。

nav 標簽與 header 標簽的關系

不建議將nav放置在header內

頭部/header是從上下文邏輯關系上來說的，并不一定是視覺設計中擺在頂上的內

容，所以一般不會包含nav。

小結：

導航 navigation包含一組鏈接，指向網站的其他主要欄目。

nav和header通常是互相獨立的并列關系。

nav可能在頁面中多次出現，分別指主導航、二級導航等等。

05.main 標簽和 aside 標簽

main --- 代表網頁中的主要內容/主結構

不會包含網站的主導航條、網站總標題和網站總頁腳，但可能包含次一級別的

header/van/footer。

*注：每個網頁最多只有一個main

main 不可能是以下元素的后代：

article(文章標簽)、aside(附屬內容標簽)、footer(網頁標簽)、deader(頭部標簽) 或

nav(導航標簽)

aside(附屬內容)

附屬內容

如果刪除，影響不大

應與主內容main相關

aside有時被翻譯成"側邊"，這種翻譯是不準確的。

代碼示例：

<body>

<main>

</main>

</body>

按 DOM(文件對象模型)構建 html :

body

header

nav

main

aside

footer

小結：

01.主內容main，每個頁面只有一個，指該頁面專屬的內容塊，區別于網站的其他頁面。

02.附屬內容aside,與主內容有一些聯系，如果被刪除，對網頁的閱讀沒有明顯影響。

06. article 標簽與 section 標簽

article 是一篇完整的文章，代表頁面中獨立的、完整的、可以獨自被外部引用的內容。

注意：header/footer/nav都可能出現在article中，作為文章自身的頭、尾與文章內部導航。

section (片段或章節) ：

無法獨立成文，通常性屬于 article 的一部分，該片段里的開始部分仍有一個自然標題以

及相關內容。

section 也可能是main的子元素。

07.關于 id ：

唯一標識符，同一頁面里id不得重復，以半角英文字母開頭，不含特殊字符與空格，描述職能

，不描述樣式。

小結：

01.article 是一篇獨立的完整的文章，可以被外界引用的。

02.section 可以是 article 中的一個章節，也可以是主內容中的一個區塊。

03.不管是 article 還是 section , 第一個子元素總是標題（header 或 h1）。

08. div 標簽（部門、分塊）

div --- 根據職能的不同，劃分出特定的一塊區域，常常結合id屬性使用。

示例：

<h1>internet...</h1>

</header>

<div id= "today">...</div> ---今日熱點功能區域

<div id= "login">...</div> ---登陸相關功能區域

<div id= "search">...</div> ---搜索功能區域

article、section、div 的區別：

aricle：文章

如果上下文能聯合組成一個有意義的獨立文章；應優先使用 article

section：片段，章節

無法使用article時，該片段里的開始部分仍有一個自然標題，和相關內容。

div：部門、分塊

在無法使用article/section/aside等時，仍承擔著特定功能的分塊。

小結：

在無法使用article/section/aside等時，仍承擔著特定功能的分塊，就可以使用 div 標簽。

div標簽和section標簽一樣，常常帶有id屬性。

在線咨詢

上一篇：安卓webview html5 自動播放本地視頻，網上視頻，可以循環播放
下一篇：偶然發現，Javascript中雙重否定的寫法

您的項目需求

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

整合營銷服務商

html+css寫出響應式側邊導航欄

tml 的結構部分標簽

您的項目需求