导航栏

最新推荐文章于 2021-06-07 15:38:07 发布
最新推荐文章于 2021-06-07 15:38:07 发布
阅读量417 收藏 5
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangjian530/article/details/80300875
本文介绍三种仅使用HTML和CSS实现的导航栏样式，包括下拉菜单栏、两种折叠导航栏（竖向和横向），适用于前端学习者实践。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

想必大家在百度上见过许多导航栏的代码，下面我来为大家安利三种比较实用的导航栏（仅靠html/css来实现）：

1 下拉菜单栏：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单栏</title>
	<link rel="stylesheet" type="text/css" href="css/下拉菜单栏.css">
</head>
<body>
<nav>
	<ul class="ul1">
	
		<li>
			<a href="">首页</a>
			<ul class="ul2">
				<li><a href="">新闻</a></li>
				<li><a href="">科技</a></li>
				<li><a href="">财经</a></li>
				<li><a href="">读书</a></li>
			</ul>
		</li>


		<li>
			<a href="">首页</a>
			<ul class="ul2">
				<li><a href="">新闻</a></li>
				<li><a href="">科技</a></li>
				<li><a href="">财经</a></li>
				<li><a href="">读书</a></li>
			</ul>
		</li>


		<li>
			<a href="">首页</a>
			<ul class="ul2">
				<li><a href="">新闻</a></li>
				<li><a href="">科技</a></li>
				<li><a href="">财经</a></li>
				<li><a href="">读书</a></li>
			</ul>
		</li>


	</ul>
</nav>
</body>

</html>

@charset="UTF-8";
*{
	margin:0;
	padding:0;
}


.ul1{
	margin:50px;
}


ul{
	list-style-type: none;
}
a{
	text-decoration: none;
}


.ul1>li{
	width: 150px;
	height: 2em;
	text-align: center;
	background: rgba(30,80,200,0.8);
	border-radius: 0.5em 0.5em 0 0  ;
	font-size: 20px;
	line-height: 2em;
	float: left;
	margin-left: 1px;
}


.ul2{
	background: rgba(80,80,160,0.6);
	border-radius: 0 0  0.5em 0.5em;
	display: none;	
}


.ul2>li>a:hover{
	background: aqua; 
	width: 90%;
	height: 1.5em;
	line-height: 1.5em;
	display: inline-block;
	border-radius: 0.5em;
	font-weight: bold;
	padding: 3px 3px;


}


.ul1>li:hover{
	background:rgba(30,80,250,0.8); 
}


.ul1>li:hover>ul{
	display: block;
}

话不多说直接上图：


2 折叠导航栏（竖着）：


<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>折叠导航栏</title>
	<link rel="stylesheet" type="text/css" href="css/折叠导航栏.css">
</head>
<body>
	<div class="se">
		<h3><a href="">IT</a></h3>
		<div><img src="../img/IT.png" alt="">
		<li><a href=""><h3>人工智能</h3></a></li><br>
		<li><a href=""><h3>VR</h3></a></li><br>
		<li><a href=""><h3>大数据</h3></a></li><br>
		<li><a href=""><h3>云计算</h3></a></li><br>
		<li><a href=""><h3>无人机</h3></a></li><br>
		</div>
	</div>


	<div class="se">
		<h3><a href="">创投</a></h3>
		<div><img src="../img/创投.png" alt="">
		<li><a href=""><h3>股票</h3></a></li><br>
		<li><a href=""><h3>期货</h3></a></li><br>
		<li><a href=""><h3>彩票</h3></a></li><br>
		<li><a href=""><h3>投资</h3></a></li><br>
		<li><a href=""><h3>基金</h3></a></li><br>
		</div>
	</div>
	
	<div class="se">
		<h3><a href="">探索</a></h3>
		<div><img src="../img/探索.png" alt="">
		<li><a href=""><h3>比特币</h3></a></li><br>
		<li><a href=""><h3>纪念币</h3></a></li><br>
		<li><a href=""><h3>金币</h3></a></li><br>
		<li><a href=""><h3>邮票</h3></a></li><br>
		<li><a href=""><h3>古董</h3></a></li><br>
		</div>
	</div>
</body>

</html>
@charset="UTF-8";
*{
	margin:0;
	padding:0;
}


h3+div{
	height: 0;
	overflow: hidden;


	
	transition: all 1s ease;
}


a{
	text-decoration: none;
}


.se{
	width: 500px;
	margin-top:3px;
	margin-left: 20px;
	background: rgba(180,60,30,0.3);
}


h3{
	background: rgba(180,80,30,0.8);
	padding: 5px 25px;
	border-radius: 20px;
}


.se:hover h3+div{
	height: 380px;
	overflow: auto;
}

话不多说直接上图：


3 折叠导航栏（横着）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>折叠导航栏（横着）</title>
	<link rel="stylesheet" type="text/css" href="css/折叠导航栏（横着）.css">
</head>
<body>
	<div class="se">
		<h3><a href="">IT</a></h3>
		<div><img src="../img/IT.png" alt="">
		<li><a href=""><h3>人工智能</h3></a></li><br>
		<li><a href=""><h3>VR</h3></a></li><br>
		<li><a href=""><h3>大数据</h3></a></li><br>
		<li><a href=""><h3>云计算</h3></a></li><br>
		<li><a href=""><h3>无人机</h3></a></li><br>
		</div>
	</div>


	<div class="se">
		<h3><a href="">创投</a></h3>
		<div><img src="../img/创投.png" alt="">
		<li><a href=""><h3>股票</h3></a></li><br>
		<li><a href=""><h3>期货</h3></a></li><br>
		<li><a href=""><h3>彩票</h3></a></li><br>
		<li><a href=""><h3>投资</h3></a></li><br>
		<li><a href=""><h3>基金</h3></a></li><br>
		</div>
	</div>
	<div class="se">
		<h3><a href="">探索</a></h3>
		<div><img src="../img/探索.png" alt="">
		<li><a href=""><h3>比特币</h3></a></li><br>
		<li><a href=""><h3>纪念币</h3></a></li><br>
		<li><a href=""><h3>金币</h3></a></li><br>
		<li><a href=""><h3>邮票</h3></a></li><br>
		<li><a href=""><h3>古董</h3></a></li><br>
		</div>
	</div>
</body>

</html>
@charset="UTF-8";


*{
	margin:0;
	padding:0;
}


h3+div{
	height: 0;
	overflow: hidden;
    transition: all 1s ease;
}


a{
	text-decoration: none;
}


li{
	list-style: none;
}
.se{
	width: 200px;
	float: left;
	background: rgba(180,60,30,0.3);
	margin-top:3px;
	margin-left: 20px;
}


h3{
	background: rgba(180,80,30,0.8);
	padding: 5px 25px;
	border-radius: 20px;
}


.se:hover h3+div {
	height: 350px;
	overflow: auto;

}


话不多说直接上图：


以上三种也就是我自己初学前端的时候，手写的三种导航栏，应付老师布置的作业感觉还可以，高层次的导航栏还得深度学习哦。

li：hover的小知识
qq_35620313的博客
12-07 1943
*{margin:0;padding:0;} .user_banner_logo_wrap{ width:1920px;height:149px; overflow:hidden; background:url(http://img11.360buyimg.com/cms/jfs/t3415/2/2035385460/17797/2fdc18ba/583fdfc8N282cdb79.jpg)no
横条导航窗体html代码,各式各样的导航条效果css3结合jquery代码实现
weixin_29098391的博客
06-09 3202
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条(文字下面有横线)等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
html下拉菜单原理,网页导航下拉菜单原理
weixin_29595517的博客
05-31 874
小云童鞋在这和大家先讲下菜单实现原理先，技术大牛呢你应该比我更明白的了，此文送给刚入门的童鞋的，希望对他们有点点帮助。进入正题：网页菜单经常可以看到，鼠标移动到注菜单上面，会弹出对应的子菜单。先来个效果先：重重的点击我菜单都是运用“显示和隐藏”，但是当中有一些细节必须要注意。那要注意什么呢？css的定位，这就对了，相对和绝对定位。相对定位是处于标准流的，也就是说占有空间啦，绝对定位是不处于标准流的...
CSS列表属性简写方式
Xkobe的博客
07-05 594
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;列表属性&lt;/title&gt; &lt;style&gt; .ul1{ list-style:circle inside url(AA/demo.png
给li设定hover效果
luoxia0805的专栏
05-23 2万+
想做导航时鼠标滑过导航的栏目时，导航栏目的背景发生
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
10-16
本文将深入探讨如何在uni-app中自定义导航栏按钮，以及如何实现仿微信顶部导航条的功能。 首先，要在uni-app中自定义导航栏按钮，我们需要对页面的配置文件page.json进行编辑。在这个文件中，我们可以通过配置app-...
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
在微信小程序开发中，有时我们需要对默认的头部导航栏进行自定义，以满足特定的设计需求。本篇文章将详细介绍如何实现微信小程序自定义头部导航栏和导航栏背景图片，以及处理与`navigationStyle`相关的技术问题。 ...
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
html引用公共的头部和尾部（多个html文件共用一个header.html和footer.html）、导航跳转页面改变导航样式...
weixin_30750335的博客
09-18 2306
将header部分和footer部分提取出来，各保存为header.html和footer.html。 header.html（P.S.1：此次有导航跳转页面改变导航样式） <nav class="hidden-sm hidden-xs"> <div class="topHeader"> <div class="conta...
导航栏样式HTML,[JavaScript 实例] 导航栏几种常见样式
weixin_42220669的博客
06-07 2157
这里记录下导航栏几种常见的样式，仅供大家参考。导航栏1 (原生 JS 代码)比较常见也比较简单的导航栏 ，用的 JavaScript 原生代码，大致思路是通过改变 li 元素的 className 实现鼠标移动切换 tab 时改变其背景色及文字颜色，同时切换显示 tab 对应内容。nav-1.gif导航栏1-JS原生版* {margin: 0;padding: 0;}body {font: 12p...
导航条样式代码
zhong_fucheng
06-29 861
参考博文:这里写链接内容<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
Html页面对于导航及底部栏等公共部分的引用
ZaynahLy的博客
08-08 3万+
对于大多数网站来说，导航栏和底部的信息栏在多个页面中都是通用的。如果将这些代码放在每一个页面的html中，会显得代码冗余，而且修改起来也极为不方便。 所以如果将这些代码放在单独的页面中，在其他页面直接引入的话，不仅代码量减少，而且在公共部分需要修改时，也只需要修改一处就可以了。引入页面公共部分的步骤： 1. 首先要将公共部分单独放在一个html页面中。这个页面必须是一个完整的页面，包含head,
如何让html引用公共的头部和尾部（多个html文件公用一个header.html和footer.html）
热门推荐
草巾冒小子的博客
04-03 8万+
如何实现多个.html静态页，引用同一个header.html和footer.html文件？ 前端静态html页面，封装公共的头文件（header：顶部页眉，顶部导航栏等部分）和尾部文件（footer：CopyRight、友情链接等部分） HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件？ 因保密等诸多因素，线上项目运行效果，暂不推荐大家...
Javaweb实现用户登录并且在数据库中查找匹配的账号密码
金州饿霸吃不饱的博客
04-10 3万+
1.业务需求： 2 后端代码： 三层架构： （1）Dao层： package cn.dao; import java.util.List; import cn.domain.User; public interface UserDao { List<User> find(); boolean login(String username, String passw...
漩涡粒子
金州饿霸吃不饱的博客
05-19 5634
相必各位同学们看过许多酷炫的用JS实现的3D漩涡吧，下面我为大家安利一下源码：+&lt;!doctype html&gt; +&lt;html&gt; +&lt;head&gt; +&lt;meta charset="utf-8"&gt; +&lt;title&gt;漩涡粒子&lt;/title&gt; + +&lt;style&gt; +html,body{
仿站小工具使用
金州饿霸吃不饱的博客
05-23 2912
仿站小工具使用有时候我们把整个网页代码复制到自己创建的html文件中，但在打开时却和原网页有出入，这是由于少了一些样式。用仿站小工具下载的话就能避免这种问题，它会把网页样式图片等下载下来。直接在网上搜索仿站小工具，然后下载，具体使用如下。1.输入要下载的网址，点击添加2.添加后，点击转到下一步3.选择保存地址，然后开始下载4.在保存路径下可找到该文件夹现在再打开html文件，就会与原网页相同了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

金州饿霸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值