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

news2024/9/26 3:30:47

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

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

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

以下是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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/709794.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Spring】Bean的作用域与生命周期详情：请简述Spring的执行流程并分析Bean的生命周期？

【Spring】Bean的作用域与生命周期详情：请简述Spring的执行流程并分析Bean的生命周期？

前言 我们都知道&#xff0c;Spring框架为开发人员提供了很多便捷&#xff0c;这使得开发人员能够更加专注于应用程序的核心业务逻辑&#xff0c;而不需要花费大量时间和精力在技术细节上。作为一个包含众多工具方法的IoC容器&#xff0c;存取JavaBean是其极为重要的一个环节。…
阅读更多...
vue + leaflet实现图标指定方向随机旋转

vue + leaflet实现图标指定方向随机旋转

效果 github地址 官方示例Demo 安装leaflet-rotatedmarker npm install leaflet-rotatedmarker -S引入leaflet.rotatedmarker import leaflet-rotatedmarker实现 this.laryerGroup this.$L.layerGroup() data.forEach(item > {this.layerGroup.addLayer(this.getMarke…
阅读更多...
【tomcat知识点和部署】

【tomcat知识点和部署】

文章目录 一、tomcat概述1.1 tomcat的介绍1.2 tomcat的特点 二、tomcat核心组件2.核心组件的介绍2.1 Web容器2.2 servlet容器2.3 JSP容器2.4 Tomcat核心组件的请求方式&#xff08;交互方式&#xff09;2.4.1 Web容器2.4.2 JSP容器2.4.3 serverlet容器2.5 Tomcat处理请求&#…
阅读更多...
第六章 linux调试器——gdb的使用

第六章 linux调试器——gdb的使用

第六章 linux调试器——gdb的使用 一、前提1、debug与release2、gdb的安装 二、常用调试指令1、开始调试2、代码显示3、断点设置4、代码执行5、信息监控6、退出调试 一、前提 1、debug与release 程序最终的发布方式分成两种&#xff0c;一种是debug模式&#xff0c;一种是rel…
阅读更多...
华为OD机试真题 Python 实现【机器人活动区域】【2023Q1 200分】

华为OD机试真题 Python 实现【机器人活动区域】【2023Q1 200分】

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、Python算法源码六、效果展示1、输入2、输出 一、题目描述 现有一个机器人&#xff0c;可放置于 M N的网格中任意位置&#xff0c;每个网格包含一个非负整数编号。当相邻网格的数字编号差值的绝对值小于等于 1 时&a…
阅读更多...
redis-单节点安装

redis-单节点安装

daemonize yes port 6379 bind 0.0.0.0 requirepass 123456 save 3600 1 300 100 60 10000dir /usr/local/redis dbfilename dump.rdb logfile redis.log pidfile redis.pid##save 3600 1 300 100 60 10000 ##3600秒(一小时),至少有一个值的话,会进行存盘 ##300秒(五分钟),至少…
阅读更多...
探索性测试: 工具和方法的综合应用

探索性测试: 工具和方法的综合应用

1、前言 2、工具的使用 1、测试管理工具 2、缺陷跟踪工具 3、测试自动化工具 4、探索性测试工具 5、代码覆盖率工具 6、日志分析工具 7、网络抓包工具 8、数据库查询工具 9、并发和负载测试工具 10、安全测试工具 11、API测试工具 12、数据生成工具 13、异常处理和边界测试工具…
阅读更多...
server2012远程桌面RDP120过期后修改

server2012远程桌面RDP120过期后修改

运行regedit 进入 HKEY_LOCAL_MACHINE \ SYSTEM \ CurrentControlSet \ Control \ Terminal Server \ RCM \ GracePeriod &#xff0c;选中 GracePeriod 重启电脑Ok
阅读更多...
572. 另一棵树的子树

572. 另一棵树的子树

另一棵树的子树 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def isSubtree(self, root: Optional[Tre…
阅读更多...
ROS 编码器转Odom

ROS 编码器转Odom

双轮差速模型 移动距离 delta_dist (encoder_right encoder_left)/linesNum * circumference / 2; 旋转角度 Delta_th (float)(encoder_right - encoder_left) / wheel_track; 将移动距离转换到车体坐标系 delta_x cos(delta_th) * delta_dist; delta_y -sin(delta_th) * …
阅读更多...
前端页面优化策略

前端页面优化策略

目录 1 为什么要优化2 优化方案3 加载策略优化3.1 script执行时机3.2 预加载资源prefetch 和 preloaddns-prefetch 和 preconnect 4 骨架屏4 资源请求优化4.1 图片懒加载及异步解码方案 1 为什么要优化 从用户角度看&#xff0c;优化能够让页面加载得更快、对用户操作响应更及…
阅读更多...
领域事件驱动DDD（一） 值对象以及实体

领域事件驱动DDD（一） 值对象以及实体

对领域事件驱动的一些知识的梳理&#xff08;以下内容是从内到外进行梳理&#xff09; 值对象&#xff1a;一个没有标识符的对象。 值对象通常不会被修改&#xff0c;而是通过创建新的值对象来表示不同的状态。 没有自己的生命周期&#xff0c;它们随着所属的实体或聚合根的…
阅读更多...
自动化测试-Selenium

自动化测试-Selenium

目录 什么是自动化测试 Selenium介绍 Selenium是什么 Selenium特点 Selenium工作原理 SeleniumJava环境搭建 1.下载chrome浏览器,查看版本号. 2.下载chrome浏览器驱动 3.配置环境变量 4.创建java项目,在pom文件中添加依赖 5. 验证环境是否搭建成功 Selenium常用API…
阅读更多...
libevent实践08：实现定时器第二季

libevent实践08：实现定时器第二季

简介 获取libevent的版本号字符串 /**Get the Libevent version.Note that this will give you the version of the library that yourecurrently linked against, not the version of the headers that youvecompiled against.return a string containing the version numbe…
阅读更多...
利用RabbitMQ实现消息投递削峰填谷

利用RabbitMQ实现消息投递削峰填谷

目录 异步和同步如何选择 异步线程 同步收发消息 一、导入依赖库 二、创建RabbitMQ配置类 三、创建消息任务类 异步和同步如何选择 依靠多线程&#xff0c;Java代码可以同步执行也可以异步执行 RabbitMQ提供了同步和异步两种收发消息模式 我们采用 Java异步线程 MQ同步…
阅读更多...
MongoRepository

MongoRepository

一、介绍 MongoRepository是一个接口，与HibernateRepository类似，通过继承MongoRepository接口，我们可以非常方便地实现对一个MongoDB集合中的文档数据进行增删改查，示例如下所示： import org.bson.types.ObjectId; import org.springframework.data.mongodb.repository…
阅读更多...
[数据结构 -- 手撕排序第一篇] 插入排序

[数据结构 -- 手撕排序第一篇] 插入排序

目录 1、常见的排序算法 2、插入排序的思路 2.1 基本思想 2.2 直接插入排序 2.2.1 单趟排序的思路 2.2.2 单趟排序代码实现 3、插入排序代码 4、插入排序打印测试 5、插入排序的时间复杂度 5.1 最坏情况 5.2 最好情况 6、直接插入排序的特性总结 1、常见的排序算法 2、插入排序…
阅读更多...
SpringMVC （二） 第一个MVC程序

SpringMVC （二） 第一个MVC程序

学习回顾&#xff1a;SpringMVC &#xff08;一&#xff09; 什么是SpringMVC Hello&#xff0c;SpringMVC 现在我们来看看如何快速使用SpringMVC编写我们的程序吧&#xff01; 一、配置版 1、新建一个Moudle &#xff0c; springmvc-02-hello &#xff0c; 添加web的支持&…
阅读更多...
Spring面试题--AOP

Spring面试题--AOP

什么是AOP&#xff0c;你们项目中有没有使用到AOP&#xff1f; AOP称为面向切面编程&#xff0c;用于将那些与业务无关&#xff0c;但却对多个对象产生影响的公共行为和逻辑&#xff0c;抽取并封装为一个可重用的模块&#xff0c;这个模块被命名为“切面”&#xff08;Aspect&a…
阅读更多...
2024中山大学898水文地质与工程地质考研初试复习资料

2024中山大学898水文地质与工程地质考研初试复习资料

C8260153[电子书]2024年中山大学898水文地质与工程地质考研精品资料 说明&#xff1a;本套资料由高分研究生潜心整理编写&#xff0c;高清电子书&#xff0c;考研推荐资料。 一、考研真题及重点名校真题 1.附赠重点名校真题 ①重点名校&#xff1a;水文地质学基础2010-2013…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023