CSS 導覽列
CSS 導覽列
導覽列
熟練使用導覽欄，對於任何網站都非常重要。
使用CSS你可以轉換成好看的導覽列而不是枯燥的HTML選單。
導覽列=連結清單
作為標準的HTML基礎一個導覽列是必須的
在我們的例子中我們將建立一個標準的HTML清單導覽列。
導航條基本上是一個連結列表，所以使用
- 和
- 元素非常有意義：
實例
php中文网(php.cn) 
注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。
現在，讓我們從清單中刪除邊距和填充：
範例解析：-
list-style-type:none - 移除清單前小標誌。一個導覽列並不需要清單標記
移除瀏覽器的預設設定將邊距和填充設定為0
垂直導覽列
上面的程式碼，我們只需要元素的樣式，建立一個垂直的導覽列：#範例說明：實例
php中文网(php.cn) A background color is added to the links to show the link area.
Notice that the whole link area is clickable, not just the text.
-
display:block - 顯示區塊元素的鏈接，讓整體變為可點擊連結區域（不只是文字），它允許我們指定寬度
width:60px - 區塊元素預設為最大寬度。我們要指定一個60像素的寬度
水平導覽列
有兩種方法建立橫向導覽列。使用內聯或浮動的清單項目。
這兩種方法都很好，但如果你想連結到具有相同的大小，你必須使用浮動的方法。
內嵌清單項目
建立橫向導覽列的方法之一是指定元素， 上述程式碼是標準的內嵌入:
實例解析：-
display:inline; -預設情況下，
元素是塊元素。在這裡，我們刪除換行符之前和之後每個清單項，以顯示一行 。
浮動清單項目
在上面的範例中連結有不同的寬度。 對於所有的連結寬度相等，浮動- 元素，並指定為 #
