发表于： 2018-08-01 22:49:27
1 586
今天完成的事情：
1. 完成第三个页面。
明天计划的事情：
继续任务7
遇到的问题：1.宽度变窄后，页面布局太挤，内容太大。通过媒体查询，设置不同CSS引用实现不同分辨率的页面布局2.页面2的正方形框自适应。开始写完再某一个宽度下成正方形，但宽度拉伸后，就变形了。后来通过设置父元素div宽高成一定比例（宽为25%，高度为0，用padding-bottom撑开33%），内有2个div，上div成正方形（宽为100%，高为0，用padding-bottom撑开100%）。3.四个hover小图标开始固定宽高，不能实现自适应，也没两端对齐上放正方形。后来通过display：flex，justify-content:space-between;实现，同时设置背景图宽为20%，高为0，用padding-bottom撑开20%，background-size:cover;实现自适应。收获：1.学会了如何使用媒体查询实现不同分辨率的自适应布局实现2.学会了在DIV有内容的情况下，如何实现自适应，和内容垂直居中的方法.
返回列表
评论