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

首頁

web前端

css教學

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

易达

Jun 18, 2020 pm 12:47 PM

css

本文目標：

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="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航一
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航二
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航三
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航四
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航五
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / 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="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航一
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航二
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航三
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航四
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / alt="CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）" >
                </div>
                <div class="title">
                    导航五
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghwm/default1.png"  data-src="images/CSS結構性偽類選擇器—nth-of-type實作自訂導航選單案例解析（程式碼實例）"  class="lazy"   / 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中文網其他相關文章！

陳述

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

動畫粉絲的製作Apr 18, 2025 am 10:35 AM

切換選項卡時，這是您的眼睛首先要尋找的東西。

將您的域與Netlify託管網站一起使用Apr 18, 2025 am 10:34 AM

Netlify有自己的自定義領域文檔，因此，如果您在此內容上尋找馬的技術文檔，則應將其視為

虛擬程式碼Apr 18, 2025 am 10:33 AM

Yonatan Doron不久前就媒體上寫了一篇文章，稱為“代碼藝術 - 為什麼要編寫更多偽代碼”。喜歡這個標題，作為偽代碼的粉絲

讓瑪麗·昆多組織的治療付出艱鉅的任務Apr 18, 2025 am 10:31 AM

我們生活在WebPack和NPM腳本的時代。好是壞，他們帶領捆綁和任務運行，以及一點點滾動，JSPM和GULP。但

從大鴻溝中分支Apr 18, 2025 am 10:27 AM

我喜歡一詞前端開發人員。如果您的擔憂是：

啟動網站的初學者旅程Apr 18, 2025 am 10:20 AM

在2018年9月，我學習Web開發的旅程僅幾個月了。正如我確定的許多新開發人員一樣，這是一項艱鉅的任務

所有新的ES2019技巧和技巧Apr 18, 2025 am 10:19 AM

ES2019中添加了新功能，該標準再次更新了。現在在Node，Chrome，Firefox和Safari中正式提供

用線圈貨幣化（並刪除支持者的廣告）Apr 18, 2025 am 10:13 AM

過去，我過去嘗試過一些基於“小費的微付款”網站。他們來來去去。那很好。從發布者的角度來看，它

See all articles

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。