发表于: 2020-03-05 17:56:39

2 1394


今天做完了任务一,由于前期有在B站看其他培训机构的教学视频,所以拿到任务简单看了一下感觉并不难,应该很快就能做出来

但是到今天早上起来正式开始做之后,发现事情并没有那么简单


按照指引做完前期搭建开发环境之后就准备开始折腾了,打开VScode 一看全英文有点傻眼,费了些时间总算是弄成了中文界面,


按照我之前学的东西很快的使用DIV布局作出了想要的九宫格布局,不过没有设置圆角,因为之前学的没有学到CSS3,所以先放下了。做完后高兴的以为搞定了,用浏览器打开后发现我做的九宫格根本不会随浏览器窗口的变化而变化,

也意识到了是父元素DIV没有设置和窗口一样大,就给父元素设置了   width:100%;height:100%,发现一点用处都没有,折腾很久,心态逐渐暴躁。

折腾很久都没有解决,于是开始翻看任务详情,没有得到解释,于是打开了指定给我的师兄的日报,看了一下师兄的代码,发现师兄使用了height:100vw  来解决了这个问题,于是我自己也试了一下,确实也解决了。后续自己去百度了一下100vw是什么意思,发现是Viewport的宽度,相应的还有vh,是viewport的高度想的试了一下100vh能不能解决问题,发现不行。。

圆角的属性也在师兄的代码里看到了,但是对该属性的值为什么是百分数有点不太理解。在所有都搞定之后,使用firefox的开发工具看了一下,发现圆角的百分比值是决定圆角的弧度的,也发现了在 border-radius:>=50%时,整个方格会变成一个圆,也就搞明白了为什么值是百分数。之后使用chrome 的开发工具模拟手机也看了一下,没有问题,

然后看着任务详情,下载了Nginx,并在知乎上找见了配置方法,并成功的在我的手机上打开了自己写的页面,看起来应该是没什么问题

最后准备提交任务倒是给我卡住了,不知道该怎么提交,

上传到百度云后生成分享链接的时候生成不了,说有敏感字符,不能分享,很难受,

算了就把我的代码以图片的形式发在这里吧,希望有懂的师兄看了能教我一下怎么提交作业啊!!!

CSS:


返回列表 返回列表
评论

    分享到