CSS 構造擬似クラスセレクター - nth-of-type はカスタムナビゲーションメニューのケース分析を実装します (コード例)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

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, ナビゲーションの幅は 800 ピクセル、高さは 90 ピクセル、表示は中央に配置されます

##2. 雪の結晶の背景画像の幅と高さは 50 ピクセル、ワインボトルのサイズです画像も同様です

さあ、具体的な操作をしてみましょう

1. 素材を準備します: 対象のエフェクトと組み合わせると、ワインボトルの写真が作成できます。背景は透明です。このように背景の色が変わり、その中の透明な部分もそれに合わせて変化しますまた、左右に2つの雪の結晶も必要なマテリアルです。

2.index.html の作成、アーキテクチャの記述、アーキテクチャの分析方法 CSS 構造擬似クラスセレクター - nth-of-type はカスタムナビゲーションメニューのケース分析を実装します (コード例) ##アイデア分析:

1. ターゲットナビゲーションは次のように分かれています。サブ項目が6つあるのでよく使うliを使って実装できます liは横に並んでるので必ずfloatする必要があるので最後のliのfloatをクリアすればOKです、到達しても動作しますul すべてのフローティング li CSS 構造擬似クラスセレクター - nth-of-type はカスタムナビゲーションメニューのケース分析を実装します (コード例)

2、1、3、5 ナビゲーションの背景は青、2、4、6 のナビゲーションの背景は黄色なので、li の色は規則的です。 nth-of-type

3 を使用できます。各ナビゲーションには 2 つの部分があり、上の部分は画像で、下の部分はテキストです。

わかりました。まず、分析に従って、良いアイデアなので、当面は 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 externalcontainer

1。説明書では、幅は 600、高さは 90、左右のパディング間隔は 100、背景色は素朴で角が丸く、中央揃えにする必要があります。背景画像は複数あります。最初の背景画像は横長です。左側では 2 番目の背景画像が水平に、右側では垂直方向に中央に配置され、背景画像のサイズは 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 Column

1. デフォルトの黒点がないので、リスト形式:none、横配置なのでfloat:left、幅は同じなのでwidth=600/6=100px、フォントは中央に配置されます。 text-align: center;

したがって、次のコードをindex.cssに追加します:

li{
    list-style: none;
    float: left;
    width:100px;
    text-align: center;
}

imgimage

1. 要件に従って、幅と高さは両方とも 50 で、中央に配置する必要があるため、内部の画像の幅と高さは画像コンテナのサイズと正確に等しいため、幅は 100%、高さは 100% になります。次のコードを index.css に追加します:

.img{
    width: 50px;
    height: 50px;
    margin:0 auto;
    
}
.img img{
    width:100%;
    height: 100%;
}

clear Clear float columns

1. この列の目的は浮動列をクリアすることですので、次のコードを追加します。

li.clear{
    width:0;
    height: 0;
    clear: both;
    float: none;
}

title text

1. 上部と下部の間にはパディング距離があるため、次のコードをindex.cssに追加します:

.title{
    padding:10px;
}

li 個別設定:

1、1、3、5 ナビゲーションの背景は青色、2、4、6 ナビゲーションの背景は黄色であるため、奇数列の背景は青色、偶数列の背景は青色になります。列は黄色です。正確に n 番目の 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 をインデックスに導入します。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 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。