【Summary】——>Web组·Week2

2017年四月十六日，在工作室的第二周正式结束

【Week2】

主要内容：

1.加强了对网页布局，定位的理解，系统的了解到居中布局在不同情况下的处理方式；

2.开始进入CSS3的学习，着重放在CSS3的动画、转换、过渡等动态效果上；

3.完成了对一个网页的模仿编写，并在其基础上加上了不同的CSS3效果；

知识梳理：

1.2D、3D转换--------使元素改变形状，尺寸和位置的一种效果

transform：

【translate（X，Y），移动】【rotate（Xdeg）,旋转】【scale（X，Y），宽度，长度缩放】【skew（Xdeg，Ydeg），围绕x，y的旋转角度】

2.CSS3效果需要兼容不同浏览器：

-webkit-（谷歌） -ms-（IE） -o-（opera） -moz-（火狐）

3.过渡效果：transition

4.CSS3动画：

div{animation：名称 时间；}

@keyframs 名称{

设计动画的效果：0%，50%，100%...

}

5.多列：可通过多列设计瀑布流；

6.渐变：linear-gradient(to right，color1，color2/rgba（225,225,0,0.4透明度）)

7.边框：圆角，阴影，边界图片

8.图片：缩略图，缩略图作为链接（嵌套到链接a标签中，加上hover的设置），响应式图片（自动适配各尺寸的屏幕），图片模块框（+JS）

9.按钮：颜色，大小，圆角，边框色，鼠标悬停，动画（下移，滑动，，，）

10.各类布局小技巧：垂直居中，内容区块自动向下排列

收获：

1.内容的溢出方式用overflow属性来控制；

2.背景图片用backgroud-size属性控制；

3.ｗ２网页中，不设置最大ｄｉｖ的高度，可以使得缩小时内容自动往下挤

4.解决了上周的相对某元素定位的问题；

week1未解决问题：

5.text—align与position失效？