解密國內大型網站導航欄製作原理

今天跟大家分享的是，網站導航欄的實現原理。小夥伴們不要被它高大上的名頭嚇到了哦~

因為任何導航欄的實現都離不開我們今天即將學習的HTML列表標籤。現在我們來看一下，即將用HTML列表標籤寫出的效果圖是怎樣的吧！

在寫出上述效果之前，先來給大家介紹一下，基本的列表元素有哪些吧？

無序列表

標籤定義無序列表，列表項默認使用粗體圓點進行標記。無序列表始於
標籤，每個列表項始於
• 標籤。開發中，無序列表一般應用於導航欄的製作。
  

  有序列表

  標籤定義有序列表，列表項默認使用數字進行標記。有序列表始於
  標籤，每個列表項始於
  1. 標籤。

     自定義列表

     自定義列表以

     標籤開始。每個自定義列表項以

     開始。每個自定義列表項的定義以

     開始。

     掌握好上述標籤，我們就來分析一下，今天要寫的導航欄的佈局吧~

     1）最外層：一個無序列表；

     2）裡層：八個列表項；

     3）最裡層：每個列表項中放置一個超鏈接。

     現在我們將這段文字翻譯成HTML代碼，

     寫完後效果是醬紫滴~

     很醜是不是？沒關係，我們來將它美化一下。

     1）首先，將超鏈接的默認樣式去掉；

     2）其次，將無序列表的默認樣式（小圓點）去掉；

     3）最後，將列表項依次向左浮動，水平排列（注意要清除li浮動後產生的副作用）。

     接下來，我們將這段文字用CSS翻譯一下，