首頁 > 文章 > web前端 > CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）

CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）

易达原創: 2020-06-18 12:47:282513瀏覽

本文目標：

1、掌握CSS中結構性偽類選擇器—nth-of-type的用法

問題：

1、實現以下自定義導航選單，且使用純DIV CSS，必須使用結構性偽類選擇器—nth-of-type

CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）

#附加說明：

1、導航寬800px，高90px，居中顯示

2、雪花背景圖片寬高都是50px，酒瓶圖片大小也是一樣

#現在來具體操作

1、準備素材：結合目標效果我們可以做一張酒瓶的圖片，背景是透明的，這樣背景顏色更改了，它裡面透明的部分也可以隨之變化，還有左右兩片雪花，也是所需的素材

CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）

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>

最終運作效果如下：

CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）

#總結：

1、學習了結構性偽類別選擇器—nth- of-type用法，這裡的困難也是在於表達式，所以寫程式碼的時候需要多花點時間耐心去總結規律

以上是CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

架构 css html Float 选择器伪类 ul li

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用 CSS 實作一個簡單的骨架螢幕（Skeleton Screen）下一篇：使用 CSS 實作一個簡單的骨架螢幕（Skeleton Screen）

看更多