Home >Web Front-end >CSS Tutorial >CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)
CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)
- 易达Original
- 2020-06-18 12:47:282576browse
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
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.
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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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>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
So add the following code to index.css:
.container *{
padding:0;
margin:0;
}.container outer container
1. According to the instructions, The width is 600, the height is 90, the left and right padding intervals are 100, the background color is earthy, with rounded corners, and it must be centered. There are multiple background images. The first background image is horizontally on the left, the second background image is horizontally on the right, and both vertically It is centered, and the background image size is 50px
So add the following code to 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 structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)),url(../images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example));
background-size: 50px 50px;
background-position-x: left,right;
background-repeat: no-repeat;
background-position-y: center;
}li Column
1. There is no default black point, so list-style :none, horizontal arrangement, so float:left, width is the same, so width=600/6=100px, font is centered text-align: center;
So add the following code to index.css:
li{
list-style: none;
float: left;
width:100px;
text-align: center;
}imgimage
1. According to the requirements, the width and height are both 50 and must be centered, so the width and height of the image inside are exactly equal to the size of the image container, so the width is 100% and the height is 100%. 100%
So add the following code to index.css:
.img{
width: 50px;
height: 50px;
margin:0 auto;
}
.img img{
width:100%;
height: 100%;
}clear clear floating column
1. Because the purpose of this column is to clear floating column
So add the following code to index.css:
li.clear{
width:0;
height: 0;
clear: both;
float: none;
}title text
1. There is a padding distance between the top and bottom, so add the following code to index.css:
.title{
padding:10px;
}li Separate settings:
1, 1, 3, 5 navigation background is blue, 2, 4, 6 navigation background is yellow, so the background of odd-numbered columns is blue, and the background of even-numbered columns is yellow, exactly nth -of-type can bring expressions, so add the following code to index.css:
li:nth-of-type(2n){
background-color:lightgoldenrodyellow;
color:peru;
}
li:nth-of-type(2n+1){
background-color:lightblue;
}So far, the index.css code is as follows:
.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 structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)),url(../images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example));
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;
}Then introduce index.css into index. The final running effect of
<!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 structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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="images/CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example)" / 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>in html is as follows:
Summary:
1. Learned the structural pseudo-class selector—nth- Of-type usage, the difficulty here also lies in expressions, so you need to spend more patience to summarize the rules when writing code
The above is the detailed content of CSS structural pseudo-class selector—nth-of-type implements custom navigation menu case analysis (code example). For more information, please follow other related articles on the PHP Chinese website!