发表于: 2018-07-15 23:51:27

2 623


今天完成的事情:

完成任务7开始任务8

1遇到新的知识点图片轮播

    将要展示图片横排放在一个图片容器里面

    在图片容器外再加一个展示容器,展示容器大小为图片大小

    给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值

注意事项

      动画效果分为切换和停留两部分

自定义动画阶段与图片数量相关

动画各阶段偏移值与图片大小相关

  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{width100px;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新的知识点

自适应页面还是需要多练习




返回列表 返回列表
评论

    分享到