发表于: 2018-12-15 19:15:58

1 713


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)

 

1、完成首页主体优秀学员展示和战略合作伙伴的logo。

在写优秀学员展示的时候,我运用了栅格系统来写,把栅格当做一个div来嵌套,然后在里面img用div背景图片插入,再用p标签来写标题和内容。这样写起来也很清晰,内容丽用padding和margin来撑的空间也看的清楚,这次都是用flex来写,所以给栅格col定义flex,让div并列在一起,再通过margin和padding来产生间距,这样在调试的时候看着也很清楚。

     但是在写战略合作伙伴的那5个logo的时候,我想了下用栅格怎么写,一列是12个,有5个logo怎么分呢?后来询问师兄,建议都不一样,一种是写一个栅格然后再把5个logo分5个div来写。还有一种是分3个col-4,这样把图片分3份,在不同分辨率下都是需要运用到媒体查询来写,写法应该有很多,但是后来我实践写后还是选择了第一种,用一个col-12栅格来写,在最外面再用一个div嵌套栅格,然后给最外面的div设padding-top值来撑开标题和img的间距。因为师兄告诉我最好还是在调试过程中能用箭头看的到内容,这样也方便别人看代码时能清晰。

     现在的问题是写起来是很快,但是有些小细节需要调试,还要运用媒体查询,要让网页能做出响应式,这个目前是我的难点。因为不熟练所以在写的时候会浪费掉很多时间,网站的页面分成好几块来写,内容还是相对要多的,前几天的划水让我感到很惭愧。


明天计划的事情:(一定要写非常细致的内容) 


接着做自己写的首页,目前先把大致的框架写出来,然后在去调试什么时候用媒体查询来显示分辨率下怎么展示的效果。


遇到的问题:(遇到什么困难,怎么解决的)

 

1、在首页里遇到一个问题,五张图片怎么运用栅格系统让图片在一列,栅格一列是12格,怎么都不好分,后面查看了下师兄的代码,发现栅格还可以这样用。
我设一列栅格col-12,然后把五张img放在一个栅格里,也可以把栅格当做一个div。
html代码:
现在遇到一个问题,我给col的div设了一个flex,然后让他们达到并列居中,但是在低于600px值的时候,后面的img会覆盖前面的。如下图:
后面问师兄,师兄说可以用到响应式,一列是100%,五个可以分成20%,然后在运用媒体查询让图片在哪一个屏幕分辨率中显示100%或者50%。这是一种方法。
后面另一个师兄也说可以运用flex盒子中的一个属性,flex-flow:row warp,可以让img自动换行。
如图:

后面我用了flex-flow:row warp这个属性后,在不同的分辨率还是会变形,代码如下:



网页效果如图:



在这里还是要用运用到媒体查询,今天准备运用下看怎么来写媒体查询。


收获:(通过今天的学习,学到了什么知识)


在栅格系统里运用flex盒子,其实栅格也可以当做一个单独的div,这样写起来也容易理解。


返回列表 返回列表
评论

    分享到