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; }

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

情提示：以下代碼是我們邀請的前端架構師基于天貓門戶編寫的css相關代碼，現在免費分享給大家，獲取的方式為：

關注此頭條號“互聯網IT信息”——>私信發送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式。

1. 此篇文章講解目錄：

案例和由此案例重點講解的知識點介紹
案例代碼實現
css三大特性知識點詳解

2. 案例和相關知識點介紹

此案例是頁面，效果如下：

此頁面的技術實現解析：

使用標簽選擇器定義通用樣式，通過css層疊性和繼承性來讓通用標簽的樣式被繼承到類選擇器上

此案例中主要用到了，基于此，我們會系統的將如下知識點全部講解：

css三大特性：層疊性、繼承性、優先級

3. 此案例的代碼實現

第一步：使用塊級標簽和無序列表編寫導航側邊欄的html

第二步：通過標簽選擇器定義ul li a的通用樣式

第三步：定義外層div樣式

第四步：通過類選擇器定義無序列表樣式，其中li和a標簽的基本樣式繼承自第二步的標簽選擇器

4. 此案例的知識點詳解

CSS三大特性：

層疊性、繼承性、優先級

1）層疊性：

1. 給一個標簽設置的樣式發生沖突的時候即樣式的覆蓋

2. 瀏覽器的渲染機制是從上到下的，當有沖突的時候就采用最后的那個樣式

例如：

h2.grape {color: purple;}

h2 {color: siver;}

層疊性代碼實例：

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<styletype="text/css">

.two{

color: green;

}

.one{

color: red;

font-size: 30px;

}

.tree{

color: yellow;

font-size: 40px;

}

</style>

</head>

<body>

<pclass="one two tree">

一段文字

</p>

</body>

</html>

2）繼承性：繼承就是子標簽繼承了上級標簽的CSS樣式的屬性

1，發生的前提是：標簽之間屬于一種嵌套關系

2，文字顏色可以之間繼承

3，字體大小可以繼承

4，字體可以繼承

5，行高也可以實現繼承

6，與文字有關的屬性都可以，實現繼承

特殊注意：

a標簽超鏈接不能實現字體顏色的繼承，字體大小可以繼承

h1不可以繼承文字的大小，繼承過來還會做一個計算

繼承性代碼實例：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<style>

div{

color: red;

font-size: 30px;

}

</style>

</head>

<body>

<div>

<ahref="">a</a>

</div>

</body>

</html>

3) 優先級

具體解釋如下：

內聯樣式最大，內聯樣式的優先級最高。

ID選擇器的優先級，僅次于內聯樣式。

類選擇器優先級低于ID選擇器

標簽選擇器低于類選擇器。

補充：

權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大。

所有都相同時，聲明靠后的優先級大。

CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。

綜述：

-行內樣式 > 頁內樣式 > 外部引用樣式 > 瀏覽器默認樣式

important > 內聯 > ID > 偽類|類 | 屬性選擇 > 標簽 > 偽對象 > 通配符 > 繼承

css優先級代碼實例：

<!DOCTYPE>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>無標題文檔</title>

<style>

*{ font-size:56px;}

p{ font-size:32px; color:#60C;}

.d{ color:#F0F;}

#hei{ color:#96F;}

</style>

</head>

<body>

<pclass="d"id="hei"style="color:#FF0;">我是段落3</p>

<ahref="#">我是超鏈接</a>

<span>我是備胎標簽</span>

</body>

</html>

大家好接下來我們會邀請前端架構師以連載的方式，并且結合阿里天貓商城的門戶，系統講解Css的專業知識，歡迎大家關注頭條號“互聯網IT信息”。

果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標簽。

這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。

<html>

</html>

三、雙標簽和單標簽。

在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。

四、head頭部標簽。

head頭部有以下幾種常用標簽：

meta：主要提供有關頁面的元信息。

link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。

title：頁面標題的標簽。

script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。

五、body主體標簽。

1、塊級標簽。

塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁面顯示的效果如下圖：

常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內聯標簽。

內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

常用的內聯標簽有：span、a、b、strong、i、em 。

3、內聯塊級標簽。

內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：

常用的內聯塊級標簽有：img、input、textarea。

4、區域標簽。

所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。

常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。

5、表單標簽。

這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：

?表單常用的標簽有：form、input、select、option、textarea 。

以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。

在線咨詢

上一篇：一個HTML5動畫，布局只要一行代碼，你還真別不信
下一篇：手把手教你如何用JS代碼實現禁止打開控制臺

您的項目需求

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

整合營銷服務商

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

情提示：以下代碼是我們邀請的前端架構師基于天貓門戶編寫的css相關代碼，現在免費分享給大家，獲取的方式為：

1. 此篇文章講解目錄：

2. 案例和相關知識點介紹

3. 此案例的代碼實現

4. 此案例的知識點詳解

大家好接下來我們會邀請前端架構師以連載的方式，并且結合阿里天貓商城的門戶，系統講解Css的專業知識，歡迎大家關注頭條號“互聯網IT信息”。

一、文檔類型聲明。

二、html主標簽。

三、雙標簽和單標簽。

四、head頭部標簽。

五、body主體標簽。

您的項目需求