CSS构造性伪类选中器—nth-of-type实现自定义导航菜单案例解析（
本文目标：
1、把握CSS中构造性伪类选中器—nth-of-type的用途
问题：
1、实现以下自定义导航菜单，且使用纯DIV+CSS，必需使用构造性伪类选中器—nth-of-type
附加说明：
1、导航宽800px，高90px，居中显示
2、雪花背景图片宽高都是50px，酒瓶图片大小也是一样
此刻来详细操纵
1、预备素材：结合目标结果我们可以做一张酒瓶的图片，背景是透亮的，这样背景色彩更换了，它里面透亮的部分也可以随之转变，还有摆布两片雪花，也是所需的素材
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/jptm.png" />
</div>
<div class="title">
导航一
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航二
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航三
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航四
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航五
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</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/xh2.png),url(../images/xh2.png);
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/xh2.png),url(../images/xh2.png);
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/jptm.png" />
</div>
<div class="title">
导航一
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航二
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航三
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航四
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航五
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航六
</div>
</li>
<li class="clear"> </li>
</ul>
</div>
</body>
</html>终究运转结果如下：
总结：
1、学习了构造性伪类选中器—nth-of-type用途，这里的难点也是在于表达式，所以写代码的时候需要多花点耐心去总结纪律
以上就是CSS构造性伪类选中器—nth-of-type实现自定义导航菜单案例解析（代码实例）的具体内容，更多请关注百分百源码网其它相关文章！
