HTML+CSS+JS+JQuery练习知识点总结

开始:

临近考试,把这学期所有练习的实验从新过一遍,并做一个小结。
前面的内容主要是基础的HTML、CSS、JS部分知识点
后面部分有一些JQuery的练习代码和小项目
加油~


内容:

学期Web实验小记

实验1—购物信息调查表

设计知识点:表格,表单。

1.表单radio选择性别,设置name属性相同,可以防止同时选择
2.下拉选择框是


3.复选框

"checkbox" value="" checked="checked">内容1 "checkbox" value="" >内容2 "checkbox" value="" >内容3 "checkbox" value="" >内容4

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- style 
  none(无边框)、hidden(隐藏边框)、dotted(点线框)、 dashed(虚线框)、solid(实线框)、
  double(双线框)、 groove(凹槽)、ridge(突脊)、inset(内陷框)和 outset(外凸框) */

3.元素边框与 内容的距离 :a{padding:上 右 下 左;}
4.每个Li之间的距离:a{margin-buttom:5px}

实验8—js验证码

涉及知识:鼠标点击事件、功能函数、Math对象、修改节点值

1.点击图片调用show()函数:


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}
交集选择器,默认第一个
第二个
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绑定功能函数:


  • 2.设置默认照片:
    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.表格的表头:表头第一列
    2.给每一行绑定点击事件,返回值为点击的对象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";
    			else 
    				temp.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.val
    			alert($("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("

    这是append添加的段落<\p>"); //1.1为了区分添加的位置,把匹配元素改成第一个div区域 $(document).ready(function(){ //append 获取按钮1,点击添加页面没有标签和内容 $("input[name = button1]").click(function(){ $("#div1").append("

    这是append添加的段落<\p>"); //append 获取按钮2,点击传参页面中有的标签和内容 }) $("input[name = button2]").click(function(){ $("#div1").append($("#p1")); }); //2. //after 获取按钮3,点击添加页面没有的标签和内容 // $("input[name = button3]").click(function(){ // $("body").after("

    这是after添加的段落<\p>"); // }); //2.1 为了区分添加的位置,把匹配元素改成第一个div区域 $("input[name = button3]").click(function(){ $("#div1").after("

    这是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>
    

    最后:

    时间紧,整理的某些地方并不是很细。抱拳~
    虽然我走的很慢,但我一直在前进!

    你可能感兴趣的:(Web前端)