发表于: 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的间距。因为师兄告诉我最好还是在调试过程中能用箭头看的到内容,这样也方便别人看代码时能清晰。
现在的问题是写起来是很快,但是有些小细节需要调试,还要运用媒体查询,要让网页能做出响应式,这个目前是我的难点。因为不熟练所以在写的时候会浪费掉很多时间,网站的页面分成好几块来写,内容还是相对要多的,前几天的划水让我感到很惭愧。
明天计划的事情:(一定要写非常细致的内容)
接着做自己写的首页,目前先把大致的框架写出来,然后在去调试什么时候用媒体查询来显示分辨率下怎么展示的效果。
遇到的问题:(遇到什么困难,怎么解决的)
后面我用了flex-flow:row warp这个属性后,在不同的分辨率还是会变形,代码如下:
网页效果如图:
在这里还是要用运用到媒体查询,今天准备运用下看怎么来写媒体查询。
收获:(通过今天的学习,学到了什么知识)
在栅格系统里运用flex盒子,其实栅格也可以当做一个单独的div,这样写起来也容易理解。
评论