Rumah > Artikel > hujung hadapan web > 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用法,这里的难点也是在于表达式,所以写代码的时候需要多花点耐心去总结规律
Atas ialah kandungan terperinci CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析(代码实例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!