发表于: 2019-06-24 21:31:39
1 921
今天完成了什么:
完成第一页面,检查了大部分bug;
遇到了什么问题:
1,开始直接做底部,跳过了友情链接,看了原稿图用了container和col-lg-12解决了布局问题,然后是文字不对称,给了行高和盒子高度解决该问题,然后在992分辨率下添加了居中属性;
2,文字不对称问题,一开始没想到用什么办法,后来只能一个个试土方法调了下高度使得可以五个一排,暂时不懂原理,不过应该跟弹性盒子有很大关系。
代码是:
3,处理合作企业图片的时候发现阴影边框右边没法显示,之后加了margin,但是发现跟原稿样式不同,师兄说看下他代码,竟然可以用层级来显示,在hover情况下添加
直接能产生悬浮效果,css真的是奇淫技巧一堆。之后在其他分辨率情况下出了点问题,后面调了下bootstrap的属性值,全部变成
才使得图片布局好看。
后面发现盒子左右间隙很大,psd是整齐的,于是整理了下布局结构才完成
另外在弄图片的时候图片切的不好,师兄教了个方法拷贝图片。找到以前师兄写的任务f12,然后如下图,copy链接打开新的浏览器标签页另存为。
收获了什么:
也还是布局结构思维很重要。
回顾了下flex的知识:
使用 flex 布局首先要设置父容器 display: flex,然后再设置 justify-content: center 实现水平居中,最后设置 align-items: center 实现垂直居中。
容器具有这样的特点:父容器可以统一设置子容器的排列方式,子容器也可以单独设置自身的排列方式,如果两者同时设置,以子容器的设置为准。
flex-start:起始端对齐
flex-end:末尾段对齐
center:居中对齐
space-around:子容器沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半。
space-between:子容器沿主轴均匀分布,位于首尾两端的子容器与父容器相切
align-items 属性用于定义如何沿着交叉轴方向分配子容器的间距。
flex-direction 属性决定主轴的方向,交叉轴的方向由主轴确定。
向右:flex-direction: row
向下:flex-direction: column
设置换行方式:flex-wrap,决定子容器是否换行排列,不但可以顺序换行而且支持逆序换行。
今天计划:
写完第二个页面和追赶第三个页面;
评论