本文目標：
1、掌握CSS中結構性偽類選擇器—nth-of-type的用法
問題：
1、實現以下自定義導航選單，且使用純DIV CSS，必須使用結構性偽類選擇器—nth-of-type
#附加說明：
1、導航寬800px，高90px，居中顯示
2、雪花背景圖片寬高都是50px，酒瓶圖片大小也是一樣
#現在來具體操作
1、準備素材：結合目標效果我們可以做一張酒瓶的圖片，背景是透明的，這樣背景顏色更改了，它裡面透明的部分也可以隨之變化，還有左右兩片雪花，也是所需的素材
2、創建好index.html，寫好架構，架構如何分析呢
思路分析：
1、目標導航分為6個子項，所以我們可以使用常用的li來實現它，li是水平排列，所以肯定需要浮動起來，所以最後一個li我們可以清除浮動，達到ul依然可以有效包覆裡面所有的浮動起來的li
2、1,3,5導航背景是藍色，2,4,6的導航背景是黃色，所以li的顏色都是呈現規律性的變化，所以此時我們可使用nth-of-type
3、每個導航都是上下兩部分，上部分是一張圖片，下部分是文字
好，先依照分析，寫好思路，暫時不管css的實作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析</title>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航一
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航二
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航三
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航四
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航五
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航六
</div>
</li>
<li class="clear"> </li>
</ul>
</div>
</body>
</html>登入後複製
3、寫樣式，建立css資料夾，裡面新建index.css，裡面的樣式怎麼寫了，以下是分析思路
思路分析：
.container * 公共樣式
1、寫了這麼多案例，這一步基本上是必不可少的，也是為了減少程式碼冗餘性，所以在這裡我們可以定義公共的樣式
所以index.css中加入程式碼如下：
.container *{
padding:0;
margin:0;
}登入後複製
.container 外層容器
1、根據說明得知，寬600,高90，左右填充間隔為100，背景色土黃，帶圓角，要居中，背景圖片是多個，第一個背景圖片水平居左，第二個背景圖片水平居右，垂直方向上都是居中，背景圖片大小為50px
所以index.css中加入程式碼如下：
.container{
width: 600px;
height: 90px;
background-color: burlywood;
color: white;
margin: 0 auto;
border-radius: 15px;
padding:0 100px;
background-image: url(../images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）),url(../images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）);
background-size: 50px 50px;
background-position-x: left,right;
background-repeat: no-repeat;
background-position-y: center;
}登入後複製
li 欄位
1、不帶預設黑點，所以list-style :none,水平排列所以float:left,寬度都一樣，所以width=600/6=100px,字體居中text-align: center;
##所以index.css中加入程式碼如下：
li{
list-style: none;
float: left;
width:100px;
text-align: center;
}登入後複製
img圖片
1、根據要求得知寬高都是50，且要居中，所以裡面的圖片的寬高剛好等於圖片容器的大小，所以寬100%，高100%
所以index.css中加入程式碼如下：
.img{
width: 50px;
height: 50px;
margin:0 auto;
}
.img img{
width:100%;
height: 100%;
}登入後複製
clear清除浮動列
1、因為該列的目的是清除浮動
#所以index.css中加入程式碼如下：
li.clear{
width:0;
height: 0;
clear: both;
float: none;
}登入後複製
title文字
1、上下有填充距離，所以index.css加入程式碼如下：
.title{
padding:10px;
}登入後複製
li的單獨設定：
1、1,3,5導航背景是藍色，2,4,6的導航背景是黃色，所以說明奇數列背景是藍色，偶數列背景是黃色，剛好nth -of-type可以帶表達式，所以index.css中加入程式碼如下：
li:nth-of-type(2n){
background-color:lightgoldenrodyellow;
color:peru;
}
li:nth-of-type(2n+1){
background-color:lightblue;
}登入後複製
到此為止，index.css程式碼如下：
.container *{
padding:0;
margin:0;
}
.container{
width: 600px;
height: 90px;
background-color: burlywood;
color: white;
margin: 0 auto;
border-radius: 15px;
padding:0 100px;
background-image: url(../images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）),url(../images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）);
background-size: 50px 50px;
background-position-x: left,right;
background-repeat: no-repeat;
background-position-y: center;
}
li{
list-style: none;
float: left;
width:100px;
text-align: center;
}
.img{
width: 50px;
height: 50px;
margin:0 auto;
}
.img img{
width:100%;
height: 100%;
}
li.clear{
width:0;
height: 0;
clear: both;
float: none;
}
.title{
padding:10px;
}
li:nth-of-type(2n){
background-color:lightgoldenrodyellow;
color:peru;
}
li:nth-of-type(2n+1){
background-color:lightblue;
}登入後複製
然後將index.css引入index. html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航一
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航二
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航三
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航四
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航五
</div>
</li>
<li>
<div class="img">
<img src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
</div>
<div class="title">
导航六
</div>
</li>
<li class="clear"> </li>
</ul>
</div>
</body>
</html>登入後複製
最終運作效果如下：
#總結：
1、學習了結構性偽類別選擇器—nth- of-type用法，這裡的困難也是在於表達式，所以寫程式碼的時候需要多花點時間耐心去總結規律
以上是CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
