发表于： 2018-05-22 22:40:20
1 632
今天完成的事情：
学习了transition（可以为元素添加样式更改的浮动化，使用户的体验更加好）
浏览器内核（有的老版本内核需要做兼容操作，才能使用。）
动画animation/@keyframes规则（作用于transition,html的动画。）
学习了常用的几种布局方式
明天计划的事情：
进行任务8的学习
把页面一布局完
遇到的问题：
今天一直在看与任务8相关的资料
收获：
了解几种常见的布局方式：
1.固定布局
<head>里把<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">加好，然后根据设计稿设定相应的宽度即可，其他地方类似于pc端。 优点 思路沿用pc端，上手比较快 缺点
大屏手机显示网页比较宽，而固定布局宽度参照永远是固定的宽度（设计稿的大小），导致左右两边会有空白。手机横屏的时候两边空白更亮。
2.流动布局
方法
适用百分比(%)做单位。
优点 能更很好的适应各个屏幕分辨率的手机。 缺点
不够灵活，添加元素时，需要更改其他元素的值。
3.浮动布局
float+clearfix(清除浮动)
4.定位布局
利用position+四个方位的具体值（top/left/right/bottom）相互配合，实现起来也比较容易 优点
实现简单，在移动端中，定位很常用，尤其是弹窗。
缺点
移动端中频繁的使用定位，会出现一些莫名的bug;
fixed+input在ios上存在bug,会出现使用fixed布局的元素乱掉。在android手机上当input框获取焦点时，换气键盘，会出现定位的元素被抬升至手机键盘的上方。（了解）
5.混合布局
所谓混合布局，就是把所有学到的知识灵活运用在布局中。例如：rem+百分比(流动布局) flex+rem等 优点 布局灵活，集合其他布局的优势达到自己的布局要求 缺点
代码有点累赘；代码不统一，维护困难
6.flex布局
7.响应式布局
1.transition
-moz-transition:
-webkit-transition:
-o-stransition:
stransition:height 3s;宽度，字体颜色，背景颜色等等
transition与background一样是复合/简写属性，包含了固定的几个属性。
transition-property（property性能，性质）：规定设置过度效果的CSS属性的名称。
none:没有属性会获得过渡效果
all:所有属性都将获得过渡效果
定义应用过渡效果的CSS属性名称列表，列表以逗号分隔
transition-duration规定完成过渡效果需要多少秒
time：规定完成过度时间的时间（秒/毫秒）
transition-timing-function规定过渡效果的速度曲线。
linnear 规定以相同速度开始至结束的过渡效果
ease 轻松，舒适
ease 慢速开始，然后变快，然后慢速结束
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 慢速开始和结束
transition-delay（delay 延期，耽搁） 规定何时开始切换效果
time指定秒或毫秒之前要等待切换效果开始（秒/毫秒
transition 为元素从一种样式变为另一种样式的过程添加过渡动画
transform 定义旋转缩放效果
visibility 规定元素是否可见
简写方法：transition:property duration timing-function delay
2.浏览器内核：
-moz-transition:
-webkit-transition:
-o-stransition:
前缀表示的是浏览器内核识别码
浏览器内核不同对网页的解析也不同。渲染的效果也不同。
IE : Trident内核 私有属性前缀：-ms-
Safari和Google ：WebKit内核代表作品Safari、chromewebkit是一个开源项目 私有前缀：-webkit-
firefox ：Gecko内核 私有前缀 -moz-
Opera : presto内核 私有前缀-o-
Animation:为元素添加动画。
animation-nanme
为@keyframes动画规定名称。
none 无动画效果
keyframe name 规定需要绑定到选择器的keyframe的名称。
animaition-duration
定义动画完成一个周期需要的时间，以秒或毫秒计
time 规定完成动画所花费的时间。
animation-timing-function
规定动画的速度曲线
linnear 规定以相同速度开始至结束的过渡效果
ease 轻松，舒适
ease 慢速开始，然后变快，然后慢速结束
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 慢速开始和结束
animation-delay 延迟动作
animation-iteration-count规定动画循环播放次数
number定义播放动画播放次数的数值
infinite规定动画无限次播放
animation-direction 定义是否应该轮流反向播放动画片。
normal 动画正常播放
alternate 动画应该轮流反向播放
简写方法: annimation:name duration timiing-function delay iteration-count direction
使用@keyframes规则，你可以创建动画
必须让transition一次又一次的触发事件才能让transition的动画生效
进度：task8
任务开始时间：2018.5.22
预计结束时间：2018.5.27
是否有延期风险：无
禅道：http://task.jnshu.com/zentao/project-task-687.html
返回列表
评论