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

今日内容概要:

Javaweb崔希凡---day2---CSS---Javascript_第1张图片
Javaweb崔希凡---day2---CSS---Javascript_第2张图片

CSS

1、css的简介
Javaweb崔希凡---day2---CSS---Javascript_第3张图片
2、css和html的结合方式(四种结合方式)
Javaweb崔希凡---day2---CSS---Javascript_第4张图片
代码:


 
  HTML示例
  
 
 

天之道,损有余而补不足,是故虚胜实,不足胜有余。
变化之由表,死生之兆彰,不谋而遗迹自同,

在这里插入图片描述


 
  HTML示例

  

 
 

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

在这里插入图片描述

/*
   div
*/

div {

	background-color: gray;
	color: black;
}

 
  HTML示例
  
 
 

变化之由表,死生之兆彰,不谋而遗迹自同,

在这里插入图片描述


 
  HTML示例

  

 
 

	
变化之由表,死生之兆彰,不谋而遗迹自同,

在这里插入图片描述
3、css的基本选择器(三种)
在这里插入图片描述
Javaweb崔希凡---day2---CSS---Javascript_第5张图片
Javaweb崔希凡---day2---CSS---Javascript_第6张图片


 
  HTML示例
  
 
 

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

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

在这里插入图片描述
Javaweb崔希凡---day2---CSS---Javascript_第7张图片


 
  HTML示例
  
 
 

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

变化之由表aaaaaaaaaa

在这里插入图片描述
Javaweb崔希凡---day2---CSS---Javascript_第8张图片


 
  HTML示例
  
 
 

故动则有成,犹鬼神幽赞,而命世奇杰,时时间出焉

aaaaaaaaaaaaaaaaaaaaaa

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


 
  HTML示例
  
 
 

故动则有成,犹鬼神幽赞,而命世奇杰,时时间出焉
aaaaaaaaaaaaaaaaaaaaaa

在这里插入图片描述
4、css的扩展选择器
Javaweb崔希凡---day2---CSS---Javascript_第9张图片
Javaweb崔希凡---day2---CSS---Javascript_第10张图片


 
  HTML示例
  
 
 

CSS的扩展选择器

WWWWWWWWWWWWWWWWWWWWWW

在这里插入图片描述
Javaweb崔希凡---day2---CSS---Javascript_第11张图片


 
  HTML示例
  
 
 
	
	
QQQQQQQQQQQQQQQQQ

AAAAAAAAAAAAAAAAAAAAAAA

在这里插入图片描述

Javaweb崔希凡---day2---CSS---Javascript_第12张图片


 
  HTML示例
  
 
 

CSS概述和与HTML的结合方式超链接一

 


在这里插入图片描述

5、css的盒子模型
Javaweb崔希凡---day2---CSS---Javascript_第13张图片


 
  HTML示例}
  
 
 

AAAAAAAAAAAAAAA
BBBBBBBBBBBBBBB
CCCCCCCCCCCCCCC

Javaweb崔希凡---day2---CSS---Javascript_第14张图片


 
  HTML示例
  
 
 

AAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBBBBBBBBBBBBB
CCCCCCCCCCCCCCC

Javaweb崔希凡---day2---CSS---Javascript_第15张图片


 
  HTML示例
  
 
 

AAAAAAAAAAAAAAA
BBBBBBBBBBBBBBBBBBBBBBBBBBBB
CCCCCCCCCCCCCCC

Javaweb崔希凡---day2---CSS---Javascript_第16张图片
6、css的布局的漂浮
在这里插入图片描述


 
  HTML示例
  
 
 

AAAAAAAAAAAAAAA
BBBBBBBBBBBBBBB
CCCCCCCCCCCCCCC

Javaweb崔希凡---day2---CSS---Javascript_第17张图片
7、css的布局的定位
Javaweb崔希凡---day2---CSS---Javascript_第18张图片


 
  HTML示例
  
 
 

AAAAAAAAAAAAAAA
BBBBBBBBBBBBBBB
CCCCCCCCCCCCCCC

Javaweb崔希凡---day2---CSS---Javascript_第19张图片


 
  HTML示例
  
 
 

AAAAAAAAAAAAAAA
BBBBBBBBBBBBBBB
CCCCCCCCCCCCCCC

Javaweb崔希凡---day2---CSS---Javascript_第20张图片
8、案例 图文混排案例
** 图片和文字在一起显示


 
  HTML示例
  
 
 

奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知, 标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知, 标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知, 标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知, 标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知, 标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知, 标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知, 标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知, 标格亦资于奉生之始矣。假若天机迅发,妙识玄通,成谋虽属乎生知, 标格亦资于

Javaweb崔希凡---day2---CSS---Javascript_第21张图片
9、案例 图像签名
** 在图片上面显示文字


 
  HTML示例
  
 
 

	
	
这是很多美女

Javaweb崔希凡---day2---CSS---Javascript_第22张图片

Javascript

1、javascript的简介
Javaweb崔希凡---day2---CSS---Javascript_第23张图片
Javaweb崔希凡---day2---CSS---Javascript_第24张图片
2、js和html的结合方式(两种)
Javaweb崔希凡---day2---CSS---Javascript_第25张图片


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第26张图片
1.js

//单行注释
/*多行注释*/
alert("bbbbbb");

 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第27张图片ccccccc不会弹出来
3、js的原始类型和声明变量

Javaweb崔希凡---day2---CSS---Javascript_第28张图片


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第29张图片
4、js的语句
Javaweb崔希凡---day2---CSS---Javascript_第30张图片


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第31张图片
5、js的运算符
Javaweb崔希凡---day2---CSS---Javascript_第32张图片


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第33张图片


 
  HTML示例
  
 
 
	

 


在这里插入图片描述
6、实现99乘法表(输出到页面上)
Javaweb崔希凡---day2---CSS---Javascript_第34张图片


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第35张图片
7、js的数组
Javaweb崔希凡---day2---CSS---Javascript_第36张图片


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第37张图片
Javaweb崔希凡---day2---CSS---Javascript_第38张图片
8、js的函数

Javaweb崔希凡---day2---CSS---Javascript_第39张图片


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第40张图片
Javaweb崔希凡---day2---CSS---Javascript_第41张图片


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第42张图片

9、js的全局变量和局部变量
Javaweb崔希凡---day2---CSS---Javascript_第43张图片


 
  HTML示例
  
 
 
	

	

 


Javaweb崔希凡---day2---CSS---Javascript_第44张图片
Javaweb崔希凡---day2---CSS---Javascript_第45张图片
Javaweb崔希凡---day2---CSS---Javascript_第46张图片


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第47张图片
在这里插入图片描述
10、script标签放在的位置
Javaweb崔希凡---day2---CSS---Javascript_第48张图片


 
  HTML示例
  
   
 

 
 

	

 





在这里插入图片描述

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


 
  HTML示例
  
 
 
	

 


Javaweb崔希凡---day2---CSS---Javascript_第49张图片
Javaweb崔希凡---day2---CSS---Javascript_第50张图片
Javaweb崔希凡---day2---CSS---Javascript_第51张图片

你可能感兴趣的:(javaweb)