第十章、CSS的tansform\transtition\animation属性
Transform：对元素进行变形； 变换
Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。 过度
Animation：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键贞。 动画
Transition与Animation:
transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值，从而达到一种动画的效果。
（1）transform（变形）：使导航栏稍微倾斜（旋转），使图片在访问者的鼠标经过时它放大两倍。
很多浏览器不支持，需要给供应商的前缀
-0-transform: rotate(10deg);
-ms- transform: rotate(10deg);
1)rotate（旋转）: 提供一个0-360之间的读数值
transform: rotate(旋转的度数)；
例如：transform: rotate(10deg); 延顺时针旋转10度
2)scale（缩放）：
将图片变得更大或者更小
transform: scale(需要放大的位置); 元素及其里面所有项目都会以这个数值进行缩放
1、transform: scale(3) 将宽高同时放大3倍
2、transform: scale(3,2) 相当于 transform: scaleX(3) transform: scaleY(2)
将宽放大3倍，将高放大2倍
让图片实现翻转
transform: scale(-1,1);
3）ranslate （将一个现有的元素从它现在的位置向左或向右或向上移动一段距离）注：会在原先的位置留下一个空白格
transform:translateX(1px); 左右移动
transform:translateY(2px); 上下移动
4）skew(倾斜)
transform: skew(0,45deg);
5)origin(变换中心点）
transform-origin:left top;
（2）Transition
transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
例如：
.trans {
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
.trans:hover {
background-color: #486AAA;
color: #fff;
}
（3）Animation
创建动画的两个步奏：1、定义动画 2、 将动画应用到元素上
例子
@-webkit-keyframes resize {
0% {
padding: 0;
}
50% {
padding: 0 20px;
background-color:rgba(190, 206, 235, 0.2);
}
100% {
padding: 0 100px;
background-color:rgba(190, 206, 235, 0.9);
}
}
.anim_box:hover {
-webkit-animation-name: resize;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
十一章、表单
（一）、创建表单
<form method="post" action="show-data.php>
<fieldset>
<legend></legend>
</fieldset>
</form>
action: 提交表单时服务器上对数据进行处理的URL脚本
method:get/post 大多情况下用post
<fieldset></fieldset>:用于将表单的内容组织在一起
<legend></legend>：创建一个标题，legend使用前必须有fieldset
注：post和get的区别
get:表单中的数据会显示在浏览器的地址栏里
post：表单中的数据不会显示在地址栏里，可以向服务器发送更多的数据。如果需要在数据库中保存、添加和删除数据，就应该选择post。
<lable for=""></lable>描述性词语
2、为表单组件添加说明标签
<lable for=""></lable> 描述表单字段用途的文本
for的值与对应的表单字段id的值要一致，，这样可以将该标签与该字段显示关联起来
注：
要让标签与表单字段对齐，就要在css里面添加vertical-align: top；属性
1、文本域
1）、创建文本框
<label for="idlabel">Last Name:</lable>
<input type="text" name="" value="default" placeholder="hinttext" required="required" autofocus="autofocus" size="n" maxlength="n" />
注：placeholder="hinttext" 这个字段最初显示的数据，获得焦点时会消失，且不会被发送到服务器
value="default" 最初显示的数据，在获得焦点时不会消失，且会被发送到服务器
required="required" 仅在这个字段有值的情况下才能提交表单
autofocus="autofocus"：第一个拥有此属性的表单控件，会默认获得焦点
size="n" 设置文本的宽度
maxlength="n" 允许输入的最大字符数
提示：如果添加 autocompplete="off"属性，则浏览器不会保存用户输入的信息
2）、创建密码框
例：<input type="password" id="password" name="password"/>
required="required" 仅在这个字段有值的情况下才能提交表单
autofocus="autofocus"：第一个拥有此属性的表单控件，会默认获得焦点
size="n" 设置文本的宽度
maxlength="n" 允许输入的最大字符数
3）、创建电子邮件框、搜索框、电话框和URL框
电子邮件框：<input type="email id="email" name="email" />
电话框： <input type="tel" id="phone" name="phone" placeholder="xxx-xxx-xxx-xxxx" pattern="\{d3}-\d{3}-\d{4}" />
pattern:用于定制的验证规则，它使用正则表达式对用户输入的内容进行限制
URL框：<input type="url" id="website" name="website" placeholder="http://www.example.com
/>
搜索框：
<form method="get" action="show-data.php>
<label for="search">search</label>
<input type="search" id="search" name="search" placeholder="e.g., a book or magazine" />
</form>
注意：搜索框的提交方式是get
4）、创建文本区域
<textarea id="bio" name="bio" cols="40" rows="5" ></textarea>
设置：textarea{ resize: none; }，访问者将无法拖动文本框
2、复选框和单选按钮
1）、创建单选按钮
<input type="radio" id="gender-male" name="gender" />
<label for="gender-male" >Male</label>
2）、创建复选框
<input type="checkbox" id ="" name="" value="" check="checked">
check="checked" 默认选中
3、下拉菜单
创建选择框
<select id="state " name="state">
<option value="AL">Alabama</option>
<option value="AL">Alabama</option>
</select>
注：如果允许访问者选择一个以上的菜单选项，则添加multiple="multiple"
指定默认选项 selected="selected"
4、按钮
1）文本类型的提交按钮
<input type="submit" value="Create Profile" class="btn" />
2）图片类型的提交按钮
<input type="image" src="" width="" height="" />
3）创建结合文本和图像的提交按钮
<button type="submit" class="btn">
<img src="" width="" height="" /> Create Profile</button>
注：button元素的内容提供更大的灵活性。
4）重置按钮
<input type="reset" />
或者：<button type="reset">Reset</button>
5、文件
让访问者上传文件
<form method="post" action="show-data.php" enctype="multipart/form-data">
<label for="picture">Picture:</label>
<input type="file" id="picture" name="picture" />
<p class="instructions">Maxinum size of 700k.JPG,GIF or PNG.</p>
</form>
（二）、修饰表单
工具：属性选择器
input [ type="text" ] {
" align="left">}
11、创建隐藏字段
12、禁用表单元素的方法
在表单元素的开始标签后输入disabled="disabled"
13、利用伪类为表单设置样式
常用的伪类：
：focus 获得焦点字段
：checked 选中的单选按钮或复选框
：disabled
: enable
: required
:optional 与required相反
：invalid 其值与pattern属性给出的模式不匹配的字段
例如：
input:focus,
textarea:focus{
}