发表于: 2018-07-23 00:17:13

2 580


今天完成的事情:

今天学习了NGINX的配置和使用,把之前断断续续写出来的页面整理完成并提交了任务。之前学习比较零散,也没有坚持每天写日报,所以今天在这里汇总一下完成任务一的思路和踩过的坑。

明天的计划:

明天开始任务二的进度。关于前端开发工具之前已经对Git,GitHub,VS code有所了解,明天计划尽量了解一下其他版本控制工具和编辑器,并且再深入学习git和VS Code的使用。

遇到的问题:

遇到的问题不少,但基本用搜索引擎都可以解决。特地记一下印象深刻的坑。

1、刚开始做九宫格时希望能网格之间的距离还有和页面边缘的距离都等距,实现完美分布。但因为每行有三个格子,均分后的单位除不尽。而我的实现思路是设置九个同样样式的格子并算好边距,所以现在的作品只能做到粗略分布,左右并不对称。

2、刚开始使用了vm单位。该单位是相对于视窗的宽度:视窗宽度是100vw。但在使用时发现在chrome浏览器中窗口最大化时可以实现九宫格分布,在窗口逐渐调小时出现了一行只能容纳2个格子的情况。经过查阅资料发现vw单位相对的视窗宽度是不包括浏览器窗口边缘的垂直滚动条的。在窗口缩小时这个滚动条会挤压到网页视窗的空间,从而导致此时的宽度无法容纳下三个格子。后来我使用了普通的%单位。

3、在使用Git把本地仓库push到远程仓库时提示错误,发现没有在GitHub上传本地公钥。

4、在设置NGINX时发现无法按照师兄的方法手机访问局域网内的PC端的网页,发现关闭杀毒软件的防火墙后就可以正常访问了。

任务一收获:

1、九宫格基本实现思路:

  1. ·在HTML文件中添加九个空的div元素并制定类名。同时在head元素中指定外联样式表(css)。

  2. ·在外联样式表中设置类选择器,设置div元素的内外边距,宽度,边框和颜色等。同时设置向左浮动。border-radius属性可以使格子设置为圆角,数值越大圆角越大。

  3. 2、学习了利用chrome浏览器的开发者工具进行代码调试的方法。

  4. 3、学会了Git的基本使用,以及如何使用GitHub Page功能实现作品的在线预览。

  5. 4、学习了NGINX的配置使用,以及如何实现手机访问自己在电脑端的作品。



返回列表 返回列表
评论

    分享到