XMLday06

常用样式

设置元素的垂直对齐方式

vertical-align:

-top:顶端对齐

-text-top:文字顶端对齐

-bottom：底部对齐

-text-bottom：文字底部

-middle:中部对齐，

（多个元素必须同时设置，才能生效）

-百分比%：按照父元素的行高属性值，来计算对齐的百分比（父元素必须有行高值）

鼠标形状

cursor ：

取值：-default：默认鼠标形状，跟随场景变化自动变化

​ -pointer：手指形状（用于提示用户可点击）

​ -text：焦点形状（工字形）

​ -wait：等待

​ -help：帮助

​ -progress：进度中

​ -url(路径)，auto：文件格式：cur,ico

列表样式

list-style-type:none;取消前置数字或图标

不透明度

opacity:0-1的浮点数，当值为1时，不透明，当值为0时，完全透明，当值为0.5时，半透明

过渡

在元素样式变更时，为变更增加过渡时长，让样式变得更流畅。

格式一：transition:样式 时长s；

格式二：transition：all 时长s;

用于改变元素的形状 大小 位置的一种样式

2D转换transform：-translate(x,y); x和y分别表示移动的横向和纵向像素数量.

​ -rotate(数值deg)；选装数值角度；

​ -scale(x,y); x和y分别表示横向和纵向的缩放倍数；

​ -skew(xdeg,ydeg); 翻转

3D旋转：-transform：-rotatex(数值deg);x轴旋转

​ -rotatey(数值deg);y轴旋转

动画-指的是元素在多个样式之间自动平稳的过度。

定义的格式

@keyframes 自定义名称{

​ 0%{

​ 样式列表；

​ }

​ …

​ 100%{

​ 样式列表；

​ }

}

使用动画的格式：

选择器{

animation:动画名称 时长s;

animation-iteration-cont:数字；/重复执行的次数/

}

响应式

以移动设备优先显示：（当手机设备打开时，像素自动放大）

当屏幕宽度小于500px时，生效的样式：

@media(max-width:500px){

选择器{}

选择器{}

}

当屏幕宽度大于500px时，生效的样式：

@media(min-width:500px){

选择器{}

选择器{}

}

JS简介

JavaScript是一种网页编程技术，用于向网页添加与用户的交互行为的编程技术，

JavaScript是一种基于对象 和事件驱动的解释性脚本语言（由浏览器自上而下解析执行代码，不进行预编）

优点：1.基于对象，内置大量对象

	 2.代码直接嵌入在HTML文件中

​ 3任何的浏览器都可以运行.

​ 4.不进行预编译，逐行解析执行代码

缺点：不具备计算机本地资源的操作能力

用于做什么？

1.客户端逻辑运算

2.网页事件的处理

3.网页表单的合法性验证

4.动画的制作

定义JS代码的三种方式：

1.定义在元素的事件属性中

​ 点我啊

2.定义在网页的script 标签中

3.定义在外部的.js文件中.

js文件中直接编写js代码即可，通过script标签引入

注意：src的引入方式，是将内容嵌入到script标签中，不能再引入JS文件的script标签中再编写js代码，会被引入的内容所覆盖

弹出窗：alert(“要弹出的文字”);