前言

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


附录

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐