CSS水平導航選單製作詳解

admin發表於2018-08-24
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{
  list-style-type:none;
  height:30px;
  border-bottom:10px solid #F60;
  margin-top:20px;
  padding-left:50px;
}
.nav li{
  float:left
}
.nav li a{
  display:block;
  height:30px;
  text-align:center;
  line-height:30px;
  width:80px;
  background:#efefef;
  margin-left:1px;
}
.nav li a:hover{
  background:#F60;
  color:#fff;
}
</style>
</head>
<body>
  <ul class="nav">
    <li><a class="on" 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{
  list-style-type:none;
  height:30px;
  border-bottom:10px solid #F60;
  margin-top:20px;
  padding-left:50px;
}

list-style-type:none去掉列表的預設樣式（預設樣式是很醜的）。

然後設定ul元素的高度為30px，底部邊框為視覺上看到的黃色。

上外邊距為20xp，左內邊距為50px。

[CSS] 純文字檢視 複製程式碼
.nav li{
  float:left
}

li元素左浮動，這樣li元素就可以水平排列，預設狀態下，每一個塊級元素佔據一行。

浮動可以參閱CSS float浮動一章節。

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

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

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

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

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

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

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

相關文章