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

码农天地 - 2020-06-21 19:57:16

本文目标：

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实现自定义导航菜单案例解析（代码实例）的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：css本文原创发布php中文网，转载请注明出处，感谢您的尊重！上一篇：使用 CSS 实现一个简单的骨架屏（Skeleton Screen）下一篇：css选择器有哪些？哪些属性是可以继承的？

相关视频

CSS 预处理器纯css3实现信纸/同学录效果（代码示例）css3常见新特性介绍适合初学者学习的CSS3实现可爱的动物使用CSS实现皮卡丘使用 CSS 实现一个简单的骨架屏（Skeleto...CSS结构性伪类选择器—nth-of-type实现...使用CSS3背景属性使用CSS3文本属性使用CSS3过渡属性使用CSS3多列布局属性

网友评论

文明上网理性发言，请遵守新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

易达

有偿投稿用户

最近文章CSS3中结构性伪类选择器—:first-of-type实现名言标签（代码实例）135结构性伪类选择器—nth-child实现彩色表格案例（代码实例）157结构性伪类选择器—target实现可搜索菜单案例（代码实例）130发布技术文章最新文章热门排行

CSS Modules 详解flex布局和传统的布局有什么不同如何合理使用CSS框架？css选择器有哪些？哪些属性是可以继承的？CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析（代码实例）使用 CSS 实现一个简单的骨架屏（Skeleton Screen）使用CSS实现皮卡丘CSS 中伪类的使用（干货）

html怎么添加背景图片且让图片平铺整个页面？（代码示例）css如何设置背景图片？background属性添加背景图片css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍html a标签怎么设置颜色？超链接的颜色设置总结（css样式）使用css3在网页中实现各种三角形样式集合（原理解析）css如何设置透明度？设置透明度的两种方法（代码实例）css实现背景颜色半透明的两种方法css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法推荐视频教程野秀堂HTML5+CSS3视频教程CSS3精讲视频教程CSS视频教程-玉女心经版HTML/CSS技术小知识每日分享HTML+CSS网页基础视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 500596;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！合肥彼岸互联信息技术有限公司

座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇： ps里ctrl+t是什么意思

下一篇：使用LayUI实现前端分页功能

Tags 标签

加个好友，技术交流

码农天地

首页 HTML/CSS WEB服务器 PHP Linux 数据库异常报错插件工具美文欣赏站长直荐