我的前端学习5

CSS的表格：<table border="1">

table属性：

--tr标签代表一行

--td标签代表一列

rowspan--合并行

colspan--合并列

 

 

CSS的长表格：

thead代表表头--跟的是th作为表头

tbody代表表身

tfoot代表表尾

 

 

CSS的表单： <form> 

如何使用表单来提交数据

1.要想提交数据，必须的给表单中的元素添加name属性

2.必须指定提交的目的地。通过在form的开始标签中添加action属性

 

表单属性：

1.输入框type = text的时候，就是输入框

2.密码框type = password的时候，就是密码框

3.单选框type = radio，就是单选框，必须设置name属性值

4.多选框type = checkbox，就是多选框，必须设置name和value属性值

5.下拉框使用select标签声明一个下拉框， 使用option来设置下拉框中的内容，注意：也必须设置name和value属性，但是要记住name属性必须在select标签中进行设置才能够进行提交

6.多行文本框使用textarea来声明一个多行文本框

7.提交按钮，提交按钮必须与action属性值成对出现

readonly指定input元素只支持读，不支持写

disabled指定禁用Input元素，不支持读写

autofocus鼠标自动聚焦

 

 

CSS过渡：

transition： 简写属性，用于在一个属性中设置四个过渡属性。

1.transition-duration： 设置过渡的持续时间

2.transition-timing-function：设置过渡的时序函数

transition-timing-function可选值

ease--默认值，慢速开始，先加速，后减速

linear--匀速运动

ease-in -- 慢速开始，一直加速

ease-out--快速开始，一直减速

ease-in-out--先加速，后减速

steps()--在持续时间内，分为几步完成还可以设置第二个参数

end--默认值，从时间段的最后开始过渡

start---从时间的最开头开始过渡

3.transition-delay：设置过渡的延时

transition-delay可选值：s ，ms

4.transition-property：设置需要过渡的属性

如果需要过渡的属性有多个，可以使用,隔开

如果不确定需要过渡的属性有多少个，可以使用all

 

 

CSS动画：

@keyframes：规定动画。

1. animation-name：

指定关键帧的名字

2.animation-duration

指定动画的持续时间

可选值：s，ms

3.animation-timing-function

指定动画的时序函数，规则跟过渡一致

4.animation-delay

指定动画的延迟时间

5.animation-iteration-count

指定动画的执行次数

可选值： N，infinite--执行无数次

6.animation-direction

指定动画执行的方向

可选值：

normal--默认值，从动画的开始位置到结束位置

reverse--从动画的结束位置到开始位置

alternate--从动画的开始位置到结束位置，再从结束位置到开始位置

alternate-reverse--从动画的结束位置到开始位置，再从开始位置到结束位置

7.animation-play-state

指定动画的执行状态

可选值

running--动画处于运行状态

paused--动画处于暂停状态

8.animation-fill-mode

指定动画填充模式

可选值

none---默认值，动画没有填充效果

forwards---动画停止在动画结束位置

backwards--动画一开始就处于运行状态

both---既满足forwards的特点，也满足backwards的特点

9.动画的简写属性

animation:支持上面的所有设置， 注意：如果设置了两个时间，那么第一个一定是动画持续时间，第二个一定是动画延迟时间

 

CSS变形：

变形：指元素的形状或者位置发生改变

变形中的平移

--默认根据中心来进行平移

--变形不会影响网页的布局

--transform在网页中只能存在一个，如果说有多个，后面一个会覆盖前面一个

平移的可选值

x轴平移：transform:translateX()

值为正值，向右移动；值为负值，向左移动

值为百分比，是相对于自身宽度来说的

y轴平移：transform:translateY()

正值，向下移动；负值，向上移动

z轴平移：transform:translateZ()

值为正值，元素跟用户的距离会拉近，看起来会变大

值为负值，元素跟用用户的距离会拉远，看起来会变小

 

 

CSS旋转：

旋转：

绕x轴旋转--rotateX()

绕y轴旋转--rotateY()

绕z轴旋转--rotateZ()

旋转的时候，小括号中写的是度数，所以必须加deg

1turn代表一转，一转就是360deg

 

CSS缩放：

可选值

1.transform:scaleX()

沿着x轴进行缩放

2.transform:scaleY()

沿着y轴进行缩放

3.transform:scale

既x轴可以缩放，y轴也可以缩放