顶部导航菜单组件的一种做法

最新推荐文章于 2024-05-14 09:55:02 发布
最新推荐文章于 2024-05-14 09:55:02 发布
阅读量181 收藏
点赞数
分类专栏： 模板分享 文章标签： css 导航 html模板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqhxmdq/article/details/131501014
版权

今天来分享一款顶部导航的菜单做法，可以参考一下。

它的效果是这个样子的。虽然不算太好看，但是也能实现具体功能 ，剩了不少时间。

废话不多说，直接上代码。

以下是html代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery定位滚动导航效果代码 - 16素材网</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/inside.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>

<div id="subNav">
  <ul class="wrap">
    <li class="adv_active"><a href="#hall_show" class="adv_door adv_active"><ins></ins>二手车旗舰店<span></span></a></li>
    <li><a href="#checkCar" class="adv_source"><ins></ins>车源保证<span></span></a></li>
    <li><a href="#alpha_price" class="adv_price"><ins></ins>价格透明<span></span></a></li>
    <li><a href="#service_show" class="adv_transfer"><ins></ins>过户便捷<span></span></a></li>
    <li><a href="#pay_show" class="adv_payment"><ins></ins>分期付款<span></span></a></li>
    <li><a href="#quality_promise" class="adv_promise"><ins></ins>售后质保<span></span></a></li>
  </ul>
</div>

<script>
$(function(){
//优势页面点击子导航
	var subNav_active = $(".adv_active");
	var subNav_scroll = function(target){
		subNav_active.removeClass	("adv_active");
		target.parent().addClass("adv_active");
		subNav_active = target.parent();
	};
	$("#subNav a").click(function(){
		subNav_scroll($(this));
		var target = $(this).attr("href");
		var targetScroll = $(target).offset().top - 80;
		$("html,body").animate({scrollTop:targetScroll},300);
		return false;
	});
	//页面跳转时定位
	if(window.location.hash){
		var targetScroll = $(window.location.hash).offset().top - 80;
		$("html,body").animate({scrollTop:targetScroll},300);
	}
	$(window).scroll(function(){
		var $this = $(this);
		var targetTop = $(this).scrollTop();
		var footerTop = $("#footer").offset().top;
		var height = $(window).height();
		
		if (targetTop >= 520){
			$("#subNav").addClass("fixedSubNav");
			$(".empty-placeholder").removeClass("hidden");
		}else{
			$("#subNav").removeClass("fixedSubNav");
			$(".empty-placeholder").addClass("hidden");
		}
		if(targetTop < 750){
			subNav_scroll($(".adv_door"));
		}else if(targetTop > 1200 && targetTop < 1640){
				subNav_scroll($(".adv_source"));
		}else if(targetTop > 2314 && targetTop < 2734){
				subNav_scroll($(".adv_price"));
		}else if(targetTop > 2968 && targetTop < 3268){
				subNav_scroll($(".adv_transfer"));
		}else if(targetTop > 3327 && targetTop < 3627){
				subNav_scroll($(".adv_payment"));
		}else if(targetTop > 3651 && targetTop < 4071){
				subNav_scroll($(".adv_promise"));
		}else if(targetTop > 4163 && targetTop < 4473){
				subNav_scroll($(".adv_ride"));
		}else if(targetTop > 4580){
			subNav_scroll($(".adv_finance"));
		}
	})
}());
</script>
</body>
</html>

需要引用的外部js为jquery.js

另外有两个css文件如下：

common.css

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote {
	margin: 0;
	padding: 0
}
fieldset, img {
	border: 0
}
dl {
	border: none;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}
:focus {
	outline: 0
}
address, caption, cite, code, dfn, em, strong, th, var, optgroup {
	font-style: normal;
	font-weight: normal
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal
}
abbr, acronym {
	border: 0;
	font-variant: normal
}
input, button, textarea, select, optgroup, option {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit
}
code, kbd, samp, tt {
	font-size: 100%
}
input, button, textarea, select {
*font-size:100%
}
ol, ul {
	list-style: none
}
table {
	border-collapse: collapse;
	border-spacing: 0
}
caption, th {
	text-align: left
}
sup, sub {
	font-size: 100%;
	vertical-align: baseline
}
:link, :visited, ins {
	text-decoration: none
}
blockquote, q {
	quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}
.clearfix {
	display: inline-block
}
* html .clearfix {
	height: 1%
}
.clearfix {
	display: block
}
body {
	font-size: 12px;
	font-family: Tahoma, Verdana;
	color: #000;
	background-color: #fff
}
a {
	color: #000
}
a:hover {
	text-decoration: none;
	color: #e70
}
.wrap {
	width: 1000px;
	margin: 0 auto;
	zoom: 1;
}
.marginRight0 {
	margin-right: 0
}
.wrapGrayBg {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000;
	z-index: 10000
}
.must_write {
	color: #f00;
	padding-right: 5px
}
.hidden {
	display: none !important
}
optgroup {
	color: #008000;
	background-color: #f5f5f5;
	font-weight: bold
}
option {
	color: #333;
	line-height: 1.8em;
	font-style: normal;
	font-weight: normal;
	background-color: #fff
}
#header {
	background-color: #e7e7e7
}

#footer {
	margin-top: 30px;
	height: auto
}
#footer .wrapper {
	width: 1190px;
	margin: 0 auto;
	overflow: hidden
}
#footer .friendlinks {
	text-align: center;
	margin-top: 20px
}
#footer .friendlinks a {
	font-size: 12px;
	color: #999;
	padding: 0 10px;
	border-right: 1px solid #e6e6e6
}
#footer .friendlinks a.last {
	border: none
}
#footer .footer-content {
	background: #f5f5f5;
	border-top: 1px solid #e6e6e6
}
#footer .performance {
	padding: 40px 0;
	border-bottom: 1px solid #e6e6e6;
	width: 1400px
}
#footer .performance i {
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 8px;
	left: 20px
}
#footer .performance .per {
	float: left;
	width: 465px
}
#footer .performance .per a {
	display: block
}
#footer .performance .per-1 a {
	background: url(../images/per-1.png) no-repeat;
	background-position: left
}
#footer .performance .per-2 a {
	background: url(../images/per-2.png) no-repeat;
	background-position: left
}
#footer .performance .per-3 a {
	background: url(../images/per-3.png) no-repeat;
	background-position: left
}
#footer .performance .t {
	font-size: 16px;
	line-height: 30px;
	color: #666;
	margin-left: 50px
}
#footer .performance .st {
	font-size: 14px;
	color: #999;
	line-height: 20px;
	margin-left: 50px
}
#footer .company_info {
	padding: 20px 0px
}
#footer .company_info .wrap {
	text-align: center
}
#footer .company_info .wrap a {
	color: #666;
	padding: 0 10px
}

第二个css:

inside.css

body{background-color:#f2f2f2}
.empty-placeholder{height:120px}
#brand_affect,#hall_show,#alpha_price,#checkCar,#rideCar,#quality_promise,#stockFinance,#ourInfo,#sellFlow{background-color:#fff;margin-bottom:20px;border:1px solid #d9d9d9}

#subNav{width:100%;height:80px;background-color:#000;margin-bottom:40px}
#subNav li{float:left;position:relative}
#subNav .wrap{width:1002px;}
#subNav a{display:block;width:167px;height:67px;text-align:center;color:#9c9a9a;padding-top:13px}
#subNav a:hover{text-decoration:none}
#subNav a ins{display:block;width:52px;height:40px;margin:0 auto;background:url(../images/souche_sprite2.jpg) no-repeat 10px -334px}
#subNav a span{position:absolute;width:20px;height:20px}
#subNav a:hover,#subNav .adv_active a{background-color:#e70;color:#fff}
#subNav a:hover ins,#subNav .adv_active ins{background:url(../images/souche_service1.png) no-repeat 10px -190px}
#subNav a:hover span,#subNav .adv_active span{background:url(../images/souche_png.png) no-repeat 0 -90px;left:76px;bottom:-10px;_background:none}
#subNav .adv_source ins{background-position:-49px -334px}
#subNav .adv_price ins{background-position:-101px -334px}
#subNav .adv_transfer ins{background-position:-155px -334px}
#subNav .adv_payment ins{background-position:-202px -334px}
#subNav .adv_promise ins{background-position:-251px -334px}
#subNav .adv_ride ins{background-position:-301px -334px}
#subNav .adv_finance ins{background-position:-349px -334px}
#subNav .adv_source:hover ins,#subNav .adv_active .adv_source ins{background-position:-49px -191px}
#subNav .adv_price:hover ins,#subNav .adv_active .adv_price ins{background-position:-101px -191px}
#subNav .adv_transfer:hover ins,#subNav .adv_active .adv_transfer ins{background-position:-155px -191px}
#subNav .adv_payment:hover ins,#subNav .adv_active .adv_payment ins{background-position:-202px -191px}
#subNav .adv_promise:hover ins,#subNav .adv_active .adv_promise ins{background-position:-251px -191px}
#subNav .adv_ride:hover ins,#subNav .adv_active .adv_ride ins{background-position:-301px -191px}
#subNav .adv_finance:hover ins,#subNav .adv_active .adv_finance ins{background-position:-349px -191px}
.fixedSubNav{position:fixed;top:0;left:0;z-index:1000}
.show_title{color:#fff;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana}
.show_title h1{font-size:36px;padding-top:40px;margin-bottom:10px}
.show_title h1 span{float:left;width:56px;height:47px;background:url(../images/souche_png.png) no-repeat -53px 3px;_background:none;_width:0}
.show_title p{font-size:16px}
#quality_promise{padding-bottom:45px}
#brand_affect{padding-bottom:50px}
#quality_promise .show_title,#brand_affect .show_title{height:160px;width:100%;background-color:#93715d}
#quality_promise h1 span{background-position:0 3px;margin-left:254px;_margin-left:290px}
#brand_affect h1 span{background-position:0 1px;margin-left:384px}
#quality_promise .show_title p,#brand_affect .show_title p{text-align:center}
.brand_show{padding-top:45px;padding-left:20px;padding-bottom:32px}
.brand_show li{float:left}
.media{width:950px;margin:0 auto;border-top:1px dotted #b2b2b2;padding-top:43px}
.media_visit{float:left;padding-right:40px}
.media_title{color:#333;font-size:18px;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;margin-bottom:15px}
.media_video{width:257px;height:183px;background-color:#000;margin-bottom:19px}
.media_news{color:#333;line-height:2.2em;width:257px;height:77px;overflow:hidden}
.media_news ins{color:#666}
.media_photos{float:left;padding-right:40px}
.media_ditie{float:left}
.promise_content{float:left;display:inline;width:425px;margin-left:50px;margin-top:40px}
.promise_content ins{width:76px;height:76px;background:url(../images/souche_sprite2.jpg?124) no-repeat 1px -377px;display:block;margin:0 auto;margin-bottom:22px}
.promise_content dl{border:1px dotted #b2b2b2;height:133px;color:#333}
.promise_content dt{width:130px;margin:0 auto;text-align:center;font-size:18px;margin-bottom:24px;margin-top:-13px;_margin-top:5px;_margin-bottom:14px;background-color:#fff;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana}
.promise_content dd{font-size:14px;width:380px;margin:0 auto;line-height:1.6em;*margin-top:-44px}
.promise_content_180 ins{background-position:-84px -377px}
#hall_show{padding-bottom:5px}
#hall_show .show_title{height:220px;background:url(../images/souche_bg.png) 345px 29px no-repeat #886c90}
#hall_show .show_title h1{margin-left:48px;padding-top:140px}
#hall_show p{color:#444;font-size:18px;padding-top:35px;line-height:1.8em;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;width:966px;margin:0 auto;margin-bottom:35px}
#hall_show p ins{color:#ff4301;font-size:24px}
.hallImg_show{padding-left:5px}
.hallImg_show li{float:left;margin:5px;position:relative}
.hallImg_show ins{position:absolute;left:0;bottom:0;width:100%;zoom:1;line-height:1.5em;padding:15px 0;background-color:rgba(0,0,0,0.5);font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;color:#fff;text-align:center;font-size:16px}
#alpha_price{padding-bottom:30px}
#alpha_price .show_title{height:270px;background:url(../images/souche_bg.png) 50px -243px no-repeat #4398ca}
#alpha_price .show_title h1{margin-left:639px;padding-top:60px}
#alpha_price .show_title p{margin-left:639px;line-height:1.8em}
#alpha_price .price_decorate{text-align:center;color:#333;font-size:16px;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;line-height:74px}
#alpha_price img{margin:0 auto;display:block}
#checkCar .show_title{height:222px;background-color:#a98c7b}
#rideCar .show_title{height:190px;background-color:#72954f}
#checkCar .show_title h1,#rideCar .show_title h1{margin-left:50px;padding-top:40px}
#checkCar .show_title p,#rideCar .show_title p{margin-left:50px;line-height:1.8em}
.rideCar_show{padding-left:35px}
.rideCar_show img{margin-bottom:10px}
.rideCar_show li{float:left;display:inline;width:207px;margin:40px 0 0 80px;padding-bottom:35px;color:#333;font-size:16px;text-align:center;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana}
.checkCar_show{margin-top:10px}
.checkCar_show img{float:left;margin-left:10px}
.check_decorate{color:#333;font-size:18px;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;margin:30px 0}
.check_decorate ins{color:#ff4301;font-size:24px;padding-right:10px;padding-left:10px}
.check_img{display:block;margin:0 auto;margin-bottom:45px}
#service_show{height:340px;background:url(../images/service_show.jpg) no-repeat #a49742;margin-bottom:20px}
#service_show .show_title h1{margin-left:496px;padding-top:66px}
#service_show .show_title p{margin-left:500px;line-height:1.8em}
.service_tag{margin-left:429px}
.service_tag ins{float:left;display:inline;color:#fff;font-size:14px;font-weight:bold;text-align:center;margin-left:30px;margin-top:49px;width:100px}
.service_tag ins span{float:left;width:50px;height:40px;margin-bottom:10px;margin-left:30px;margin-right:30px;background:url(../images/souche_png.png) no-repeat 5px -52px}
#pay_show{height:324px;background:url(../images/payment.jpg) right top no-repeat #4398ca;margin-bottom:20px}
#pay_show .show_title h1{margin-left:56px;padding-top:61px;margin-bottom:30px}
#pay_show .show_title p{margin-left:56px;line-height:1.8em}
#stockFinance .show_title{height:123px;width:100%;background-color:#4398ca}
#stockFinance h1 span{background-position:0 -181px;margin-left:254px}
.finance_content{padding-top:170px;background:url(../images/finance.jpg) no-repeat center 38px;margin-left:34px;margin-bottom:50px}
.finance_content p{width:370px;height:140px;padding:20px 30px;float:left;color:#333;font-size:14px;line-height:1.7em;border:1px dotted #b2b2b2}
.finance_content span{display:block;width:37px;height:37px;float:left;background:url(../images/souche_sprite2.jpg?124) no-repeat -122px -277px;margin:72px 15px 0}
#ourInfo ul{float:left;width:450px;padding-top:50px;padding-bottom:30px}
#ourInfo li{color:#333;font-size:14px;font-weight:bold;clear:both;height:77px;line-height:1.7em}
#ourInfo span{display:block;width:50px;height:50px;float:left;background:url(../images/souche_sprite2.jpg?124) no-repeat -166px -276px;margin-left:48px;margin-right:10px}
.ourInfo_weibo ins{float:right;margin-right:164px;_margin-right:114px;margin-top:-2px;*margin-top:-25px;width:65px;height:25px}
#ourInfo a{color:#666;font-weight:normal}
#ourInfo a:hover{color:#e70}
.ourInfo_phone{text-indent:-9999em;background:url(../images/souche_sprite2.jpg?124) no-repeat 103px -457px;_background:none}
#ourInfo .ourInfo_weibo span{background-position:-225px -276px}
#ourInfo .ourInfo_taobao span{background-position:-286px -276px}
#ourInfo .ourInfo_cooper span{background-position:-349px -276px}
.weixin{width:245px;padding-top:56px;text-align:center;float:right;display:inline;color:#333;margin-right:63px}
.weixin h1{font-size:18px;font-family:"\5FAE\8F6F\96C5\9ED1",Tahoma,Verdana;margin-bottom:33px}
.weixin img{margin:20px 0}
.weixin p{line-height:1.7em}
.souche_weibo{color:#333;text-align:left;padding-left:52px}
.souche_weibo:hover{text-decoration:none}
#advance_banner{width:100%;height:370px;background:url(../images/advantage2.jpg) no-repeat top center #e6ebef;text-indent:-9999em}
#footer{position:relative;zoom:1;}

下载地址如下：（不过其实也用不着，几乎所有代码都在上面了，没有的也就几个图标，有需要的下）

https://download.csdn.net/download/qqhxmdq/87983705

锁住子锁不住
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
顶部导航栏
weixin_45743799的博客
11-24 865
HTML和CSS实现顶部导航栏，二级菜单的实现。 原理分析： 1.使用ul(无需列表)嵌套ul(无序列表) 2.鼠标放上改变背景颜色 3.二级菜单的显示 效果演示： 初始样式 鼠标放上 代码演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>&lt...
jquery顶部固定二级导航菜单
快乐de馒头
11-05 6201
body{ font-family: "宋体"; font-size: 14px; color: #666666; background:#f2f2f2 url(images/bg.gif) repeat-x left top; height: 2000px; } ul,li,html,body{margin: 0px; padding: 0px;} ul{list-style-typ
HTML+CSS 简单的顶部导航栏菜单制作
weixin_51749554的博客
04-26 7267
导航栏的制作： 技术要求： CSS HTML各类标签 实现目的： 导航栏菜单 代码分析： 基本样式清除 无序列原点删除 下划线删除 文字默认居中 a标签设置块级元素 伪类选择器对a状态修饰 分步实现： 分三栏布局：使用浮动 logo一栏；选择框一栏；搜索框一栏 logo部分： ...
五、Bootstrap之菜单栏和导航栏
最新发布
Itcodewizard的博客
05-14 1331
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
jQuery[响应式] 自适应网页顶部导航菜单
前端博客
10-07 2606
jQuery[响应式] 自适应网页顶部导航菜单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"...
前端小作业～新东方顶部导航菜单
qq_53142796的博客
04-23 1411
kotlin顶部导航栏（TabLayout+viewpager）.zip
06-13
在Android应用开发中，创建一个具有顶部导航栏的界面是一种常见的设计模式，它能帮助用户在多个视图间轻松切换。本项目以“Kotlin顶部导航栏（TabLayout+ViewPager）”为主题，提供了实现这一功能的示例代码，旨在...
微信小程序-顶部导航栏TopBar.zip
10-08
6. **API调用**：除了组件本身，可能还涉及到微信小程序的一些API，如`wx.setNavigationBarTitle`来动态改变顶部导航栏的标题，或者`wx.createSelectorQuery`进行DOM查询，以获取组件的位置信息等。 7. **生命周期...
Android使用开源组件PagerBottomTabStrip实现底部菜单和顶部导航功能
08-27
Android 使用开源组件 PagerBottomTabStrip 实现底部菜单和顶部导航功能 一、前言 Android 开发中，底部菜单和顶部导航功能是非常常见的，实现方式也有很多种。今天我们将介绍使用开源组件 PagerBottomTabStrip ...
iOS实现顶部标签式导航栏及下拉分类菜单
09-02
在iOS应用开发中，设计和实现用户界面是关键部分，特别是对于内容丰富的应用，顶部标签式导航栏和下拉分类菜单能提供清晰的导航结构。本文将深入探讨如何在iOS中实现这两种功能。 首先，顶部标签式导航栏是用于展示...
jQuery基于Bootstrap顶部浮动导航菜单代码
06-05
本示例中的“jQuery基于Bootstrap顶部浮动导航菜单代码”是一个高效且实用的设计方案，它结合了jQuery的动态效果和Bootstrap的简洁布局，为用户提供了一种交互性强且易于使用的导航体验。 首先，我们来看Bootstrap...
HTML-新东方出国留学教育专题网页模板
06-08
新东方出国留学教育专题网页模板，单页多栏目设计，包括英国中学特色、英国中学分布、英国学制介绍、英国中学优势、录取榜、英国名校介绍、顾问展示、推荐活动、返回顶部等栏目
淘宝网顶部导航菜单制作
12-31
模仿淘宝网顶部导航，非常经典的一款效果
导航菜单笔记一
wtxy24的博客
09-02 329
GitHub源码地址： https://github.com/wxygoing/firstTimeTest/blob/master/NavigationMenu 1、用无序列表创建菜单 2、*{padding:0px;margin: 0px;} 和 body{padding:0px;margin: 0px;}  *{padding:0px;margin: 0px;}： * 相当于选择器，代表...
掌上生词本 开发 (一): 顶部导航栏实现
Lemon_TheFirst的博客
05-05 568
使用Toolbar实现顶部导航栏.
作业一学期三书八章
sc13647346287的博客
11-07 742
3.制作美食今日推荐页面。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index.html&lt;/title&gt; &lt;link rel="stylesheet&quo
react路由篇:利用路由实现顶部导航效果
YanHSama的博客
10-09 1337
前提说明 react使用typescript来编写代码; 路由使用’@types/react-router-dom’; 利用路由实现-顶部导航,点击顶部导航,出现不同的内容; 要实现的效果 首页有四个菜单(首页,二页,Ⅲ页,肆页),点击不用的菜单显示不同的页面内容,但是顶部导航始终存在页面顶部;首页中有个跳转登录页的链接,点击直接跳转至登录页面,页面中不在显示顶部菜单 效果图 首页效果 点击首页效果 点击二页效果 点击三页效果 点击肆页效果 首页点击跳转登录页效果 当跳转的页面不存在时效果 具
Vue实战第3章：主页设计之顶部导航栏
孙君的空间站
02-01 9529
Vue实战第3章：主页设计之顶部导航栏
vue好看的顶部导航栏
08-30
1. 使用第三方组件库：一些流行的 Vue 组件库，如Element UI、Vuetify和Ant Design Vue等都提供了各种样式优美的导航栏组件。你可以根据自己的喜好选择一个合适的组件库，并按照文档中的指引进行安装和使用。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

锁住子锁不住

老少爷们向前冲！！！

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

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

打赏作者

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

抵扣说明：

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

余额充值