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

最新推荐文章于 2019-02-19 22:54:57 发布
最新推荐文章于 2019-02-19 22:54:57 发布
阅读量596 收藏 1
点赞数 2
分类专栏： javaweb 文章标签： javaweb css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xw_Summer/article/details/86678650
版权

今日内容概要：

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

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>

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

Carmen_W
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb——HTML，CSS，JS
sduihoal的博客
12-21 378
一、HTML 超文本标记语言(HTML)，是一种用于创建网页的标准标记语言。你可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 一个完整的html标签的组成： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>你好</title> </head> <body> 。。。要写的的内容 </body&
day08-HTTP&Tomcat&Servlet
最新发布
10-28
静态资源包括 HTML、CSS、JavaScript、图片等，负责页面展现。动态资源包括 Servlet、JSP 等，负责逻辑处理。 三、数据库 数据库负责存储数据。 四、HTTP 协议 概念：HyperText Transfer Protocol，超文本传输...
传智播客崔希凡javaweb笔记完整版
11-18
这个资源是传智播客老师javaweb的真实笔记,和课堂上的是一样的
传智播客崔希凡JavaWeb-day10-java web之requestrespone-全部资料
12-08
史上最全的JavaWeb视频教程相关资料，如果你听过传智播客崔希凡老师的视频，但苦于找不到相对应的视频资料，这就是了，马上下载吧！
传智播客崔希凡JavaWeb-day16-mysql第二天-全部资料
12-08
史上最全的JavaWeb视频教程相关资料，如果你听过传智播客崔希凡老师的视频，但苦于找不到相对应的视频资料，这就是了，马上下载吧！
javaweb 崔希凡全套笔记
08-12
javaweb javaEE崔希凡全套笔记 总共28天，每一天的详细内容都在其中，
崔希凡javaweb28天笔记
04-04
传智播客 黑马程序员崔希凡java web28天笔记包含JDBC在线支付文件上传
JavaWeb新版教程-html&CSS-L和CSS-CSS介绍.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-CSS介绍.avi
JavaWeb新版教程-html&CSS-L和CSS-CSS语法介绍.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-CSS语法介绍.avi
JavaWeb新版教程-html&CSS-L和CSS-css常用样式.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-css常用样式.avi
崔希凡JavaWeb笔记day28（JavaWeb完毕）
11-16
JavaWeb笔记更新完毕
崔希凡Javaweb视频教程_day24~day26-资料源码，完整版（网上书城或bookstore）
07-13
崔希凡Javaweb视频教程_day24~day26-资料源码，完整版
JavaWeb新版教程-html&CSS-L和CSS-引课.mp4
05-18
JavaWeb新版教程-html&CSS-L和CSS-引课.mp4
崔希凡JavaWeb笔记day28（JavaWeb完毕）(期末，暂停更新)（2016年11月16日12:24:03）
阿滔-juliantem
11-16 3060
    终于在今天把JavaWeb课程学完，下一个目标就是框架了。不过在此之前，有实验，有备考，所以暂停学习框架以及更新。   下面是最后一day的笔记 链接：http://pan.baidu.com/s/1bo2Rt4F 密码：izwp   链接: https://pan.baidu.com/s/1BxDykFHlZEV7rr0a-hbTOQ 提取码: itm4  2018...
崔希凡javaWeb笔记day01~day03(2016年5月20日20:33:54)
weixin_30919919的博客
05-20 140
为了提高效率，我借助有道云笔记将我的笔记转成了pdf文件，更加方便查看 链接：http://pan.baidu.com/s/1jIEVfMY 密码：7pzl 转载于:https://www.cnblogs.com/huangtao1996/p/5513377.html...
崔希凡JavaWeb视频教程_day20jdbc分页-成品源码资料
叶为正的博客
08-03 2911
效果如上图，mysql数据库中文存入乱码问题，不知道怎么解决。跟着视频写了一遍，已经实现增删改查，包括高级搜索就是多条件查询，分页。源码：https://yunpan.cn/Oc6RE64SnLhShU 访问密码 a3b1最后附上传智播客崔希凡JavaWeb视频教程 https://yunpan.cn/Oc6REIc5LaPwIV 访问密码 64e1
Javaweb崔希凡---day7---Java基础加强
xw_Summer的博客
02-19 392
1、myeclipse的安装和使用 2、debug的调试模式（断点调试模式） package cn.itcast.test; import java.util.Arrays; public class TestDemo3 { /** * @param args */ public static void main(String[] args) { int[] arr1...
java&javaweb学习笔记(汇总)
weixin_34124651的博客
02-09 1020
2019独角兽企业重金招聘Python工程师标准>>> ...
javaweb崔希凡---day1---HTML
xw_Summer的博客
01-27 992
1、html的简介
"JAVA-WEB期末复习题库：Servlet方法执行顺序与配置访问路径
2. 在 web.xml 文件中对一个名为MyServlet的类进行配置，可以访问到MyServlet的是什么选项？答案是(D) /welcome。 本文将分别对以上两道题目进行解析和总结。 1. 当访问一个 Servlet 时，以下 Servlet 中的哪个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值