web结课大作业结业报告(附源码及展示效果)

---

前言

当我开始写这篇博客的时候，那就代表8周的web选修课结束了，这次的结业作业是一个大作业，要求做一个静态或者动态网站，并挂载到github上面，我学艺不精，当然是选择做的静态网站。我这次的网站主题是介绍我的家乡重庆，主要是介绍重庆的美食，风景，小吃，文化和娱乐5个方面，主要是想要让大家对重庆有一定的了解。

---

一、遇到的问题？

虽然说现在写博客的心情很不错，但是这个过程中还是遇到了不少的问题，那么现在就让我来细数其中的问题吧。

1. 首先是不知道css的框架该选用什么，毕竟自己写的css实在太丑了。
2. 展示图片的时候，因为每张图片的大小不一致，导致在网站上面，文案和图片都没有对齐，很难看。
3. 主题的选取也是浪费了很多时间，很多主题都是做到一半又放弃了。
4. 很多和网站主题相关的图片都有水印，十分难受。
5. 多张html文件做分页的时候，无法实现上下页跳转。
6. 英语水平不高，在github上面挂载网站困难。

---

二、问题的解决

1. css框架最终还是决定选择棋歌教学网提供的MDB，因为这个框架只是也是经常使用，对它相较于其它框架更为熟悉。
2. 针对图片大小不一致导致展示难看的问题，我选择用photoshop强行将它们改成一样的大小。
3. 主题的问题，因为实在没什么想法，最开始也准备介绍游戏的，但考虑到还是需要一些实实在在的东西，最终就决定为自己的家乡写点东西。
4. 针对一些确实需要的图片有水印的问题，我依然还是掏出photoshop对其进行去水印处理。
5. 因为要实现上下页动态跳转需要本人对js有一定的深入程度，所以我才用了另外的做法，会在后面的内容进行展示。
6. 因为第一次做web作业的时候，就需要我们托管到github上面，我第一次也尝试过，但那速度确实不敢恭维，所以换用了国产的gitee，但是gitee一小时又只能上传20个文件，难受。最后还是用Git这个软件才解决。但是这次当我还想托管到gitee上面的时候发现gitee正在维护，于是只能硬着头皮，托管到github上面了。

---

三、开发环境

8G运存，64位的笔记本一台。 软件用的Visual Studio Code

---

四、部分网站源码展示

4.1 css框架

这次在css框架上面下足了功夫，不仅给每张html文件单独写了框架，还为许多功能单独写了框架。

4.2 HTML文件

按照这次的要求我一共做了6张HTML文件，除了总结的那张以外，其它5张基本都是600行代码左右。

4.3 JS文件

这次js用的比较少，但代码还是有点多。

---

五、部分网站成果展示(这里只展示美食页和总结页)

5.1 重庆的美食

六张HTML的主页都是全屏图片

右上角的关于功能

这里是高光立体悬停效果展示，当鼠标指上去，卡片会略微向上抬起。

这里详细展示一些本专题的一些特色

这里用js实现动态轮播图片

这里用js实现swiper倾斜图片列表ui布局，可以拖动，可以放大查看

因为我没有用js动态实现分页所以用字来提示当前是第几页，但页码的按钮用了css3的动画特效，所以按钮是3D的。

这样就跳转到了第三页

最下面就是联系我的一些链接了

5.2 总结页

这一页我除了发发牢骚以外就是直接给出了这篇总结博客的链接了。

---

总结

通过这为期8周的web学习，让我对前端的编程有了一定了解，以前我一直认为编程就应该搞什么软件开发，但现在我发现也许走前端也是个不错的方向，前端虽然入门容易但是想要深入学习也需要为之付出巨大努力。要是向我一样只会点皮毛那是没什么用的，应该继续向动态网站前进，学习新的框架。也许这种可视化的开发更容易让人有成就感，最后借用我的前端启蒙网站——棋歌教学网的一句话“学习不应复杂和痛苦，而应简单和快乐”，希望今后我能继续砥砺前行，快乐且简单的学习编程。

---

附录

网站效果展示
网站源码下载地址