表单和变形

Posted 2021-01-05 shangibo

#表单

- form:表单的标签

- action:表示提交地址

- method:表示提交方式

- get:表示会在提交地址后显示输入的内容

- post 不会在提交地址后显示输入的内容

- input:输入框（form的子元素.是空元素.自闭和元素）

- type的取值

- 1 text(文本)

- 2 password(密码框)

- 3 button(普通的按钮,只有按钮的样式,以后的j s要学,button作为标签名称，则表示该元素

是具有提交功能的按钮。

- 4 submit ( 表示提交按钮 )

- 5 reset ( 表示重置按钮)

# 单选框

1.type取值为radio

2.name的值要一致

3.给定value属性值

注：2和3一般是后台数据库管理员（DBA）给的。

#多选框

多选框：

- type取值为checkbox

- name的取值要一致,才会提交正确的内容

# < label>与input的关联

label标签实现元素内容与输入框（input)相关联

注:他们两个都是行内标签

实施步骤：

1. 在input中设置id

2. label中for属性值与input中id值一致

为了实现注册表单的对齐方式,有以下方法

1. 可以把label标签display设置为inline-block;

2. 给固定宽度，再设置文本对齐（text-align:left/center/right）

- 设置默认值使用value属性,再写checked就是默认的值

- 设置提示信息使用 placeholder属性

- required表示是必填的属性,如果没有添加任何内容，则会提示“请填写此字段”（不同浏览器样式不同）

- max length 设置输入内容的个数

#下拉菜单

- select下拉列表（下拉菜单）,他是一个行内标签

- name属性，是对于后面的存储关键词（一般是DBA提供）

- option表示可选项

- value的值是提交到后台选中的数据

#其他

- input: : -webkit-input-placeholder{color:blue;},这是设置输入框提示信息样式的,-webkit-是前缀

- 去除焦点框，通常用于搜索框, outline: none;

# transform(变形)

- scale函数来设置缩放的，默认值是1.

1. 可以2个参数也可以1个参数

2. 当给1个参数时，表示X Y轴缩放比例一致

3. 给2个参数时，第1参数代表X轴的缩放,第2个值代表Y轴的缩放

- transform-origin设置缩放的原点

第1个值是水平方向

第2个值是垂直方向

- transform:rotate()设置旋转角度

1.rotateZ:中心点（默认值）

2.rotateX：X轴方向旋转

3. rotateY：Y轴方向旋转

45deg表示顺时针旋转45度

-45deg表示逆时针旋转45度

- transform:skew()设置倾斜角度

1. 45deg表示逆时针旋转45度

2. 45deg表示顺时针旋转45度

- transform: translate(100px,10px); 设置区块移动的偏移量

1. 第1个参数是X轴方向

2. 第2个参数是Y轴方向

3. 像素值正、负均可

-transform的缩写,每个函数之间的空格隔开,transform: rotate() scale() skew() ;

- transition:表示过渡,他是一个值变化到另一个值的过程,他们的属性值要相同

- transition-delay 表示一个值变化完,下个值再变化的拖延

- 边框从中心向两边进行过渡撑满整个包含块

1、设置子元素的位置，父级元素水平居中位置。

即nav{left:50%;}

2、在父级元素被hover的时候子元素的位置要与父元素左边框对齐

即 footer:hover>nav{left:0;}

注：1和2主要实现的是边框从水平中心点开始向左侧进行过渡。

3、设置子元素的宽为0；

即nav{width:0;}

4、在父级元素被hover的时候子元素的宽为100%

即 footer:hover>nav{width:100%;}

注：3和4主要实现的是边框从水平中心点开始向右侧进行过渡效果。