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的實作
CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析
导航一
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;
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; }
.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; }
CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析
以上是CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
