CSS垂直導航選單

admin發表於2018-12-31
CSS

水平的選單的實現可以參閱CSS水平導航選單製作詳解一章節。

下面分享一個垂直導航選單例項，並介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  font-size:14px;
}
a{
  color:#333;
  text-decoration:none;
}
.nav li a{
  display:block;
  text-align: center;
  height:30px;
  line-height:30px;
  width:120px;
  background-color:#efefef;
  margin-bottom:1px;
}
.nav li a:hover{
  background-color:#F60;
  color:#fff;
}
</style>
</head>
<body>
<ul class="nav">
  <li><a href="#">首頁</a></li>
  <li><a href="#">關於我們</a></li>
  <li><a href="#">產品展示</a></li>
  <li><a href="#">螞蟻部落</a></li>
  <li><a href="#">聯絡我們</a></li>
</ul>
</body>
</html>

上面實現了簡單垂直導航選單效果。

實現原理:

[CSS] 純文字檢視 複製程式碼
*{
  margin:0;
  padding:0;
  font-size:14px;
}

比較粗暴的一種樣式重置，將所有的元素內外邊距設定為0，字型大小設定為14px。

更多內容參閱CSS刪除頁面周邊空白一章節。

[CSS] 純文字檢視 複製程式碼
a{
  color:#333;
  text-decoration:none
}

重置預設超連結樣式，所有連結顏色設定為#333，並且去掉下劃線。

[CSS] 純文字檢視 複製程式碼
.nav li a{
  display:block;
  text-align: center;
  height:30px;
  line-height:30px;
  width:120px;
  background-color:#efefef;
  margin-bottom:1px;
}

a是內聯元素，預設不能設定尺寸，所以通過display:block將其轉換為塊級元素。

緊接著再設定它的尺寸、行高、背景色和外邊距。

內聯元素可以參閱CSS 塊級/內聯元素一章節。

[CSS] 純文字檢視 複製程式碼
.nav li a:hover{
  background:#F60;
  color:#fff;
}

當受不了懸浮時，會切換連結a元素的背景色和字型顏色。

a:hover可以參閱CSS E:hover偽類選擇器一章節。

相關文章