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.w2网页中,不设置最大div的高度,可以使得缩小时内容自动往下挤
4.解决了上周的相对某元素定位的问题;
week1未解决问题:
5.text—align与position失效?