CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)-CSS Tutorial-php.cn

Table of Contents

Goal of this article:

Question:

Now let’s do the specific operation

Summary:

Home

Web Front-end

CSS Tutorial

CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)

易达

Jun 18, 2020 pm 12:47 PM

css

Goal of this article:

1. Master the usage of nth-of-type, a structural pseudo-class selector in CSS.

Question:

1. Implement the following customization To define a navigation menu and use pure DIV CSS, you must use the structural pseudo-class selector—nth-of-type

CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)

Additional notes:

1, The navigation width is 800px, the height is 90px, and the display is centered

2. The width and height of the snowflake background image are 50px, and the size of the wine bottle image is also the same

Now let’s do the specific operation

1. Prepare materials: Combined with the target effect, we can make a picture of a wine bottle. The background is transparent. In this way, the background color changes, and the transparent part inside it can also change accordingly. There are also two snowflakes on the left and right, which are also the required materials.

CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)

2. Create index.html, write the architecture, how to analyze the architecture

Idea analysis:

1. The target navigation is divided into 6 sub-items, so we can use the commonly used li to implement it. The li is arranged horizontally, so it definitely needs to be floated, so we can clear the float of the last li, and it will still work if it reaches ul Effectively wraps all the floating li

2, 1, 3, 5 navigation background is blue, 2, 4, 6 navigation background is yellow, so the colors of li are regular. Change, so at this time we can use nth-of-type

3. Each navigation has two parts, the upper part is a picture, and the lower part is text

Okay, first According to the analysis, write a good idea and ignore the implementation of css for the time being

<!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/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" >
                </div>
                <div class="title">
                    导航一
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" >
                </div>
                <div class="title">
                    导航二
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" >
                </div>
                <div class="title">
                    导航三
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" >
                </div>
                <div class="title">
                    导航四
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" >
                </div>
                <div class="title">
                    导航五
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" >
                </div>
                <div class="title">
                    导航六
                </div>
            </li>
            <li class="clear"> </li>
        </ul>
    </div>
</body>
 
</html>

Copy after login

3. Write the style, create a css folder, create a new index.css in it, how to write the style inside, the following is the analysis idea

Idea analysis:

.container *Public style

1. After writing so many cases, this step is basically indispensable, and it is also to reduce code redundancy. , so here we can define the public style