css 导航栏效果

news/2024/7/5 20:00:22 标签: css, html5

目录

  • 一、前言
  • 二、导航栏实现
  • 三、多级导航实现

一、前言

在网站上面我们经常能看到一些导航栏，当我们点击对应的导航栏菜单时就会跳转到相应的网页，那么导航栏是如何实现的呢，实现它并不难，主要需要使用到ul标签和其它css样式美化它。

二、导航栏实现

1.第一步：先在html中写出几个列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/test.css">
</head>
<body >
    <div class="nav">
        <ul>
            <li><a href="#">京东超市</a></li>
            <li><a href="#">秒杀</a></li>
            <li><a href="#">便宜包邮</a></li>
            <li><a href="#">京东生鲜</a></li>
            <li><a href="#">进口好物</a></li>
            <li><a href="#">京东家电</a></li>
            <li><a href="#">PLUS会员</a></li>
            <li><a href="#">拍卖</a></li>
        </ul>
    </div>
</div>
</body>
</html>

效果：
在这里插入图片描述

可以看到我写了8个列表选项，但是一点都不美观，接下来让我们去慢慢的美化它；

2.第二步：定义装列表的div样式nav

css">.nav{
    width: 1000px;
    height: 50px;
    margin-top: 120px;
    background-color:darkgray;
}

效果：
在这里插入图片描述

接下来我们让列表横向展示

3.第三步：

css">ul{
    margin-top: 0px;
    padding-inline-start: 0%;
}
.nav>ul>li{
    float: left;
    list-style: none;
    text-align: center;
    height: 50px;
    line-height: 50px;
    width: 125px;
    font-size: 20px;
    font-family: 黑体;
}

line-height是设置垂直对齐,text-align是水平对齐,padding-inline-start是设置ul开始的最左边行边距，默认是40px，如果不设置为0会把最后一个元素挤出去，list-style: none是把列表前面黑点去掉。

效果：
在这里插入图片描述

现在变得稍微顺眼了许多，但是还不够，我们继续设置它的其他样式

4.第四步：设置超链接的样式

css">/*
设置a标签里的字体颜色，并且设置字体的下划线为none，这样就不会显示下划线了
*/
a{
    color: black;
    text-decoration: none;
}
/*
设置a标签被鼠标点击时的字体颜色
*/
ul>li>a:active{
    color:orange;
}
/*
设置每个li列表被鼠标滑过时的背景颜色
*/
ul>li:hover{
    background-color:gold;
}

最终效果:
在这里插入图片描述

美化完了之后就很不错了，看起来也很舒服，实现也不难，用到的基本上都是常见的属性。

差点搞忘css的完整代码了，方面大家使用cv大法
CSS完整代码：

css">.nav{
    width: 1000px;
    height: 50px;
    margin-top: 120px;
    background-color:darkgray;
}
ul{
    margin-top: 0px;
    padding-inline-start: 0%;
}
.nav>ul>li{
    float: left;
    list-style: none;
    text-align: center;
    height: 50px;
    line-height: 50px;
    width: 125px;
    font-size: 20px;
    font-family: 黑体;
}
a{
    color: black;
    text-decoration: none;
}
ul>li>a:active{
    color:orange;
}
ul>li:hover{
    background-color:gold;
}

三、多级导航实现

1.首先修改html部分，增加几个ul列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/test.css">
</head>
<body >
    <div class="nav">
        <ul>
            <li><a href="#">京东超市</a></li>
            <li><a href="#">秒杀</a>
                <ul class="nav-child">
                    <li><a href="#">电视</a></li>
                    <li><a href="#">冰箱</a>
                    <ul class="nav-child-1">
                        <li><a href="#">大型冰箱</a></li>
                        <li><a href="#">新型冰箱</a></li>
                        <li><a href="#">超值冰箱</a></li>
                    </ul>
                    </li>
                    <li><a href="#">洗衣机</a></li>
                </ul>
            </li>
            <li><a href="#">便宜包邮</a></li>
            <li><a href="#">京东生鲜</a></li>
            <li><a href="#">进口好物</a></li>
            <li><a href="#">京东家电</a></li>
            <li><a href="#">PLUS会员</a></li>
            <li><a href="#">拍卖</a></li>
        </ul>
    </div>
</div>
</body>
</html>

先看看最后的效果：
在这里插入图片描述
2.然后先编写二级列表的类选择器nav-child

其他的高宽，超链接等属性样式它会默认继承父类，前面我们实现一级导航的时候已经定义过了，这里就不需要再定义这些了。

css">.nav-child{
    list-style: none;
    background-color:chocolate;
    
}

效果：
现在看起来还很乱，我们接下来希望让三级导航位于二级导航的右边，并且和二级导航对齐显示
在这里插入图片描述
3.这里就需要用到子绝父相的一个位置关系
关于position属性可以参考我写的文章：css position使用

我们给三级导航的父标签写一个相对位置，因为三级导航位于二级导航的li下，所以二级导航的li就是三级导航的父标签。

css代码：

css">.nav-child>li{
    position: relative;
}

4.接着定义三级导航的类选择器样式

给三级导航一个position:absolute绝对位置，因为li标签的宽度是125px，所以就向左移动125px,top稍微调整一下就可以，这里我给的是-0px。

注意：前面虽然定义了li的宽度，但是在三级导航中是不生效的，所以这里要再定义一下它的宽度。

css代码：

css">.nav-child-1{
    position:absolute;
    left: 125px;
    top: -0px;
    width: 125px;
    padding-left: 0%;
    list-style: none;
    background-color:darkgoldenrod;
    display: none;
}

效果：
在这里插入图片描述
5.最后我们希望当我们鼠标移动到标签上时才显示子列表，其他时候都是隐藏状态。

实现思路：我们给每个子级列表一个display：none;的属性它就会隐藏起来不显示，然后再给父标签定义一个鼠标划过事件，就是当鼠标移动到父标签时display的值改完block，三级列表的父标签就是二级列表，二级列表的父标签就是一级列表。

css完整代码：

css">.nav{
    width: 1000px;
    height: 50px;
    margin-top: 120px;
    background-color:darkgray;
}
ul{
    margin-top: 0px;
    padding-inline-start: 0%;
}
.nav>ul>li{
    float: left;
    list-style: none;
    text-align: center;
    height: 50px;
    line-height: 50px;
    width: 125px;
    font-size: 20px;
    font-family: 黑体;
}
a{
    color: black;
    text-decoration: none;
}
ul>li>a:active{
    color:orange;
}
ul>li:hover{
    background-color:gold;
}
.nav-child{
    list-style: none;
    background-color:chocolate;
    /*让二级子列表隐藏起来*/
    display: none;
}
/*父标签设置相对位置*/
 .nav-child>li{
    position: relative;
}
/*鼠标划过一级列表时修改display的值，让二级子列表可见*/
li:hover>.nav-child{
    display: block;
}
/*鼠标划过二级列表时修改display的值，让三级子列表可见*/
li:hover>.nav-child-1{
    display: block;
}
.nav-child-1{
    position:absolute;
    left: 125px;
    top: -0px;
    width: 125px;
    padding-left: 0%;
    list-style: none;
    background-color:darkgoldenrod;
    /*让三级子列表隐藏起来*/
    display: none;
}

效果：

多级导航栏

ok本篇文章就到这里，希望对各位小伙伴们有帮助。
在这里插入图片描述


http://www.niftyadmin.cn/n/223228.html

相关文章

Eyeshot .NET 2023.1 Crack

Eyeshot .NET 2023.1 Crack

概述 Eyeshot 是.NET 的 CAD 控件。它本身支持Windows Forms和Windows Presentation Foundation。它随附四个不同的Visual Studio工具箱项目&#xff1a;用于 2D 和 3D 几何创建或编辑的设计、用于自动生成 2D 视图的 绘图、使用线性静态分析进行几何验证的模拟以及用于CNC刀具…
阅读更多...
【每日一题Day174】LC1041困于环中的机器人 | 模拟 位运算

【每日一题Day174】LC1041困于环中的机器人 | 模拟 位运算

困于环中的机器人【LC1041】 在无限的平面上&#xff0c;机器人最初位于 (0, 0) 处&#xff0c;面朝北方。注意: 北方向 是y轴的正方向。南方向 是y轴的负方向。东方向 是x轴的正方向。西方向 是x轴的负方向。 机器人可以接受下列三条指令之一&#xff1a; "G"&#…
阅读更多...
Android Linux,Windows 安装，卸载 android studio

Android Linux,Windows 安装，卸载 android studio

Linux安装过程 sudo apt-get install libc6:i386 libncurses5:i386 libstdc6:i386 lib32z1 libbz2-1.0:i386sudo cp -r ./android-studio /usr/local/cd android-studio/cd bin./studio.sh Windows 安装过程 下载安装文件&#xff0c;解压 将解压得到 android-studio 文件夹…
阅读更多...
（详细）带你运行ShanghaiTech数据集预训练模型——人群计数算法

（详细）带你运行ShanghaiTech数据集预训练模型——人群计数算法

写在前面 ShanghaiTech数据集是现有的人群计数领域比较常用的训练测试数据集&#xff0c;该博客将详细讲述如何跑通ShanghaiTech官方提供的预训练版本。 由于全部跑完ShanghaiTech数据集需要一定的时间&#xff0c;今天只以其中的ped2数据集&#xff08;体量最小&#xff09;…
阅读更多...
Node path模块

Node path模块

文章目录Node path模块概述__dirname__filename使用Node path模块 概述 path 是Node.js的内置模块&#xff0c;提供了处理文件路径和目录路径的功能。 __dirname __dirname 是 Node.js 中的一个全局变量&#xff0c;它表示当前模块文件所在的目录的绝对路径。 使用 __dirn…
阅读更多...
标准JavaBean

标准JavaBean

标准JavaBean\huge{标准JavaBean}标准JavaBean 解释 其实标准JavaBeanJavaBeanJavaBean就是实体类&#xff0c;显示生活中存在的实体类&#xff0c;也可以理解为一种约束格式。它的对象可以在程序中封装数据。 书写格式 ①. 内部成员变量使用private进行修饰&#xff0c;提…
阅读更多...
【音视频第13天】另外一种拥塞控制算法-TransportCC

【音视频第13天】另外一种拥塞控制算法-TransportCC

目录与Goog-REMB区别TrendLine滤波器与Goog-REMB区别 与Goog-REMB有两个区别&#xff1a; 将拥塞评估算法从接收端移动到了发送端&#xff0c;评估和控制是一体的。TransportCC是发送端评估发送端接着改变码率&#xff0c;REMB是接收端评估&#xff0c;把评估出来的值给发送端…
阅读更多...
【学习笔记】[省选联考 2023] 填数游戏

【学习笔记】[省选联考 2023] 填数游戏

我不好说&#xff0c;因为考场上我想成二分图然后就gg了 这题不难&#xff0c;真的不难。 ∣Ti∣≤2|T_i|\le 2∣Ti​∣≤2这个性质一看就非常亲切啊&#xff0c;可以看成一条aia_iai​到bib_ibi​的连边&#xff0c;不妨将问题做一些泛化&#xff0c;将∣Ti∣1|T_i|1∣Ti​∣…
阅读更多...
最新文章

Copyright @ 2022~2023