响应式菜单_meanmenu.js-程序员宅基地
技术标签： css 响应式 html css3 javascript
因公司近期需用到响应式菜单栏，临时做了一个，PC端左侧菜单栏通过css实现，其中移动端有用到jquery.meanmenu.js插件。可能没那么完美，但是基本也勉强够用了，有些功能或者样式可以自己调整。留个记录，仅供大家参考哈！
HTML内容部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单兼容PC和移动端</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="stylesheet" href="css/slide-menu.css" />
</head>
<body>
<div class="menu_container">
<!--pc menu code-->
<div class="hc_lnav">
<div class="allbtn">
<h2><a href="#"><strong> </strong>Shop by Departments<i> </i></a></h2>
<ul class="jspop">
<li>
<dl>
<dd>
<a href="#">Electronics</a>
</dd>
</dl>
<div class="pop">
<h3 class="pop_h3"><a href="#">Electronics Buying Guide</a></h3>
<div class="m_content">
<dl>
<dt class="small_title"><a href="#">Audio Media Players</a></dt>
<dd>
<a href="">Microphone</a>
<a href="">Headset</a>
<a href="">Walkie Talkie</a>
<a href="">Bluetooth Speaker</a>
<a href="">Voice Recorders, Dictaphones</a>
<a href="">MP3 & MP4 Players</a>
</dd>
</dl>
<dl>
<dt class="small_title"><a href="#">Audio Media Players</a></dt>
<dd>
<a href="">Microphone</a>
<a href="">Headset</a>
<a href="">Walkie Talkie</a>
<a href="">Bluetooth Speaker</a>
<a href="">Voice Recorders, Dictaphones</a>
<a href="">MP3 & MP4 Players</a>
</dd>
</dl>
</div>
<div class="m_content">
<dl>
<dt class="small_title"><a href="#">Audio Media Players</a></dt>
<dd>
<a href="">Microphone</a>
<a href="">Headset</a>
<a href="">Walkie Talkie</a>
<a href="">Bluetooth Speaker</a>
<a href="">Voice Recorders, Dictaphones</a>
<a href="">MP3 & MP4 Players</a>
</dd>
</dl>
<dl>
<dt class="small_title"><a href="#">Audio Media Players</a></dt>
<dd>
<a href="">Microphone</a>
<a href="">Headset</a>
<a href="">Walkie Talkie</a>
<a href="">Bluetooth Speaker</a>
<a href="">Voice Recorders, Dictaphones</a>
<a href="">MP3 & MP4 Players</a>
</dd>
</dl>
</div>
<div class="act">
<a href=""><img src="" /></a>
</div>
</div>
</li>
<li>
<dl>
<dd>
<a href="#">Cell Phones & Accessories</a>
</dd>
</dl>
<div class="pop">
<h3 class="pop_h3"><a href="#">Mobile Phone Buying Guide</a></h3>
<div class="m_content">
<dl>
<dt class="small_title"><a href="#">Cell Phones</a></dt>
</dl>
<dl>
<dt class="small_title"><a href="#">Samsung Accessories</a></dt>
<dd>
<a href="">Samsung Cases</a>
<a href="">Samsung Chargers</a>
<a href="">Samsung Screen Protector</a>
<a href="">Earphones for Samsung</a>
</dd>
</dl>
</div>
<div class="m_content">
<dl>
<dt class="small_title"><a href="#">iPhone Accessories</a></dt>
<dd>
<a href="">iPhone Cases/Covers</a>
<a href="">iPhone Gadgets</a>
<a href="">iPhone Screen Protector</a>
</dd>
</dl>
<dl>
<dt class="small_title"><a href="#">Photography Accessories</a></dt>
<dd>
<a href="">Selfie Stick, Mini Tripod</a>
<a href="">Phone Lens</a>
</dd>
</dl>
</div>
<div class="act">
<a href=""><img src="" /></a>
</div>
</div>
</li>
<li>
<dl>
<dd>
<a href="#">Computer</a>
</dd>
</dl>
<div class="pop">
<h3 class="pop_h3"><a href="#">Computer Buying Guide</a></h3>
<div class="m_content">
<dl>
<dt class="small_title"><a href="#">Laptops & Tablet PCs</a></dt>
<dd>
<a href="">Tablet PCs</a>
<a href="">Laptops</a>
<a href="">iPad Accessories</a>
<a href="">Tablet/eBook Accessories</a>
<a href="">Laptop Power Adapters</a>
</dd>
</dl>
<dl>
<dt class="small_title"><a href="#">Computer Peripherals</a></dt>
<dd>
<a href="">Computer Microphone</a>
<a href="">Keyboards & Mouse</a>
<a href="">Computer Headset</a>
<a href="">Webcams</a>
<a href="">Remote Controls & Pointers</a>
<a href="#">USB Lamps</a>
</dd>
</dl>
<dl>
<dt class="small_title"><a href="#">Computer Components</a></dt>
<dd>
<a href="">Computer Microphone</a>
<a href="">Keyboards & Mouse</a>
<a href="">Computer Headset</a>
<a href="">Webcams</a>
<a href="">Remote Controls & Pointers</a>
<a href="#">USB Lamps</a>
<a href="">Remote Controls & Pointers</a>
<a href="#">USB Lamps</a>
</dd>
</dl>
</div>
<div class="m_content">
<dl>
<dt class="small_title"><a href="#">iPhone Accessories</a></dt>
<dd>
<a href="">iPhone Cases/Covers</a>
<a href="">iPhone Gadgets</a>
<a href="">iPhone Screen Protector</a>
</dd>
</dl>
<dl>
<dt class="small_title"><a href="#">Photography Accessories</a></dt>
<dd>
<a href="">Selfie Stick, Mini Tripod</a>
<a href="">Phone Lens</a>
</dd>
</dl>
</div>
<div class="act">
<a href=""><img src="" /></a>
</div>
</div>
</li>
<li>
<dl>
<dd>
<a href="#">Cell Phones & Accessories</a>
</dd>
</dl>
<div class="pop">
<h3 class="pop_h3"><a href="#">Mobile Phone Buying Guide</a></h3>
<div class="m_content">
<dl>
<dt class="small_title"><a href="#">Cell Phones</a></dt>
</dl>
<dl>
<dt class="small_title"><a href="#">Samsung Accessories</a></dt>
<dd>
<a href="">Samsung Cases</a>
<a href="">Samsung Chargers</a>
<a href="">Samsung Screen Protector</a>
<a href="">Earphones for Samsung</a>
</dd>
</dl>
</div>
<div class="m_content">
<dl>
<dt class="small_title"><a href="#">iPhone Accessories</a></dt>
<dd>
<a href="">iPhone Cases/Covers</a>
<a href="">iPhone Gadgets</a>
<a href="">iPhone Screen Protector</a>
</dd>
</dl>
<dl>
<dt class="small_title"><a href="#">Photography Accessories</a></dt>
<dd>
<a href="">Selfie Stick, Mini Tripod</a>
<a href="">Phone Lens</a>
</dd>
</dl>
</div>
<div class="act">
<a href=""><img src="" /></a>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 移动端代码部分begin -->
<header>
<nav>
<ul>
<li>
<a href="#">Free Shipping</a>
<ul>
<li>
<a href="#">Second Level Link</a>
<ul>
<li>
<a href="#">Third Level Link</a>
</li>
<li>
<a href="#">Third Level Link</a>
</li>
<li>
<a href="#">Third Level Link</a>
</li>
</ul>
</li>
<li>
<a href="#">Second Level Link</a>
</li>
<li>
<a href="#">Second Level Link</a>
</li>
</ul>
</li>
<li>
<a href="#">Deals</a>
<ul>
<li>
<a href="#">Second Level Link</a>
<ul>
<li>
<a href="#">Third Level Link</a>
</li>
<li>
<a href="#">Third Level Link</a>
</li>
<li>
<a href="#">Third Level Link</a>
<ul>
<li>
<a href="#">Fourth Level Link</a>
</li>
<li>
<a href="#">Fourth Level Link</a>
</li>
<li>
<a href="#">Fourth Level Link with extra long name so it wraps</a>
<ul>
<li>
<a href="#">Fifth Level Link</a>
</li>
<li>
<a href="#">Fifth Level Link</a>
</li>
<li>
<a href="#">Fifth Level Link</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Second Level Link</a>
</li>
<li>
<a href="#">Second Level Link</a>
</li>
</ul>
</li>
<li>
<a href="#">Lifestyle</a>
</li>
<li>
<a href="#">Daily Deals</a>
</li>
<li>
<a href="#">Freebies</a>
</li>
<li>
<a href="#">Top Sellers</a>
</li>
<li>
<a href="#">Newsletter Offer</a>
</li>
<li>
<a href="#">Clearance</a>
</li>
<li>
<a href="#">New Arrival</a>
</li>
<li>
<a href="#">Promos</a>
</li>
<li>
<a href="#">Group Deals</a>
</li>
<!--pc多级菜单在移动端显示部分-->
<div class="m-menu-show">
<li>
<a href="#">Kids</a>
<ul>
<li>
<a href="#">Sports Kids</a>
<ul>
<li>
<a href="#">All</a>
</li>
<li>
<a href="#">Scooters, Skateboard</a>
<ul>
<li>
<a href="#">All</a>
</li>
<li>
<a href="#">Roller Blade</a>
</li>
<li>
<a href="#">Roller Skate</a>
</li>
<li>
<a href="#">Skateboard</a>
</li>
</ul>
</li>
<li>
<a href="#">Bikes</a>
<li>
<a href="#">Kids Swings</a>
</li>
<li>
<a href="#">Archery & Target Stand</a>
</li>
<li>
<a href="#">Boxing Kids</a>
</li>
</ul>
</li>
<li>
<a href="#">Kids Toys</a>
</li>
<li>
<a href="#">Kids Clothing</a>
</li>
<li>
<a href="#">Kids' Watches</a>
</li>
<li>
<a href="#">Kids Shoes</a>
</li>
</ul>
</li>
</div>
</ul>
</nav>
</header>
</div>
<!--遮罩层-->
<div class="shade"></div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.meanmenu.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('header nav').meanmenu();
});
document.getElementsByClassName("hc_lnav")[0].onmouseover = function() {
document.getElementsByClassName("shade")[0].style.display = "block";
}
document.getElementsByClassName("hc_lnav")[0].onmouseleave = function() {
document.getElementsByClassName("shade")[0].style.display = "none";
}
</script>
<!-- 代码部分end -->
</body>
</html>
CSS部分：
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
html,body{line-height:2em;background-color:#ffffff;font-family:arial, helvetica, sans-serif;color:#666666;font-size:12px;position: relative;width: 100%;height: 100%;overflow: hidden;}
a {color: #333;text-decoration: none;}
a:hover{color:#f77564;text-decoration:underline}
/*pc菜单样式*/
.hc_lnav{z-index:9999;position:relative;display: inline-block;float: left;width: 13%;z-index: 1;}
.hc_lnav .allbtn .jspop{width: 100%;}
.hc_lnav .allbtn h2{font-size:14px;box-shadow:2px 0px 6px -3px #428000;-webkit-box-shadow:2px 0px 6px -3px #428000;-moz-box-shadow:2px 0px 6px -3px #428000;margin: 0;}
.hc_lnav .allbtn h2 a{height:52px;line-height:52px;background-color:#358000;padding-left:10px;display:block;font-family:微软雅黑, 黑体;color:#ffffff;font-size:14px;font-weight:normal}
.hc_lnav .allbtn h2 a:hover{background-color:#358000;text-decoration:none}
.hc_lnav .allbtn ul{z-index:99999;position:absolute;background-color:#60a411;width:190px;display:none;height:486px;top:52px;left:0px;-webkit-padding-start: 0;}
.hc_lnav .allbtn ul li{padding-bottom:7px;zoom:1;clear:both;cursor:default;height: 30px;}
.hc_lnav .allbtn ul li dl{padding-top:4px}
.hc_lnav .allbtn ul li dl a {
line-height: 25px;
white-space: nowrap;
float: left;
color: #fff;
margin-left: 15px;
margin-right: 6px;
-webkit-transition: color 0.1s ease-out 0s;
-moz-transition: color 0.1s ease-out 0s;
-ms-transition: color 0.1s ease-out 0s;
-o-transition: color 0.1s ease-out 0s;
transition: color 0.1s ease-out 0s
}
.hc_lnav .allbtn ul li dt{padding-left:10px;float:left;padding-top:1px}
.hc_lnav .allbtn ul li dd{line-height:22px;float:left;padding-top:2px}
.hc_lnav .allbtn ul li .pop{border-bottom:#599900 2px solid;position:absolute;left:100%;border-left:medium none;padding-bottom:10px;background-color:#fcfcfc;min-height:408px;padding-left:30px;width:750px;max-width:750px;padding-right:30px;display:none;border-top:medium none;top:0px;border-right:#599900 2px solid;padding-top:10px;box-shadow:4px 4px 5px -1px #999999;-webkit-box-shadow:4px 4px 5px -1px #999999;-moz-box-shadow:4px 4px 5px -1px #999999}
.hc_lnav .allbtn ul li:hover .pop{display:block;top:0px;}
.hc_lnav .allbtn ul li .pop h3{font-size: 20px;color: red;width: 100%;display: block;}
.hc_lnav .allbtn ul li .pop .m_content{width: 33.3%;display: inline-block; float: left;}
.hc_lnav .allbtn ul li .pop dl{padding: 6px 10px;float: left;}
.hc_lnav .allbtn ul li .pop dl a{color:#666666;display: block;width: 100%;margin-left: 6px;}
.hc_lnav .allbtn ul li .pop dt{padding-left:0px;}
.hc_lnav .allbtn ul li .pop .small_title{font-weight: bold;font-size: 13px;margin-left: -12px;}
.hc_lnav .allbtn ul li .pop dd{margin-left:-12px}
.hc_lnav .allbtn ul li .pop .act{position: absolute;right: 0;top: 0;}
.hc_lnav .allbtn:hover ul{display:block;}
.hc_lnav .allbtn ul li:hover{background-color:#fcfcfc}
.hc_lnav .allbtn ul li:hover dl{color:#6e6e6e}
.hc_lnav .allbtn ul li:hover a{color:#666666}
.hc_lnav .allbtn ul li:hover a:hover{color:#cd0606}
.shade{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
background-color: #000;
-ms-filter: opacity(0.6);
filter: alpha(opacity=60);
-webkit-opacity: .6;
-moz-opacity: .6;
-o-opacity: .6;
opacity: .6;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 0;
}
/*移动端菜单样式*/
.menu_container h1 {font-size: 28px;font-weight: 100;text-align: center;}
.menu_container header nav {text-align: center;background: #efefef;}
.menu_container header nav ul {margin: 0;padding: 1em;list-style-type: none;}
.menu_container header nav ul li {display: inline;margin-left: 3em;}
.menu_container header nav ul li:first-child {margin-left: 0;}
.menu_container header nav ul li ul {display: none;}
.menu_container section, article, header {display: block;float: left;font-size: 14px;width: 87%;position: relative;z-index: 1;}
.menu_container article {width: 96%;padding: 3em 2%;}
/*a.meanmenu-reveal {display:none}*/
.mean-container .mean-bar {float:left;width:100%;position:relative;background:#0c1923;padding:4px 0;min-height:42px;z-index:999999}
.mean-container a.meanmenu-reveal {
width: 22px;
height: 22px;
padding: 13px 13px 11px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
font-size: 16px;
text-indent: -9999em;
line-height: 22px;
font-size: 1px;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700
}
.mean-container a.meanmenu-reveal span {display:block;background:#fff;height:3px;margin-top:3px}
.mean-container .mean-nav {float:left;width:100%;background:#0c1923;margin-top:44px}
.mean-container .mean-nav ul {padding:0;margin:0;width:100%;list-style-type:none}
.mean-container .mean-nav ul li {position:relative;float:left;width:100%}
.mean-container .mean-nav ul li a {
display: block;
float: left;
width: 90%;
padding: 1em 5%;
margin: 0;
text-align: left;
color: #fff;
border-top: 1px solid #383838;
border-top: 1px solid rgba(255, 255, 255, .5);
text-decoration: none;
text-transform: uppercase
}
.mean-container .mean-nav ul li li a {
width: 80%;
padding: 1em 10%;
border-top: 1px solid #f1f1f1;
border-top: 1px solid rgba(255, 255, 255, .25);
opacity: .75;
filter: alpha(opacity=75);
text-shadow: none!important;
visibility: visible
}
.mean-container .mean-nav ul li.mean-last a {border-bottom:0;margin-bottom:0}
.mean-container .mean-nav ul li li li a {width:70%;padding:1em 15%;}
.mean-container .mean-nav ul li li li li a {width:60%;padding:1em 20%}
.mean-container .mean-nav ul li li li li li a {width:50%;padding:1em 25%}
.mean-container .mean-nav ul li a:hover {background:#252525;background:rgba(255, 255, 255, .1)}
.mean-container .mean-nav ul li a.mean-expand {
margin-top:1px;
width:26px;
height:24px;
padding:12px!important;
text-align:center;
position:absolute;
right:0;
top:0;
z-index:2;
font-weight:700;
background:rgba(255, 255, 255, .1);
border:0!important;
border-left:1px solid rgba(255, 255, 255, .4)!important;
border-bottom:1px solid rgba(255, 255, 255, .2)!important
}
.mean-container .mean-nav ul li a.mean-expand:hover {background:rgba(0, 0, 0, .9)}
.mean-container .mean-push {float:left;width:100%;padding:0;margin:0;clear:both}
.mean-nav .wrapper {width:100%;padding:0;margin:0}
.mean-container .mean-bar, .mean-container .mean-bar * {-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
.mean-remove {display:none!important}
.m-menu-show{display: none;}
/*移动端公用样式*/
@media only screen and (max-width:780px) {
html, body{overflow-y: auto;}
.hc_lnav{display: none;}
.m-menu-show{display: block;}
}
@media only screen and (min-width:781px) and (max-width:1415px){
.hc_lnav{float: none;width: 22%;}
.menu_container section, article, header{float: none;width: 100%;z-index: 0;}
}
移动端效果：
pc端效果：
智能推荐
【超好懂的比赛题解】第 45 届国际大学生程序设计竞赛（ICPC）亚洲区域赛（济南）_icpc国际大学生程序设计竞赛题目-程序员宅基地
文章浏览阅读930次，点赞2次，收藏2次。title : 第 45 届国际大学生程序设计竞赛（ICPC）亚洲区域赛（济南）tags : ACM,题解，练习记录。_icpc国际大学生程序设计竞赛题目
SpringBoot(Thymeleaf)拼接跳转链接_thymeleaf拼接href和${}-程序员宅基地
文章浏览阅读1.1k次。th:href = "@{/user/}"+${xxxx}链接的拼接类似于Java中的字符串拼接，使用+完成拼接要注意的是@{}中要把后面的/也带上，${}中的是变量值，可以是从别的页面获取的表单值之类的_thymeleaf拼接href和${}
【论文笔记 医疗影像分割—nnUNet】nnU-Net: Self-adapting Framework for U-Net-Based Medical Image Segmentation-程序员宅基地
文章浏览阅读6.4k次，点赞3次，收藏41次。文章目录1.Abstract说明：本文是对原版论文和一位大神解读的基础上，加以自己的理解而作，如有错误，欢迎指正。大神的文章链接1.Abstract'对于深度学习模型来说，当用在一个新的问题上，就需要对可变设置人为设定。对新问题的适应包括精确架构、预训练、训练、推理对个自由度，这些选择对整体性能有很大的影响。本文提出nnU-Net（no-new-net）????，是一种基于三个模型：2D U-Net, 3D U-Net 和U-Net Cascade（级联的3D U-net，之后会有介绍）上的自适应框_nnunet
Java 异常的处理_catch中不用system.exit(1)会怎样-程序员宅基地
文章浏览阅读242次。Java 异常的处理Java 应用程序中，对异常的处理有两种方式：处理异常和声明异常。处理异常：try、catch 和 finally若要捕获异常，则必须在代码中添加异常处理器块。这种 Java 结构可能包含 3 个部分，都有 Java 关键字。try 语句块：将一个或者多个语句放入 try 时，则表示这些语句可能抛出异常。编译器知道可能要发生异常，于是用一个特殊结构评估块内所_catch中不用system.exit(1)会怎样
OSPF 多区域配置实验_area0.0.1.0等于多少-程序员宅基地
文章浏览阅读263次。OSPF 多区域配置_area0.0.1.0等于多少
字典树_字典树建树-程序员宅基地
文章浏览阅读271次。原创字典树字典树，又称单词查找树，Trie树，是一种树形结构，哈希表的一个变种。用于统计，排序和保存大量的字符串（也可以保存其的）。优点就是利用公共的前缀来节约存储空间。在这举个简单的例子：比如说我们想储存3个单词，nyist、nyistacm、nyisttc。如果只是单纯的按照以前的字符数组存储的思路来存储的话，那么我们需要定义三个字符串数组。但是_字典树建树
随便推点
MySQL8.0学习记录10 - 字符集与校对规则_mysql8.0存储系统元数据的字符集是-程序员宅基地
文章浏览阅读2.1k次。MySQL8.0字符集_mysql8.0存储系统元数据的字符集是
漫威所有电影的 按时间线的观影顺序-程序员宅基地
文章浏览阅读3.1k次。美国队长1 - 2011年惊奇队长 - 2019年钢铁侠1 - 2008年无敌浩克 - 2008年钢铁侠2 - 2010年雷神 - 2011年复仇者联盟 - 2012年雷神2 - 2013年钢铁侠3 - 2013年美国队长2 - 2014年复仇者联盟2 - 2015年银河护卫队 - 2017年蚁人 - 2015年美国队长3 - 2016年奇异博士 - 2016年银河护卫队2 - 2017..._漫威电影观看顺序时间线
PhotoZoom Classic 7中的新功能-程序员宅基地
文章浏览阅读142次。众所周知PhotoZoom Classic是家庭使用理想的放大图像软件。目前很多用户还在使用PhotoZoom Classic 6，对于PhotoZoom Classic 7还是有点陌生。其实在6代衍生下出了7代，7代比6代多了很多适用的功能。下面我们就介绍一下PhotoZoom Classic 7中的新功能。PhotoZoom Classic 6的功能我们就不过多介绍，主要介绍7代中特有的功..._photozoon的作用
tensorflow中tf.keras.models.Sequential()用法-程序员宅基地
文章浏览阅读4.6w次，点赞75次，收藏349次。tensorflow中tf.keras.models.Sequential()用法Sequential()方法是一个容器，描述了神经网络的网络结构，在Sequential()的输入参数中描述从输入层到输出层的网络结构model = tf.keras.models.Sequential([网络结构]) #描述各层网络网络结构举例：拉直层：tf.keras.layers.Flatten() #拉直层可以变换张量的尺寸，把输入特征拉直为一维数组，是不含计算参数的层全连接层：tf.ker._tf.keras.models.sequential
Java递归实现Fibonacci数列计算_用递归方法编程计算fibonacci数列：(n=10)，fac.jpg-程序员宅基地
文章浏览阅读2.8k次。实现代码如下:public static int factorial(int n){ if (n <= 1){ return 1; } return factorial(n-1) + factorial(n-2); }测试代码如下:System.out.println(factorial(40));测..._用递归方法编程计算fibonacci数列：(n=10)，fac.jpg
scratch班级名称 电子学会图形化编程scratch等级考试四级真题和答案解析B卷2020-9-程序员宅基地
文章浏览阅读1.3k次。scratch班级名称一、题目要求1、准备工作 保留小猫角色，白色背景 2、功能实现 点击绿旗后，询问请输入年级数，等待输入年级数 询问请输入班级数，等待输入班级数 定义列表“全校班级”，假设每个班级的班级数相同，所有班级名称自动生成并保存到全校班级中。 例如，输入年级数为5，输入班级数为8，可以看到舞台上列表全校班级的内容为：1（1）班、1（2）班、...5（7）班、5（8）班 二、案例分析1、角色分析角色：小猫2、背景_scratch班级名称