CSS构造性伪类选中器—nth-of-type实现自定义导航菜单案例解析（

发布时间：09/01 来源：未知浏览：关键词：

本文指标：1、把握CSS中构造性伪类选中器—nth-of-type的用途题目：2、实现下列自定义导航菜单，且运用纯DIV+CSS。

本文指标：

1、把握CSS中构造性伪类选中器—nth-of-type的用途

题目：

1、实现下列自定义导航菜单，且运用纯DIV+CSS，必需运用构造性伪类选中器—nth-of-type

2、新建好index.html，写好架构，架构怎样剖析呢

思绪剖析：

1、指标导航分为6个子项，所以我们可以运用常用的li来实现它，li是水平罗列，所以确定需要浮动起来，所以最后一个li我们可以革除浮动，达到ul仍然可以有效包裹住里面所有的浮动起来的li

2、1,3,5导航配景是蓝色，2,4,6的导航配景是黄色，所以li的色彩都是呈现纪律性的变化，所以此时我们可运用nth-of-type

3、每个导航都是高低两局部，上局部是一张图片，下局部是文字

好，先按照剖析，写好思绪，临时无论css的实现





    
    CSS构造性伪类选中器—nth-of-type实现自定义导航菜单案例解析



    
        
            
                
                    
                
                
                    导航一
                
            
            
                
                    
                
                
                    导航二
                
            
            
                
                    
                
                
                    导航三
                
            
            
                
                    
                
                
                    导航四
                
            
            
                
                    
                
                
                    导航五
                
            
            
                
                    
                
                
                    导航六

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中





    
    CSS构造性伪类选中器—nth-of-type实现自定义导航菜单案例解析
    



    
        
            
                
                    
                
                
                    导航一
                
            
            
                
                    
                
                
                    导航二
                
            
            
                
                    
                
                
                    导航三
                
            
            
                
                    
                
                
                    导航四
                
            
            
                
                    
                
                
                    导航五
                
            
            
                
                    
                
                
                    导航六