CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析（代码实例）

互联网 20-6-18

本文目标：

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">&nbsp;</li>         </ul>     </div> </body>  </html>

3、写样式，创建css文件夹，里面新建index.css，里面的样式怎么写了，以下是分析思路

思路分析：

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 列

所以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">&nbsp;</li>         </ul>     </div> </body>  </html>

最终运行效果如下：