. 此篇文章講解目錄：

• 案例和由此案例重點講解的知識點介紹

• 案例代碼實現

• 行內標簽知識點詳解

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

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

此頁面的技術實現解析：

所有元素在統一行顯示的時候，需要使用到行內標簽img 和 a來實現

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

行內標簽

3. 此案例的代碼實現

第一步：書寫導航條的html代碼

第二步：定義導航的css樣式

4. 此案例的知識點詳解

行內元素

-行內元素：

在html中<a>、<span>、<br>、<i>、<em>、<strong>、<label>等等屬于行內元素

-行內元素三大特點：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高及頂部和底部邊距不可設置；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變（廢話）。

案例：

a{

background-color: PowderBlue;

width: 500px;

height: 300px;

//元素的高度、寬度、行高及頂部和底部邊距不可設置

}

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

在公司網站建設中，離不開網站的導航設計，清晰的網站導航可以降低網站的跳出率，使訪問網站的用戶更完整的了解網站結構，那么如何打造完美的網站導航呢？

第一、導航使用文字編輯器。

我們都知道百度蜘蛛目前不能識別圖片，之所以采用文字編輯，是為了更好的讓搜索引擎蜘蛛爬行，使其明白網站的結構，及讓用戶知道自己所處的位置。

另外，導航使用文字編輯器而不是在圖片上設置鏈接，那是為了加快網站加載的速度，很多網站為了美觀，喜歡使用flash圖片，js生成導航系統，使得CSS可以實現各種視覺效果，如背景，文字顏色變化，下拉菜單等。

第二、縮短內頁和首頁的距離。

網頁的層次結構最好不要太復雜，讓用戶點擊不要超過三次，在三次以內這都是合理的，但如果超過三次，這容易引起用戶的反感，但是很多電商網站隨著內容的增加，用戶進入頁面的距離也就加長。

要改變這種情況，縮短內頁和首頁的距離，最好的方式就是擁有一個合理的導航， 做好合理的分配，用戶可以通過導航，在最短的距離內找到目標。

另外，減少網站的層級結構也是為了使內容得到更好的權重，一般來說，首頁的權重是最高的，然后是依次傳遞，只有縮短內頁和首頁之間的距離，內頁才會獲得更多的排名機會。

第三、導航文字中包含關鍵詞。

網站無論是首頁還是欄目頁，在擁有眾多的內容頁面時，導航中關于首頁和欄目頁的鏈接是獲得內部鏈接的重要來源，當然由于內頁數量多，錨文本指向首頁和欄目頁，所傳遞的權重頁也就越高。

這是因為我們在構建網站時，需要對核心關鍵詞進行定位和分類，在欄目名中含有核心關鍵詞，這樣可以很好的對網站進行分類，知道用戶喜歡什么樣的內容。

第四、使用面包屑導航。

面包屑導航的作用是告訴訪問者他們目前在網站中的位置以及如何返回，面包屑導航是鏈接上頁與下頁之間的橋梁。可以說，一個清晰地網站結構，都會擁有一個面包屑導航，在內容也面較多的網站，面包屑導航的作用尤其突出。

第五、底部避免關鍵詞堆積。

很多網站為了增加關鍵詞的密度，宣傳核心關鍵詞，都喜歡在底部，加上一串關鍵詞，其實這是畫蛇添足之舉，刻意去堆積關鍵詞在搜索引擎認為這有作弊嫌疑，不利網站優化。

在企業網站建設中，清晰的網站導航，訪客可以明確知道自己所處的位置，將要去哪一個地方，這無論是對用戶還是對搜索引擎都可以幫助他們很好的理解網站結構。

SS3導航欄展開動畫效果,實現不一樣的手風琴菜單展開收縮動畫效果！效果如下：

實現代碼

html：

css：

javascript：