Study任务一11月月报

本文最后更新于：2 小时前

Study任务一11月月报

任务主题：开发一个自己的个人介绍页面；

需求列表：

1. 列出关于自己的信息(头像，昵称，个人介绍…)

2. 界面美观大方

3. 运用一些动画技巧使页面更加动感(可选)

10月13日收到任务后，开始在网上收集资料，最终决定使用HTML+CSS来完成页面。我所使用的“教材”为Evento站点上Jeffrey的课程（ https://webdesign.tutsplus.com/courses/30-days-to-learn-html-css ）。

课程内容如下：

img

起初计划一周看完课程，一共有31个视频，大多数视频集中在10-20min左右。然而现实是咕咕咕的，最后使用了将近半个月时间，能接收到大概60%的内容。最大的两点障碍包括1.HTML的标签很多，学完就忘； 2.看的时候觉得都能理解到，真正自己上手的时候还是困难重重。到了课程最后两三集，这老外突然教起了Photoshop，我缓缓打出一个问号。了解到前端需要懂一点设计。

img

课程粗略地完成后开始上手写个人介绍页面，仅写了两个部分，排版是个极大的问题，一个标签就够我整上个一天半天的。于是放弃了这个页面。在B站找写了HTML实战视频，决定先抄一个假百度首页来熟悉一下网页结构。实际过程中的确困难重重，整个页面推翻过好几次重建。最终在我的程序员朋友的帮助下，假百度首页半成品如下：（ https://qiuqianaw.github.io/FK-Baidu/ ）

img

把这个页面分成上中下结构后，看起来似乎简单了许多。在Evento课程上老外教的搭建网页方法是先写出HTML的结构，再使用CSS进行排版。我在这个假百度首页中先用CSS排好上、中、下三个<div>，以及各个<div>里多分出几个<div>后，再回到HTML里填充内容。

解决上述提到第一个障碍的方法是码代码的同时查阅HTML标签参考手册（ https://www.w3school.com.cn/tags/index.asp ） 。 第二个障碍就不太好解决了，只能动手多写。

目前假百度首页还需要解决的问题包括但不限于：

1.搜索框的边框样式以及搜索框最右边需要一个Camera的<img>（目前还没有深扒过这个是怎么实现的= =）；

2.搜索框右边的“百度一下“按钮的样式还没调整完成(目测会比较复杂，瞎改的话会导致这个button跳到页面其他地方，不和搜索框在同一水平线上)；

3.页面右上角的9个<li>和我的代码顺序正好是相反的，原因未知；

4.上、中、下结构中“下“这个部分里面的版权声明和公安备案部分里有几个小小的<img>没有插入，原因同第一点。

偶然抓住了隔壁班大佬，讨论了一下个人页面应该如何开始。讨论结果为 你的代码写得很好，可惜下一秒就是我的 多看一下别人的网页，观察结构，可以从模仿借鉴开始。

某个周末看了这个视频（ https://www.bilibili.com/video/av75051868 ） ，搭了个大致框架后开始魔改之路。最终80%成品如下：（ https://qiuqianaw.github.io/heyqiuqian/ ） 。

同样选用了简单易上手的上、中、下结构，多加了一个copyright部分。

<intro>：

img

<gallery>：

img

<contact>+<copyright>：

img

<body>部分背景图来源于bing首页每日壁纸。<gallery>部分图片来源于必应图片搜索。<intro>和<contact>部分背景图来源于github官网扒下来的图。<galley>模糊背景素材来源于CSDN （ https://blog.csdn.net/libin_1/article/details/51927430 ） 。各部分动画效果，包括blur、box-shadow等来源于微光网络工作室官网（ https://shimmer.neusoft.edu.cn/ ） 。构成了My-website。

目前我的个人页面还需要解决的问题包括但不限于：

1.<gallery>和<body>里的背景图不能完美契合，滚动浏览的时候会露馅；( 已解决 )

2.<button>里color颜色改不了，原因未知，不过我曲线救国改背景色了；

3.页面过于简单。

我学会了什么？

  • 一种不太像编程语言的编程语言：HTML+CSS；

  • sublime-text、Visual Studio Code两种编译器的使用；

  • 在Github上托管自己的代码；

  • 扒下一个网页的源码；

  • 使用搜索引擎查询需要的资料，知识常备常新；

  • 我的“教材“都是那老外在那叭叭，没字幕..英语听力似乎有所上升…。

我得到了什么？

  • 一个半成品假百度首页；

  • 一个自己的个人页面；

  • 自主学习的能力；

  • 和大佬交流时的共同话题；

  • 更加清楚地认识到自己是菜鸡这个事实；

  • 制作ico图片；

  • 发现“菜鸟教程”和“W3C”两个绝好程序员教程网站；

  • 拿自己的页面和别人装b（小声BB）。

HTML/CSS

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！