项目

经过俩周的学习，开始做网站了，尽管很多东西还不熟练，但是能够做项目了，还是很开心的

 

* translate定义变换

* 常用变换：translate 平移
* scale 缩放
* rotate定义旋转
* transform可同时进行多种变换，多种变换之间空格分割；
* 例如：transform:scale(1.8,3.0) translatey(0px) rotate();
* transform-origin:定义变换起点。
* 可选值：left/center/right top/center/bottom
* 或者，直接写X,Y轴坐标点。
* 例如：transform:rotate(180deg)；
* transform-origin:right bottom;
* 表示，绕左下角，旋转180。
*/
/*transition属性：定义过度
1.参与过度的属性，可以指定某个CSS属性，也可以all/none
2.过渡开始到过渡完成时间，0.3s
3.过渡的样式函数常选ease
4.过度开始前的延迟时间，可以省略

transition属性可以同时定义多个过渡效果，用逗号分隔
例如：transition： color .3s ease，border .5s linear
*/
/*
CSS3动画的使用
1.声明一个动画（关键帧)
@keyframes name{
form{}
to{}

}
阶段：
每个阶段用百分比表示，从0%到100%
起止必须设置即0%和100%或者form或to
*
* 2.在CSS选择器中，使用Animation动画属性，调用声明好的关键帧*/
@-webkit-keyframes myframe{
from
{
background-color: red;
}
25%{
background-color: green;
}
50%{
background-color: yellow;
}
75%{
background-color: d\;
}
to{background-color: darkmagenta;}
}
.div2{
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: myframe 3s ease .25s Infinite ;

H5新增标签属性

<!-- 【HTML5 新增结构标签】
section：表示页面中的一个内容区块，文档的主体部分，用于将网页或文章划分章节、区块。
article：表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章。
aside：表示article元素内容之外的，与article元素内容相关的辅助信息。(常用于相关推荐啊等)
header：网页或文章的头部。
footer：网页或文章的底部。
nav：表示页面中导航链接的部分
hgroup：用于整个页面或页面中一个内容区块的标题进行组合。
-->

<!--【HTML5表单属性】
Form:指向特定表单id，实现input无需放于form中，即可通过form提交；

Formaction/Formmethod:设置某个submit按钮，提交到指定的action地址，使用指定的method方法。 会覆盖form中的action和method属性

Placeholder:自动提示
Autofocus:自动获得焦点
Autocomplete:自动完成功能

详见 05_表单form.html 第8部分

List：指向指定的datalist的ID，为input绑定一组指定的datalist提示信息(datalist具有和Autocomplete类似的自动筛选完成功能)
>>>写法：<input type="text" list="data1"/>
<datalist id="data1">
<option>1234</option>
<option>2234</option>
<option>3234</option>
</datalist>

 

定位

[绝对定位]
* 使用position；设置元素为绝对定位元素
* 2.定位机制：
* 相对于第一个非static的祖先元素（即使用了relative；absolute/fixed定位的祖先元素）进行定位
* 如果所有祖先元素均未定位，则相对于浏览器左上角定位
* 3.使用absolute的元素，会从文档流中完全删除，原有空间释放不在占有
* [固定定位]
* 1.position：fixed；是一种特殊的绝对定位，父容器无法使用relative锁住
* 2.定位机制：永远相对于浏览器定位
*
* [z-index 属性]
* 1.作用：设置定位元素的z轴层叠顺序
* 2.使用要求：必须是定位元素才能使用。relative/absolute/fixed
* 使用z-inde需要考虑父容器约束，如果父容器为z-index：auto，则子容器的z-index可以不受父容器约束；如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准（在同一父容器的不同子元素，仍可以通过自己的z-index调整层叠关系
* 3.z-index：auto&z-index：0的异同：
* z-index：auto为默认值，与z-index：0处于同一平面
* z-index：auto不会约束子元素的z-index的层次，z-index：，会约束子元素必须与父元素处于同一平面
* 4.z-index相同（处于同一平面的定位元素）的层叠关系：后来者居上*/
.div1{width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
position: relative;
top: ;
/*
绝对定位元素水平居中的方式：
1.left：50%
2.设置margin-left为-width/2：magin-left：-50px；*/
}