hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 前端开发 - 正文 君子好学,自强不息!

CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析(代码实例)_WEB前端开发

2020-06-19前端开发ki4网9°c
A+ A-

ps文字显示不出来怎么办?_WEB前端开发

ps文字显示不出来的解决办法:1、打开PS,选择文本工具并双击文字区域,更换前景色;2、更换图层位置;3、选中文字剪贴蒙版,并鼠标右键按住该图层加【Ctrl+alt+G】即可。

本文目标:

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,里面的样式怎么写了,以下是分析思路

思路分析:

.container * 公共样式

1、写了这么多案例,这一步基本上是必不可少的,也是为了减少代码冗余性,所以在这里我们可以定义公共的样式

所以index.css中添加代码如下:

.container *{
    padding:0;
    margin:0;
}

.container 外层容器

ps怎么添加选择主体?_WEB前端开发

ps添加选择主体的方法:首先点击选择菜单栏按钮,就能展开命令;然后在下拉菜单中点击主体按钮;接着可以自行选择是否保留图层;最后在画布就可以选取选中了主体。

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

</html>

最终运行效果如下:

总结:

1、学习了结构性伪类选择器—nth-of-type用法,这里的难点也是在于表达式,所以写代码的时候需要多花点耐心去总结规律

以上就是CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析(代码实例)的详细内容,更多请关注ki4网其它相关文章!

ps保存图片太大怎样调小?_WEB前端开发

ps保存图片太大调小的方法:首先依次点击【文件-存储为web格式】;然后将图片元素信息选择为无;接着点击右上小三角设置选择优化文件大小;最后存为需要的大小即可。

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析(代码实例)_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>