爱站程序员基地开始：
临近考试，把这学期所有练习的实验从新过一遍，并做一个小结。
前面的内容主要是基础的HTML、CSS、JS部分知识点
后面部分有一些JQuery的练习代码和小项目
加油~
内容：
学期Web实验小记
实验1—购物信息调查表
设计知识点：表格，表单。
1.表单radio选择性别，设置name属性相同，可以防止同时选择
2.下拉选择框是
<select><option value=\"\">选项1</option><option>选项2</option><option>选项3</option></select>
3.复选框
<form><input type=\"checkbox\" value=\"\" checked=\"checked\">内容1<input type=\"checkbox\" value=\"\" >内容2<input type=\"checkbox\" value=\"\" >内容3<input type=\"checkbox\" value=\"\" >内容4</form>
4.表格的rowspan、colspan，textarea的rows、cols、readonly
实验2—css选择器
涉及知识点：元素、id、class、后代、子代、伪类、属性、选择器
1.后代选择器：#div1 ul,所有的ul，子代+所有后代
2.子代选择器：#div >ul,只有子代的ul
3.相邻兄弟选择器：#div1 + div
4.通用兄弟选择器：#div1 ~ div
5.伪类选择器：link、visited、hover、active
可配合nth-child()使用；div：nth-child(od、even、2n、2n+1）：hover{...}p:nth-of-type():hover{...}
6.属性选择器：input[type=text]{…}也可省略属性值input[type]{…}
实验3、4—欧洲联赛赛程表
涉及知识：表格，边框，居中，选择器，文本修饰
1.表格设置合并边框模型：
border-collapse: collapse;
/*为表格设置合并边框模型：separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。inherit 规定应该从父元素继承 border-collapse 属性的值。 */
2.设置在表格竖直居中：vertical-align：middle
3.文本修饰：text-decoration: none;
文本修饰none(默认值)、underline(下划线)、overline(上划线)、 line-through(删除线)、blink(闪烁线)、inherit(规定应从父元素继承text-decoration 属性的值)
实验5—淘宝广告图
涉及知识：布局，浮动，表格
实验6—青岛中能足球页面
涉及知识：布局，定位，CSS3盒子解析方式 box-sizing:border-box,
实验7—竖向导航列表
涉及知识点：列表、边框，伪类选择器
1.设置列表前面圆点消失：list-style-type:none
list-style-position: outside; /* 属性用于声明列表标志相对于列表项内容的位置 */
2.设置列表左边框：border-left：4px solid red;
/* border-style 设置边框样式。有 4 个扩展属性：border-top- style、 border-right- style、border-bottom- style、border-left- stylenone(无边框)、hidden(隐藏边框)、dotted(点线框)、 dashed(虚线框)、solid(实线框)、double(双线框)、 groove(凹槽)、ridge(突脊)、inset(内陷框)和 outset(外凸框) */
3.元素边框与 内容的距离 :a{padding:上 右 下 左；}
4.每个Li之间的距离：a{margin-buttom:5px}
实验8—js验证码
涉及知识：鼠标点击事件、功能函数、Math对象、修改节点值
1.点击图片调用show（）函数：
<div id=\"login\" onclick=\"show()\"><a href=\"#\"></a></div>
2.获取4位验证码函数code（）
<script>function code(n){//定义随机值范围var a = \"azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789\"//b用来接收获取的验证码var b = \" \"//循环获取验证码for(var i = 0;i < n; i++){var index = Math.floor(Math.random() * 62);//产生一个0-60的整数b += a.charAt(index);//字符串对象常用函数，获取字符串a指定位置处的字符，并连接起来}return b;};//定义修改显示验证码函数function show(){document.getElementById(\"login\").innerHTML = code(4)}//页面加载完就调用函数show（）可省略window.onload = show</script>
实验9—选项卡（类型导航轮播）
涉及知识：js的点击事件、布局、点击上面标签切换图片、图片下面为跟随图片文字介绍
1.设置单列布局外盒子居中显示：
#outer {margin: 0 auto;}
2.开始隐藏全部图片和文字：
#outer .section {display:none;overflow:auto}
3.设置每个包含图片和文字的div水平显示：
#outer .section div {float: left}
4.设置图片下面的文字p水平、竖直居中,调整位置紧邻图片div：
#outer .section div p{line-height:34px;height:34px; text-align:center margin-top:-5px}
5.设置p中的a文字颜色、去掉下换线：
#outer .section div p a {color:white;text-decoration:none}
6.设置伪类a变颜色：
#outer .section div p a；hover{color:red}
7.上面的标签大盒子 基本设置：宽度高度、距上面距离
8.标签的span里面的a：
{display：block；margin：0；padding：20;height:34px;line-height:34px;text-align:center;boeder:1px solid gray}
9.点击切换标签背景颜色改变：
#tab1 span a。active1{back-ground:white;border-bottom:1px solid white}
交集选择器，默认第一个
<span><a href=\"#\" class=\"title active1\" onmouseover=\"show(\'1\')\"></a></apan>
第二个
<span><a href=\"#\" class=\"title\" onmouseover=\"show(\'2\')\"></a></apan>
10.定义功能函数show()
<script type=\"text/javascript\">function show(num){var aNum = parseInt(num);var ele = document.getElementByClassName(\"section\");//循环把5个div全部设置为不显示for(var i = 0; i<5 ; i++ ){ele[i].style.display = \"none\";}//由点击传入的数字为索引，设置子div包括图片和文字的样式为选中显示的状态ele[aNum-1].style.display = \"block\";var eleTitle = document.getElemetByClassName(\"title\");//循环把5个标签的class设置为默认的title，没点击之前设置的为停留在第一个for( var i =0;i<5;i++){eleTitle[i].className = \"title\";}//由点击传入的数字为索引，设置子标签为选中状态eleTitle[aNum - 1].className = \"title active1\";}</script>
实验10—梅兰竹菊类轮播
涉及知识：列表、功能函数（分支setAttribute(“src”,“图片地址”))
1.给每个li绑定功能函数：
<li onmouseover=\"show(\'m\')\">梅</li>
2.设置默认照片：
<img id = \"img\" src = \"img/梅花.jpg\"></img>
3.定义功能函数：
<script>function show(type){if(type == \'m\') document.getElementById(\"img\").setAttribute(\"src\",\"img/梅花.jpg\");if(type == \'l\') document.getElementById(\"img\").setAttribute(\"src\",\"img/兰花.jpg\");if(type == \'z\') document.getElementById(\"img\").setAttribute(\"src\",\"img/柱子.jpg\");if(type == \'j\') document.getElementById(\"img\").setAttribute(\"src\",\"img/菊花.jpg\");}</script>
实验11—创建表格点击改变颜色
涉及知识：表格，伪类选择器,点击返回当前对象
1.表格的表头：
<tr><th>表头第一列</th></tr>
2.给每一行绑定点击事件,返回值为点击的对象tr：
<tr onclick=\"check(this);\">内容第一行</tr>
3.定义功能函数；
<script type= \"text/javascript\">function check(obj){var len = document.getElementsByTagName(\"tr\").length;for( var i =0 ;i <len ;i++){//按照索引一次判断点击的是哪个var temp = document.getElementsByTagName(\"tr\")[i];if(obj == temp)temp.style.background = \"yellow\";elsetemp.style.background = \"\";}}</script>
期中TEST—定位+布局
test1
涉及知识：渐变，大小盒子、定位
1.一个大盒子里面四个小盒子，大盒子设置背景渐变：
{background:linear-gradient(120deg,green,yellow);}
2.内一层盒子，原型区域相对定位：
{border-radius:数值1 数值2;position:relative;left:180px;top:60px }
注意：设置relative后，可相对父定位元素实现移动
3.内二层盒子-上,设置定位、文字阴影：
{position:relative;left:150px;top:80px; text-shadow:12px 10px 3px black }
4.设置图片相对定位、边框：
{border:6px;border-style:groove;position：relative;left:100px;top:100px;}
test2
涉及知识： 定位、三行布局，中间两列布局（一个宽度不固定）、边框
1.一个大盒子内层total盒子，total盒子包括四个小盒子，在total盒子：
{position:relative}
2.header盒子：
{width:auto}
3.middle_right盒子：
{boeder：2px solid red;position:absolute; right:0;top:90px}
注：绝对定位元素不在存在，而且忽略其他的元素，相对于父定位标签位置
4.middle_left盒子：
{width：auto;height:88px；position:relative;right:280px;top:2px}
注：相对定位不忽略其他元素，设置的属性就是相对挨着的元素,也可以说是相对原来自己的位置
5.footer盒子：
{width：auto; position:relative;top:5px}
补充练习—js相关数学问题
1.求2的n次幂
<script type=\"text/javascript\">function cimi(n){var result=1;for(var i=1;i<=n;i++){result=result*2;}return result;}var x=parseInt(prompt (\"请输入一个整数求2的n次幂：\"));result=cimi(x);alert(\"结果是：\"+result);document.write(\"结果是：\",result);</script>
涉及知识：parseInt（）转换成整形数
2.阶乘
<script type=\"text/javascript\">function jiecheng(n){var n,result=1;for(var i=n;i>=1;i--){result=n*jiecheng(n-1)}return result;}var x=prompt(\"请输入一个整数求阶乘：\");result=jiecheng(x);alert(x+\"的阶乘的结果为：\"+result);document.write(x+\"的阶乘结果为：\"+result);</script>
涉及知识：递归
3.斐波那契数列
<script type=\"text/javascript\">function feibo(x){var x;var a= new Array(x);a[0]=1;a[1]=1;for(i=2;i<x;i++){a[i]=a[i-1]+a[i-2];}return (a);}var n=prompt(\"请输入一个数，显示斐波那锲数列前n项：\");var result=feibo(n);document.write(result+\" \");</script>4.反向输出三位整数<script type=\"text/javascript\">function fanxiang(){var info =prompt(\'请输入3位整数：\');alert(\"反转后为：\"+info.charAt(2)+info.charAt(1)+info.charAt(0));}</script><body><input type=\"button\" value=\"输入三位整数 \" onclick=\"fanxiang();\" /></body>
涉及知识：BOM方法，按照索引取数字 对象.charAttr();
5.打印最大值
<script type=\"text/javascript\">function zuida(){var tmp;var a=prompt(\'输入a\');var b=prompt(\'输入b\');var c=prompt(\'输入c\');if(a>b){tmp=a;if(c>tmp){tmp=c;}}else {tmp=b;if(c>b){tmp=c;}}alert(\'最大的是：\'+tmp)}</script>
6.打印100以内素数
案例—秒杀倒计时
涉及知识：DOM内置对象Date
<head><meta charset=\"utf-8\"><title>倒计时秒杀</title><script type=\"text/javascript\">function countDown(time){var nowTime = +new Date();var inputTime = +new Date(time);var times = (inputTime - nowTime)/1000;var d = parseInt(times / 60 /60 /24);d = d<10?\'0\'+d:d;var h = parseInt(times / 60 /60 %24);h = h<10?\'0\'+h:h;var m = parseInt(times / 60 %60);m = m<10?\'0\'+m:m;var s = parseInt(times %60);s = s<10?\'0\'+s:s;return d+\'天\'+ h +\'时\'+ m +\'分\'+ s +\'秒\';}console.log(countDown(\'2020-6-1 18:00:00\'));var date = new Date();console.log(date);document.write(countDown(\'2020-6-1 18:00:00\')</script></head>
JQuery课程
练习1.引入JQuery + 选择页面元素 + 设置页面元素属性
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>第六章JQuery</title><!-- 这是jquery方法 --><script type=\"text/javascript\" src=\"jquery-3.5.1.js\"></script><!-- 这是css --><style type=\"text/css\">.div3{width: 200px;height: 200px;background-color: dodgerblue;}.newdiv{background-color: red;}</style></head><body><div id=\"div1\">我在某一个清晨想起了你</div><div><span>不知道多久没有见你</span></div><div>我在秋天的梦里又看见了你</div><div><p id=\"p1\">青春又醉倒在</p><p class=\"p2\">藉藉无名的怀</p><p name=\"p3\">再不见那夜里听歌的小孩</p></div><div class=\"div1\">就老去吧，孤独别醒来</div><div class=\"div2\">你渴望的离开，只是无处停摆</div><hr><p>账号；<input type=\"text\" name=\"\" id=\"text1\" value=\"\" /></p><p>密码：<input type=\"password\" name=\"\" id=\"password1\" value=\"\"/></p><p><input type=\"button\" name=\"\" id=\"button1\" value=\"提交\" /></p><p><input type=\"reset\" name=\"\" id=\"\" value=\"重置\" /></p><div class=\"div3\" >展示js原生方法换标签属性值</div><input type=\"button\" name=\"change\" id=\"\" value=\"改变样式\" onclick=\"bian()\" /><!-- jquery设置 --><script type=\"text/javascript\">alert(\"弹窗\");$(\"#div1\").css(\"font-style\",\"italic\");$(\"span\").css(\"font-weight\",\"lighter\");$(\".p2\").css(\"color\",\"blue\");$(\"[name]\").css(\"font-size\",\"30px\");//定义函数，每次单击就跳出弹窗$(window).click(function(){alert(\"点击获得弹窗\")})// 并集,交集选择器$(\".div1,.div2\").css(\"width\",\"100px\").css(\"background\",\"yellow\");$(\".div1,.div2\").css(\"height\",\"100px\");//表单选择器$(\":input\").css(\"background\",\"pink\");</script><!-- 这是js原生方法 --><script type=\"text/javascript\">var a=document.getElementById(\"p1\");a.style.background=\"red\";a.style.fontSize=\"20px\";a.style.fontFamily=\"微软雅黑\";var b =document.getElementsByClassName(\".js\")function bian(){b.setAttribute(\"class\",\".newdiv\")}</script></body></html>
练习2.JQuery获取对象+访问、修改属性 练习
涉及知识：attr,removeattr prop, html , text , val
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>访问HTML元素</title><script type=\"text/javascript\" src=\"jquery-3.5.1.js\"></script></head><body><div class=\"div1\" value=\"这是div1的属性值\">1.attr</div><div id=\"div2\">2.removeattr</div><div name=\"div3\">3.prop<input type=\"checkbox\" name=\"\" id=\"\" value=\"\" /></div><div class=\"div4\"><span>4.html</span></div><div class=\"div5\">5.text</div><div class=\"div6\">6.val<input type=\"text\" value=\"val()只能对表单含有输入域操作\"></div><script type=\"text/javascript\">//访问HTML元素//1.attr//alert($(\".div1\").attr(\"class\"))//$(\".div1\").attr(\"class\",\"这是div1新设置的属性值\");//alert($(\".这是div1新设置的属性值\").attr(\"class\"));//2.removeattr//alert($(\"#div2\").attr(\"id\"));//$(\"#div2\").removeAttr(\"id\");//不传参数不删除//alert($(\"#div2\").attr(\"id\"));//3.prop// alert($(\"div[name]\").attr(\"name\"));// alert($(\"div[name]\").prop(\"name\"));// $(document).ready(function() {// $(\'input:checkbox\').click(function() {// alert($(this).attr(\'checked\'));// });// });// $(document).ready(function() {// $(\'input:checkbox\').click(function() {// alert($(this).attr(\'checked\'));// });// });//4.html//alert($(\".div4\").html());//5.text//alert($(\".div4\").text());//6.valalert($(\"input:text\").val())alert($(\"input:text\").val(\"有参数就修改为新的值\"));//属性</script></body></html>
练习3. 添加页面节点 + 动画功能
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>JQuery第二次练习题</title><script type=\"text/javascript\" src=\"jquery-3.5.1.js\"></script><style type=\"text/css\">#div1{background-color: #D968C0;}#div2{width: 1352px;height: 600px;background-color: aquamarine;float: left;}#div2_inner{width:100px;height:100px;background-color: #FF0000;border: 1px solid;clear: both;position: relative;}#div_left input{width: 50px;height: 50px;}</style></head><body><div id=\"div1\">这是第一个div区域</div><p>这是段落1</p><p>这是段落2</p><p>这是段落3</p><p id=\"p1\">这是段落4</p><p><input type=\"button\" name=\"button1\" id=\"\" value=\"append添加新标签和内容\" /><input type=\"button\" name=\"button2\" id=\"\" value=\"append参数为页面原有元素!\" /></p><div id=\"\"><input type=\"button\" name=\"button3\" id=\"\" value=\"after添加新标签和内容\" /><input type=\"button\" name=\"button4\" id=\"\" value=\"after参数为页面原有元素\" /></div><hr><div id=\"div2\"><div id=\"div2_inner\"></div></div><div id=\"div_left\"><input type=\"button\" name=\"\" id=\"\" value=\"暂停\" /><input type=\"button\" name=\"\" id=\"\" value=\"继续\" /><input type=\"button\" name=\"\" id=\"\" value=\"开始\" /></div></body><script type=\"text/javascript\">//一、定义入口函数// 1.// $(document).ready(function(){// //append 获取按钮1，点击添加页面没有标签和内容// $(\"input[name = button1]\").click(function(){// $(\"body\").append(\"<p>这是append添加的段落<\\p>\");//1.1为了区分添加的位置，把匹配元素改成第一个div区域$(document).ready(function(){//append 获取按钮1，点击添加页面没有标签和内容$(\"input[name = button1]\").click(function(){$(\"#div1\").append(\"<p>这是append添加的段落<\\p>\");//append 获取按钮2，点击传参页面中有的标签和内容})$(\"input[name = button2]\").click(function(){$(\"#div1\").append($(\"#p1\"));});//2.//after 获取按钮3，点击添加页面没有的标签和内容// $(\"input[name = button3]\").click(function(){// $(\"body\").after(\"<p>这是after添加的段落<\\p>\");// });//2.1 为了区分添加的位置，把匹配元素改成第一个div区域$(\"input[name = button3]\").click(function(){$(\"#div1\").after(\"<p>这是after添加的段落<\\p>\");});//after 获取按钮4，点击传参页面中有的标签和内容$(\"input[name = button4]\").click(function(){$(\"#div1\").after($(\"#p1\"));})});//动画功能//先隐藏暂停按钮$(\"input[value = 暂停]\").css(\"display\",\"none\");//点击开始按钮，动画开始$(\"input[value = 开始]\").click(function(){var res = confirm(\"是否动起来？^_^\")if( res == true){$(\"#div2_inner\").animate({left:\"+666px\",top:\"+333px\"},10000);//点击开始后隐藏开始按钮$(\"input[value = 开始]\").css(\"display\",\"none\");//动画开始显示暂停按钮$(\"input[value = 暂停]\").css(\"display\",\"\");//点击暂停按钮，动画暂停$(\"input[value = 暂停]\").click(function(){$(\"#div2_inner\").stop();//暂停之后隐藏暂停按钮$(\"input[value = 暂停]\").css(\"display\",\"none\");//显示开始按钮$(\"input[value = 开始]\").css(\"display\",\"\");});}});</script></html>
导航项目
涉及知识：动态效果，列表嵌套列表，点击显示隐藏导航，点击功能按钮发生变化
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>web设计实验代码分析</title><script src=\"jquery-3.5.1.js\"></script><!-- 正确引入自己的jquery.js的位置--><style type=\"text/css\">/* 整体设置页面盒子,字体 */*{margin:0;padding:0;font-weight:400;}/* 取消列表的圆点 */li {list-style-type:none;/* 垂直对齐方式 */vertical-align:0;}/* 整个左侧导航盒子样式 */.newHNavListBox{width:290px;height:100%;background:rgba(37,168,167,0.7);position:absolute;/* left:-290px; *//* 定位元素和左外边距和左边界距离 *//* top:0px; */opacity:0;/*透明度级别 ，去掉后 li 下面的横线会随着动画延缓消失*/visibility:hidden;/*使元素不可见，去掉后导航盒子背景点击不消失*/z-index:100;/* 指定堆叠顺序 */}/* 导航盒子里面的列表盒子 */.newHNavListBox .navListBox{width:100%;position:absolute;/* 绝对定位 */left:0px;top:14%;/* ul盒子距离外边盒子边界 */}/* 设置ul样式 */.newHNavListBox .navListBox ul{width:208px;margin-left:40px}/* 设置li的样式 */.newHNavListBox .navListBox ul li{border-bottom:1px solid #5fdcd2;/* 设置文字下面有个边框线 */opacity:0;/* 定义文字前面小三角旋转属性 */-webkit-transform:translate(-40px, 0px);transform:translate(-40px, 0px);-webkit-transition:all 0s .35s;transition:all 0s .35s;/* 两个参数2D旋转 */}/* 设置外部li目录 */.newHNavListBox .navListBox ul li h3{padding:5px 0px;/* 上下,左右距离 */}.newHNavListBox .navListBox ul li h3 a{/* display:block; */position:relative;padding-left:15px;/* a中文字距离三角的距离 */font-size:16px;color:#fff;line-height:30px;text-align:left}/* 设置在每个a元素之前插入内容 */.newHNavListBox .navListBox ul li h3 a:before{content:\"\";display:block;border:6px solid transparent;border-left-color:#fff;position:absolute;left:-3px;top:50%;margin-top:-6px}/* 设置li下的嵌套目录 */.newHNavListBox .navListBox ul li dl{display:none;/* 开始折叠不显示 */padding:5px 0px;/* 嵌套目录距离父li的距离 */border-top:1px solid #5fdcd2/* 设置dl线为实线 */}/* 嵌套列表的设置 */.newHNavListBox .navListBox ul li dl dd{padding-left:25px;font-size:14px;color:#fff;line-height:26px;text-align:left}.newHNavListBox .navListBox ul li dl dd a{display:block;color:#FFF/* a的文字颜色 */}.newHNavListBox .navListBox ul li dl dd a:hover{text-decoration:underline ;color: red;}/* 实现打开内层嵌套列表时,前面小三角旋转 */.newHNavListBox .navListBox ul li.chost h3>a::before{border:6px solid transparent;border-top-color:#fff;margin-top:-2px},/* 后面Jquery设置点击外层的li,显示内层嵌套列表 */.newHNavListBox .navListBox ul li.chost dl{display:block}/* 设置显示导航盒子 */.newHNavListBox.newHNavListBoxd{left:0px;opacity:1;visibility:visible}/* 设置显示导航盒子里的列表盒子 */.newHNavListBox.newHNavListBoxd .navListBox ul li{opacity:1;-webkit-transform:translate(0px, 0px);transform:translate(0px, 0px);-webkit-transition:all .4s .3s;transition:all .4s .3s}/* 设置右上角的按钮,位置和外边框 */.newNavButton{-webkit-transition:all .3s 0s;transition:all .3s 0s;width:40px;height:40px;background:#fff;border-radius:50%;/* 圆角 */position:absolute;left:25px;top:25px;/* 当导航盒子消失后,圆形按钮跑到左边位置 */cursor:pointer;/* 定义了鼠标指针放在一个元素边界范围内时所用的光标形状,放在原型按钮时是小手 */z-index:100;box-shadow:0 0 5px rgba(0,0,0,0.6)}/* 设置按钮中间的一道横线，不是那个×*/.newNavButton span{-webkit-transition:all .3s 0s;transition:all .3s 0s;display:block;height:3px;width:28px;position:absolute;background:#019ea1;left:50%;top:50%;margin-left:-14px;margin-top:-1.5px}/* 设计那个x的\\和/ */.newNavButton::before,.newNavButton::after{-webkit-transition:all .3s 0s;transition:all .3s 0s;content:\"\";display:block;width:22px;height:3px;position:absolute;background:#019ea1;left:50%;top:50%;margin-left:-11px;margin-top:-1.5px}/* 上面的第一道横线 */.newNavButton::before{margin-top:-8.5px}/* 下面的第三道横线 */.newNavButton::after{margin-top:5.5px}/* 设置圆形按钮从左到右动画效果 */.newNavButton.newNavButtond{left:270px}/* 设置显示X的时候不显示中间的那一道横线 */.newNavButton.newNavButtond span{opacity:0}/* 设置是规则的X形状 */.newNavButton.newNavButtond::before,.newNavButton.newNavButtond::after{margin-top:-1.5px}.newNavButton.newNavButtond::before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.newNavButton.newNavButtond::after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}/* 控制5个li不同速度从左边进入 */.newHNavListBox.newHNavListBoxd .navListBox ul li:nth-child(2){-webkit-transition:all .4s .5s;transition:all .4s .5s}.newHNavListBox.newHNavListBoxd .navListBox ul li:nth-child(3){-webkit-transition:all .4s .7s;transition:all .4s .7s}.newHNavListBox.newHNavListBoxd .navListBox ul li:nth-child(4){-webkit-transition:all .4s .9s;transition:all .4s .9s}.newHNavListBox.newHNavListBoxd .navListBox ul li:nth-child(5){-webkit-transition:all .4s 1.1s;transition:all .4s 1.1s}</style><body style=\"width: 900px; height: 708px;\"><!-- 总布局就是三个小盒子 --><!-- 左侧导航 --><div class=\"newHNavListBox newHNavListBoxd\"><div class=\"navListBox\"><ul><li><h3><a href=\"LunBo_Demo_test/LunBo_demo.html\" target=\"_blank\">图片轮播</a></h3></li><li><h3><a href=\"javascript:void(0);\" name=\"a1\" onclick=\"return false;\">学校概况</a></h3><dl class=\"bavrger\"><dd><a href=\"\" >河大概况</a></dd><dd><a href=\"\" >河南大学校歌</a></dd><dd><a href=\"\" >校园风光</a></dd><dd><a href=\"\" >校园示意图</a></dd></dl></li><li><h3><a href=\"javascript:void(0);\" name=\"a1\" onclick=\"return false;\">院系部门</a></h3><dl class=\"bavrger\"><dd><a href=\"\">院校部门</a></dd><dd><a href=\"\">组织结构</a></dd><dd><a href=\"\">科研机构</a></dd></dl></li><li><h3><a href=\"javascript:void(0);\" name=\"a1\" onclick=\"return false;\">人才培养</a></h3><dl class=\"bavrger\"><dd><a href=\"\" >本科生培养</a></dd><dd><a href=\"\" >研究生培养</a></dd></dl></li><li><h3><a href=\"javascript:void(0);\" name=\"a1\" onclick=\"return false;\">师资队伍</a></h3><dl class=\"bavrger\"><dd><a href=\"\">院士风采</a></dd><dd><a href=\"\">长江学者</a></dd><dd><a href=\"\">国家杰青</a></dd></dl></li></ul></div></div><div class=\"newNavButton newNavButtond\"><span></span></div><!-- 中间按钮，显示或隐藏--><div style=\"width:100%; height:100%;\" id=\"gzh\"> </div><!-- 右侧 --></body></html><script type=\"text/javascript\">// 点击按钮,导航盒子显示取反,按钮样式取反$(\".newNavButton\").click(function(){if($(this).hasClass(\"newNavButtond\")){$(this).removeClass(\"newNavButtond\");$(\".newHNavListBox\").removeClass(\"newHNavListBoxd\");}else{$(this).addClass(\"newNavButtond\");$(\".newHNavListBox\").addClass(\"newHNavListBoxd\");}});//点击外层的li 显示嵌套菜单，旋转小三角//实现方法是：如果父元素没有这个能显示的类，就添加一个class = chost,有就去除$(\".navListBox li h3\").click(function(){if($(this).parent().hasClass(\"chost\")){$(this).parent().removeClass(\"chost\");}else{// siblings 方法返回被选元素的所有同级元素。所有的li$(this).parent().addClass(\"chost\").siblings().removeClass(\"chost\");}})</script>
最后：
时间紧，整理的某些地方并不是很细。抱拳~
虽然我走的很慢，但我一直在前进！
