css 导航栏效果

一、前言

在网站上面我们经常能看到一些导航栏，当我们点击对应的导航栏菜单时就会跳转到相应的网页，那么导航栏是如何实现的呢，实现它并不难，主要需要使用到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

 .nav{
    width: 1000px;
    height: 50px;
    margin-top: 120px;
    background-color:darkgray;
}复制

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

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

3.第三步：

 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.第四步：设置超链接的样式

 /*
设置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完整代码：

 .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

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

 .nav-child{
    list-style: none;
    background-color:chocolate;
    
}复制

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

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

css代码：

 .nav-child>li{
    position: relative;
}复制

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

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

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

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完整代码：

 .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本篇文章就到这里，希望对各位小伙伴们有帮助。
在这里插入图片描述

css 导航栏效果

目录

一、前言

二、导航栏实现

三、多级导航实现

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

H5 CSS3-移动端兼容/调试/视口/flex布局

如何让CSS只在当前组件中起作用

CSS--解决图片变形的方法

CSS Grid 布局在 IE 中不兼容的原因与解决方案

快速入门CSS

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!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>

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

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

css 导航栏效果

目录

一、前言

二、导航栏实现

三、多级导航实现

微信扫一扫：分享