实训知识点2019416

最新推荐文章于 2021-07-25 23:01:56 发布

qq_26170225

最新推荐文章于 2021-07-25 23:01:56 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/qq_26170225/article/details/89336942

版权

这周我们先复习了上周动画的内容然后用jquery的方法实现了二级菜单以下为css和js代码：

<style type="text/css">
			*{margin: 0; padding: 0;}
			#nav{
				background-color:  dodgerblue; width: 600px; height:20px; margin: 0 auto;}	
				ul li{list-style:none;float: left; line-height: 20px;text-align: center;position: relative;}
				a{text-decoration:none ; color: #red; padding: 0 10px;}
		        a:hover{color:greenyellow;}
				ul li ul{position: absolute;top: 20px; left: 0;}
				ul li ul li{float:none; background-color:blueviolet;margin: 1px 0;display: none;width: 90px;}
				/* ul li:hover li{display: block;} */
				ul li ul li a{padding: 0;}
		</style>
	
	   <script type="text/javascript">
// 	   	function k1(){
// 	   		var b1 = document.getElementById("b1");
// 	   		b1.style.display="block";
// 	   	}
// 	   	function k2(){
// 	   		var b1 = document.getElementById("b1");
// 	   		b1.style.display="none";
// 	   	}
    $(document).ready(function(){.
			$(".navmune").MOUSEOVER(function(){
				$(this).children("ul").show();
				//	$(this).children("ul").css(display:"block")
			})
			$(".navmune").MOUSEOUT(function(){
				$(this).children("ul").hide();
				//	$(this).children("ul").css(display:"none")

		})
		})
	   </script>

然后我们学习了用jquery来获取html元素的尺寸：以下为知识点

children当前节点的止节点

jquery尺寸：
获取尺寸 element：windth（） height（）设置或返回元素的宽高（不包括内边距、边框、或外边距）
padding ：innerwidth（） innerheight（）
border ： outerwidth（） outerheight（）
marigin outerwidth（true） outerheight（true）

用以上知识点做了获取尺寸的网页：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1</title>
		<script src="jquery-1.9.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			$('#button').click(function(){
				var txt =""
				txt += 'div的宽度是:'+$('#div1').width()+'px'+'<br>';
				txt += 'div的高度是:'+$('#div1').height()+'px'+'<br>';
				txt +="div的内边距宽度是:"+$('#div1').innerWidth()+'px'+'<br>';
				txt +="div的内边距高度是:"+$('#div1').innerHeight()+'px'+'<br>';
				txt +="div的边框宽度是:"+$('#div1').outerWidth()+'px'+'<br>';
				txt +="div的边框高度是:"+$('#div1').outerHeight()+'px'+'<br>';
				txt +="div的外边距宽度是:"+$('#div1').outerWidth(true)+'px'+'<br>';
				txt +="div的外边距高度是:"+$('#div1').outerHeight(true)+'px'+'<br>';
				$('#div1').html(txt)
			})
			})
		</script>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="div1" style=" width: 200px; height: 200px; padding: 10px; border: 2px solid red; margin: 30px;"  >
		</div>
		<button type="button" id="button">显示div元素的尺寸</button>
	</body>
	
</html>

最后我们做了这学期的第一次课堂作业：用juquery实现div块的滑动隐藏和显示下面为代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#div4').slideUp();
				$('#div1').click(function(){
					$('#div4').slideDown(1000)
				})
				$('#div2').click(function(){
					$('#div4').slideUp(1000);
				})
				$('#div3').click(function(){
					$('#div4').slideToggle(2000)
				})
			})
		</script>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="div1" style="width: 100%; height: 40px ; border: 1px solid red; background-color: burlywood; text-align: center;" >
			显示
		</div>
		<div id="div2" style="width: 100%; height: 40px ; border: 1px solid red; background-color: burlywood; text-align: center;" >
			隐藏
		</div>
		<div id="div3" style="width: 100%; height: 40px ; border: 1px solid red; background-color: burlywood; text-align: center;" >
			toggle
		</div>
		<div id="div4" style="width: 100%; height: 80px ; border: 1px solid red; background-color: burlywood; text-align: center; line-height:80px">
			hello word
		</div>
	</body>
</html>

这就是我本周html网页设计的全部内容 T-T

qq_26170225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实训知识点2019416

这周我们先复习了上周动画的内容然后用jquery的方法实现了二级菜单以下为css和js代码：<style type="text/css"> *{margin: 0; padding: 0;} #nav{ background-color: dodgerblue; width: 600px; height:20px; margin: 0 auto;} ...
复制链接

扫一扫