发表于: 2018-07-15 23:51:27
2 620
今天完成的事情:
完成任务7开始任务8
1遇到新的知识点图片轮播
将要展示图片横排放在一个图片容器里面
在图片容器外再加一个展示容器,展示容器大小为图片大小
给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值
注意事项
动画效果分为切换和停留两部分
自定义动画阶段与图片数量相关
动画各阶段偏移值与图片大小相关
- 2总结一下常见的页面布局
左列定宽,右列自适应
利用float+margin实现
.left{float:left;width:100px;}
.right{margin-left:100px;}
使用table实现
.parent{display:table;table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}
使用flex实现
.parent{display:flex;}
.left{width:100px;}
.right{flex:1;}
利用右侧容器的flex:1,均分了剩余的宽度,也实现了同样的效果。
而align-items 默认值为stretch,故二者高度相等
一列不定宽,一列自适应
利用float+overflow实现
.left{float:left;}
.right{overflow:hidden;}
利用table实现
.parent{display:table;table-layout:fixed;width:100%;}
.left{width:0.1%;}
.left,.right{display:table-cell;}
利用flex实现
.parent{display:flex;}
.right{flex:1;}
两侧定宽,中栏自适应
利用float+margin实现
.left{width:100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}
利用table实现
.parent{width:100%;display:table;table-layout:fixed}
.left,.center,.right{display:table-cell;}
.left{width:100px;}
.right{width:100px;}
利用flex实现
.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}
响应式布局
meta标签的使用
设置布局宽度等于设备宽度,布局viewport等于度量viewport
<meta name="viewport" content="width=device-width,initial-scale=1">
明天计划的事情:
继续任务8
继续思索页面布局
媒体查询
遇到的问题:
主要是自适应页面,有时还是会出现问题,属性运用的不够准确。
轮播图片还不熟悉,以后还要注意页面跳转
收获:
Get新的知识点
自适应页面还是需要多练习
评论