css橫向導航欄製作流程詳解

admin發表於2018-09-11
CSS

製作簡單橫向導航欄是前端人員必須要掌握的技能，對於有經驗的人可以說是輕鬆加愉快的事情，但對於新手則未必如此，下面就通過程式碼例項介紹一下此效果的實現過程。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.nav ul{list-style-type:none;}
.nav li{
  float:left;
  width:100px;
  margin-left:3px;
  line-height:30px;
}
.nav a:link{
  color:#666;
  background:#CCC;
  text-decoration:none;
}
.nav a:visited{
  color:#666;
  text-decoration:none;
}
.nav a:hover{
  color:#FFF;
  font-weight:bold;
  text-decoration:underline;
  background:#0F0;
}
.nav a{
  display:block;
  text-align:center;
  height:30px;
  font-weight:bold;
}
</style>
</head>
<body>
<div class = "nav">
  <ul>
    <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>
    <li><a href="#">螞蟻部落六</a></li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了簡單的橫向導航欄效果，下面介紹一下它的實現過程:

一.實現原理:

（1）.既然是橫排的導航選單，那麼就要讓li元素水平排列，實現程式碼如下:

[CSS] 純文字檢視 複製程式碼
.nav li{
  float:left;
  width:100px;
  margin-left:3px;
  line-height:30px;
}

上面的程式碼使用左浮動實現了li元素的橫向排列，並設定了每一個導航專案的寬度，line-height:30px可以讓行的高度為30px，文字垂直居中顯示，margin-left:3px用來設定導航欄專案之間的間隔。

（2）.設定導航欄的預設顏色:

[CSS] 純文字檢視 複製程式碼
.nav a:link{
  color:#666;
  background:#CCC;
  text-decoration:none;
}

上面的程式碼可以設定導航的背景顏色，和連結文字的字型顏色，並且設定底部沒有下劃線。

（3）.設定連結點選後的顏色:

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

上面的程式碼可以設定連結唄點選後的字型顏色，並設定不顯示下劃線。

（4）.設定滑鼠懸浮時連結的樣式:

[CSS] 純文字檢視 複製程式碼
.nav a:hover{
  color:#FFF;
  font-weight:bold;
  text-decoration:underline;
  background:#0F0;
}

上面的程式碼當滑鼠懸浮的時候可以設定字型顏色和文字為粗體，並且文字帶有下劃線，同時也設定背景顏色。

（5）.設定連結的一般樣式:

[CSS] 純文字檢視 複製程式碼
.nav a{
  display:block;
  text-align:center;
  height:30px;
  font-weight:bold;
}

特別要注意的是display:block，它將連結a設定為塊級元素，這樣的話就可以設定a的尺寸，如果不設定它的寬度，它的寬度能夠填滿父元素，否則的話，連結的a的尺寸就是文字內容佔據的尺寸。

二.相關閱讀:

（1）.浮動參閱CSS float浮動一章節。

（2）.:hover參閱CSS E:hover偽類選擇器一章節。

相關文章