當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

036_CSS导航条

發布時間：2025/4/17 CSS 135 豆豆

生活随笔收集整理的這篇文章主要介紹了 036_CSS导航条小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 導航欄/鏈接列表

1.1. 導航欄需要標準的html作為基礎。

1.2. 在我們的例子中, 將用標準的html列表來構建導航欄。

1.3. 導航欄基本上是一個鏈接列表, 因此使用<ul>和<li>元素是非常合適的:

<ul><li><a href="default.asp">Home</a></li><li><a href="news.asp">News</a></li><li><a href="contact.asp">Contact</a></li><li><a href="about.asp">About</a></li> </ul>

1.4. 現在, 讓我們從列表中去掉圓點和外邊距:

ul {list-style-type: none;margin: 0;padding: 0; }

1.4.1. list-style-type:none刪除圓點。導航欄不需要列表項標記。

1.4.2. 把外邊距和內邊距設置為0可以去除瀏覽器的默認設定。

1.5. 以下例子中的代碼是用在垂直、水平導航欄中的標準代碼

<!DOCTYPE html> <html><head><title>垂直、水平導航欄中的標準代碼</title><meta charset="utf-8" /><style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;}</style></head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body> </html>

1.6. 效果圖

2. 垂直導航欄

2.1. 如需構建垂直導航欄, 我們只需要定義<a>元素的樣式, 除了上面的代碼之外:

a {display: block;width: 120px; }

2.2. display: block把鏈接顯示為塊元素可使整個鏈接區域可點擊(不僅僅是文本), 同時也允許我們規定寬度。

2.3. width: 120px塊元素默認占用全部可用寬度。我們需要規定120像素的寬度。

2.4. 請始終規定垂直導航欄中<a>元素的寬度。如果省略寬度, IE6會產生意想不到的結果。

2.5. 完整樣式的垂直導航欄實例

<!DOCTYPE html> <html><head><title>垂直導航欄</title><meta charset="utf-8" /><style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;}a {text-decoration: none; /*去掉下劃線*/display: block;width: 120px;color: #FFFFFF;font-weight: bold;text-align: center;line-height: 48px;}/* 未訪問的鏈接 */a:link {background-color: #bebebe;;} /* 已訪問的鏈接 */ a:visited {background-color: #00FF00;} /* 鼠標移動到鏈接上 */a:hover {background-color: #FF00FF;} /* 選定的鏈接 */a:active {background-color: #0000FF;}</style></head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body> </html>

2.6. 效果圖

3. 水平導航欄

3.1. 創建水平導航欄可以對列表進行浮動:

li {float: left; } a {display: block;width: 120px; }

3.2. 使用float: left來把塊元素滑向彼此。

3.3. display: block把鏈接顯示為塊元素可使整個鏈接區域可點擊(不僅僅是文本), 同時也允許我們規定寬度。

3.4. width: 120px 由于塊元素默認占用全部可用寬度, 鏈接無法滑動至彼此相鄰。我們需要規定120像素的寬度。

3.5. 完整樣式對列表項進行浮動的水平導航欄

<!DOCTYPE html> <html><head><title>水平導航欄</title><meta charset="utf-8" /><style type="text/css">body {margin: 0px;}ul {list-style-type: none;margin: 0;padding: 0;}li {float: left;}a {text-decoration: none;display: block;width: 120px;color: #FFFFFF;font-weight: bold;text-align: center;line-height: 48px;}/* 未訪問的鏈接 */a:link {background-color: #98bf21} /* 已訪問的鏈接 */ a:visited {background-color: #00FF00;} /* 鼠標移動到鏈接上 */a:hover {background-color: #FF00FF;} /* 選定的鏈接 */a:active {background-color: #0000FF;}</style></head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body> </html>

3.6. 效果圖

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的036_CSS导航条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。