Javaweb崔希凡---day2---CSS---Javascript

今日内容概要:

在这里插入图片描述
在这里插入图片描述

CSS

1、css的简介
在这里插入图片描述
2、css和html的结合方式(四种结合方式)
在这里插入图片描述
代码:

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

	div {
	
		background-color:gray;
		
		color:white;
	}
  </style>
 </head>
 <body>

<div style="background-color:red;color:green;">天之道,损有余而补不足,是故虚胜实,不足胜有余。</div>

<div>变化之由表,死生之兆彰,不谋而遗迹自同,</div>
 </body>
</html>

在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>

  <style type="text/css">	
	div {
		background-color:green;
		color: red;
	}		
 </style>

 </head>
 <body>

<div>其意博,其理奥,其趣深,天地之象分,阴阳之候列。</div>

 </body>
</html>

在这里插入图片描述

/*
   div
*/

div {

	background-color: gray;
	color: black;
}
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
		@import url(div.css);
  </style>
 </head>
 <body>

<div>变化之由表,死生之兆彰,不谋而遗迹自同,</div>
 </body>
</html>

在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>

  <link rel="stylesheet" type="text/css" href="div.css" />

 </head>
 <body>

	<div>变化之由表,死生之兆彰,不谋而遗迹自同,</div>
 </body>
</html>

在这里插入图片描述
3、css的基本选择器(三种)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

	div {
		background-color: red;
	}

	p {
		background-color: green;
	}
  </style>
 </head>
 <body>

<div>变化之由表,死生之兆彰,不谋而遗迹自同,1111</div>

<p>勿约而幽明斯契,稽其言有微,验之事不忒,诚可谓至道之宗,</p>

 </body>
</html>

在这里插入图片描述
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

	/*div.haha {
		background-color: yellow;
	}

	p.haha {
		background-color: yellow;
	}*/

	.haha {
		background-color: orange;
	}


  </style>
 </head>
 <body>

<div class="haha">变化之由表,死生之兆彰,不谋而遗迹自同,1111</div>

<p class="haha">变化之由表aaaaaaaaaa</p>

 </body>
</html>

在这里插入图片描述
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

	/*div#hehe {
		background-color: gray;
	}

	p#hehe {
		background-color: gray;
	}*/

	#hehe {
		background-color: #333300;
	}
  </style>
 </head>
 <body>

<div id="hehe">故动则有成,犹鬼神幽赞,而命世奇杰,时时间出焉</div>

<p id="hehe">aaaaaaaaaaaaaaaaaaaaaa</p>
 </body>
</html>

在这里插入图片描述
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  		#hehe1 {
			background-color: orange;
		}

		.haha1 {
			background-color: green;
		}

		div {
			background-color: red;
		}


  </style>
 </head>
 <body>

<div class="haha1" id="hehe1" style="background-color: gray;">故动则有成,犹鬼神幽赞,而命世奇杰,时时间出焉</div>

<div>aaaaaaaaaaaaaaaaaaaaaa</div>

 </body>
</html>

在这里插入图片描述
4、css的扩展选择器
在这里插入图片描述
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div p {
	
		background-color: green;
	}
  </style>
 </head>
 <body>

<div><p>CSS的扩展选择器</p></div>

<p>WWWWWWWWWWWWWWWWWWWWWW</p>

 </body>
</html>

在这里插入图片描述
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	
	div,p {
		background-color: orange;
	}
  </style>
 </head>
 <body>
	
	<div>QQQQQQQQQQQQQQQQQ</div>

	<p>AAAAAAAAAAAAAAAAAAAAAAA</p>

 </body>
</html>

在这里插入图片描述

在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

	/*原始状态*/
	a:link {
		background-color: red;
	}

	/*悬停状态*/
	a:hover {
		background-color: green;
	}
	/*点击状态*/
	a:active {
		background-color: blue;
	}

	/*点击之后的状态*/
	a:visited {
		background-color: gray;
	}

  </style>
 </head>
 <body>

<a href="http://www.sina1.com.cn" target="_blank">CSS概述和与HTML的结合方式超链接一</a>

 </body>
</html>

在这里插入图片描述

5、css的盒子模型
在这里插入图片描述

<html>
 <head>
  <title>HTML示例}</title>
  <style type="text/css">

	div {
		width: 200px;
		height: 100px;

		border: 2px solid blue;
	}

	#div12 {
		border-right: 2px dashed yellow;
	}
  </style>
 </head>
 <body>

<div id="div11">AAAAAAAAAAAAAAA</div>
<div id="div12">BBBBBBBBBBBBBBB</div>
<div id="div13">CCCCCCCCCCCCCCC</div>
 </body>
</html>

在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height: 100px;
		border: 2px solid blue;
	}

	#div22 {
		padding: 20px;
	}

	#div23 {
		padding-left: 30px;
	}

  </style>
 </head>
 <body>

<div id="div21">AAAAAAAAAAAAAAA</div>
<div id="div22">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="div23">CCCCCCCCCCCCCCC</div>
 </body>
</html>

在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		border: 2px solid blue;
	}

	#div32 {
		margin: 20px;
	}

	#div33 {
		margin-left : 30px;
	}
  </style>
 </head>
 <body>

<div id="div31">AAAAAAAAAAAAAAA</div>
<div id="div32">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="div33">CCCCCCCCCCCCCCC</div>
 </body>
</html>

在这里插入图片描述
6、css的布局的漂浮
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height:150px;
		border: 2px solid blue;
	}

	#div41 {
		float : left;
	}

	#div42 {
		float:left;
	}
  </style>
 </head>
 <body>

<div id="div41">AAAAAAAAAAAAAAA</div>

<div id="div42">BBBBBBBBBBBBBBB</div>

<div id="div43">CCCCCCCCCCCCCCC</div>
 </body>
</html>

在这里插入图片描述
7、css的布局的定位
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height:150px;
		border: 2px solid blue;
	}

	#div51 {
		background-color: red;

		position:absolute;

		top: 80px;
		left: 120px;
	}

	#div52 {
		background-color: green;
		width: 250px;
		height:150px;
	}

	#div53 {
		background-color: orange;
	}
  </style>
 </head>
 <body>

<div id="div51">AAAAAAAAAAAAAAA</div>

<div id="div52">BBBBBBBBBBBBBBB</div>

<div id="div53">CCCCCCCCCCCCCCC</div>
 </body>
</html>

在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div {
		width: 200px;
		height:150px;
		border: 2px solid blue;
	}

	#div51 {
		background-color: red;

		position: relative;

		top: 80px;
		left:120px;
	}

	#div52 {
		background-color: green;
	}

	#div53 {
		background-color: orange;
	}
  </style>
 </head>
 <body>

<div id="div51">AAAAAAAAAAAAAAA</div>

<div id="div52">BBBBBBBBBBBBBBB</div>

<div id="div53">CCCCCCCCCCCCCCC</div>
 </body>
</html>

在这里插入图片描述
8、案例 图文混排案例
** 图片和文字在一起显示

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
		#imgtex11 {
		
			width: 500px;
			height: 400px;

			border:2px dashed orange;
		}

		#img11 {
			/*float:left;*/
			float:right;
		}

		#tex11 {
			color: green;
		}
  </style>
 </head>
 <body>

<div id="imgtex11">
	<div id="img11"><img src="aa.jpg" width="250" height="200"/></div>
	<div id="tex11">奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
	标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
	标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
	标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
	标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
	标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
	标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
	标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
	标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知,
	标格亦资于</div>
</div>
 </body>
</html>

在这里插入图片描述
9、案例 图像签名
** 在图片上面显示文字

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	#tex21 {
		position: absolute;

		top: 50px;
		left: 30px;

		color: red;
	}
  </style>
 </head>
 <body>

	
	<div id="img21"><img src="aa.jpg" width="450" height="350"/></div>
	<div id="tex21">这是很多美女</div>
 </body>
</html>

在这里插入图片描述

Javascript

1、javascript的简介
在这里插入图片描述
在这里插入图片描述
2、js和html的结合方式(两种)
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">
		
		//向页面弹出一个框,显示内容
		alert("aaaa");

	</script>

 </body>
</html>

在这里插入图片描述
1.js

//单行注释
/*多行注释*/
alert("bbbbbb");
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript" src="1.js">

		alert("ccccccc");
	</script>

 </body>
</html>

ccccccc不会弹出来
3、js的原始类型和声明变量

在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript" >

		//定义一个字符串
		var str = "123";
		//alert(str);
		//alert(typeof(str))

		//定义数字
		var mm = 123;
		//alert(mm);
		//alert(typeof(mm));

		//定义boolean类型
		var flag = true;
		//alert(flag);
		alert(typeof(flag));
	</script>

 </body>
</html>

在这里插入图片描述
4、js的语句
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">
		
		//if语句
		var a = 5;
		if(a == 5) {
			alert("5");
		} else {
			alert("6");
		}

		//switch语句
		/*var b = 60;
		switch(b) {
			case 3:
				alert("3");
				break;
			case 6:
				alert("6");
				break;
			default:
				alert("other");
		}*/

		//while循环
		/*var i = 5;
		while(i>1) {
			alert(i);
			i--;
		}*/

		//for循环
		/*for(var mm=0;mm<=3;mm++) {
			alert(mm);
		}*/
	</script>

 </body>
</html>

在这里插入图片描述
5、js的运算符
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">

		/*var j = 123;
		alert(j/1000*1000);  */
		//  j/1000*1000    在java里面得到结果是 0 
		// 在js里面不区分整数和小数,123/1000=0.123 * 1000 = 123

		//字符串的操作
		var str = "abc";   //提示NaN:表示不是一个数字
		//alert(str+1);   //在java里面操作的结果是 4561 ,在js里面还是 4561
		alert(str-1);    //相减时候,执行减法的运算
	</script>

 </body>
</html>

在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">
		
		//boolean操作
		var flag = true;  //等于1
		//alert(flag+1);

		var flag1 = false; //等于0
		//alert(flag1+1);
		
		// == 和 === 区别
		/*var aa = "5";
		if(aa === "5") {
			alert("5");
		} else {
			alert("other");
		}*/


		document.write("aaaaaaaaaa");
		document.write("<br/>");
		document.write("bbbbbbbbbbbbb");
		document.write("<hr/>");
	</script>

 </body>
</html>

在这里插入图片描述
6、实现99乘法表(输出到页面上)
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">
		
		document.write("<table border='1' bordercolor='blue'>");
		//循环行 9
		for(var i=1;i<=9;i++) {

			document.write("<tr>");
			//循环列
			for(var j=1;j<=i;j++) {
				document.write("<td>");
				//运算
				document.write(j+"*"+i+"="+i*j);
				document.write("</td>");
			}
			//document.write("<br/>");
			document.write("</tr>");
		}
		document.write("</table>");
	</script>

 </body>
</html>

在这里插入图片描述
7、js的数组
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">

		//定义数组第一种方式
		var arr = [1,2,"3"];
		//alert(arr);
		alert("length:  "+arr.length);

		//第二种方式定义数组
		var arr1 = new Array(3);
		arr1[0] = "a";
		arr1[1] = "b";
		arr1[2] = "c";

		//alert(arr1);

		//第三种方式定义数组
		var arr2 = new Array(6,7,8);
		//alert(arr2);

		var arr3 = new Array(5);
		alert("arr3: "+arr3.length);

	</script>

 </body>
</html>

在这里插入图片描述
在这里插入图片描述
8、js的函数

在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">
		
		//使用第一种方式创建函数
		function test() {
			alert("qqqqq");
		}

		//调用方法
		//test();

		//定义一个有参数的方法  实现两个数的相加
		function add1(a,b) {
			var sum = a+b;
			alert(sum);		
		}

		//add1(2,3);

		//有返回值的效果
		function add2(a,b,c) {
			var sum1 = a+b+c;
			return sum1;
		}
		alert(add2(3,4,5));
		
	</script>

 </body>
</html>

在这里插入图片描述
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">

		//第二种方式创建函数
		var add3 = function(m,n) {
			alert(m+n);
		}

		//调用方法
		//add3(5,6);

		//第三种方式创建函数
		var canshu = "x,y";
		var fangfati = "var sum;sum=x+y;return sum;";

		var add4 = new Function(canshu,fangfati);
		alert(add4(3,5));
	</script>

 </body>
</html>

在这里插入图片描述

9、js的全局变量和局部变量
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">
		var aa = 10;

		alert("在方法外部调用aa: "+aa);
		//定义一个方法
		function test1() {
			alert("在方法内部调用aa: "+aa);
		}

		test1();
		
	</script>

	<script type="text/javascript">
		alert("在另外一个script标签使用: "+aa);
	</script>

 </body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">

		function test11() {
			var nn = 10;
			alert("在方法内部: "+nn);
		}

		test11();

		alert("方法外部: "+nn);
	</script>

 </body>
</html>

在这里插入图片描述
在这里插入图片描述
10、script标签放在的位置
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
   <script type="text/javascript">

		//alert("aaaa");
		var input1 = document.getElementById("nameid");
		alert(input1.value);  //SCRIPT5007: 无法获取属性“value”的值: 对象为 null 或未定义 
	</script>
 

 </head>
 <body>

	<input type="text" name="name" id="nameid" value="aaa"/>

 </body>


</html>


在这里插入图片描述

11、js的重载
在这里插入图片描述

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<script type="text/javascript">

		function add11(a,b) {
			return a+b;
		}

		function add11(a,b,c) {
			return a+b+c;
		}

		function add11(a,b,c,d) {
			return a+b+c+d;
		}

		alert(add11(2,2));   //NaN
		alert(add11(2,2,3)); //NaN
		alert(add11(2,2,4,5)); // 13
	</script>

 </body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值