web结课大作业结业报告(附源码及展示效果) | 您所在的位置:网站首页 › 电视机尺寸对照表观看距离 › web结课大作业结业报告(附源码及展示效果) |
文章目录
前言一、遇到的问题?二、问题的解决三、开发环境四、部分网站源码展示4.1 css框架4.2 HTML文件4.3 JS文件
五、部分网站成果展示(这里只展示美食页和总结页)5.1 重庆的美食5.2 总结页
总结附录
前言
当我开始写这篇博客的时候,那就代表8周的web选修课结束了,这次的结业作业是一个大作业,要求做一个静态或者动态网站,并挂载到github上面,我学艺不精,当然是选择做的静态网站。我这次的网站主题是介绍我的家乡重庆,主要是介绍重庆的美食,风景,小吃,文化和娱乐5个方面,主要是想要让大家对重庆有一定的了解。 一、遇到的问题?虽然说现在写博客的心情很不错,但是这个过程中还是遇到了不少的问题,那么现在就让我来细数其中的问题吧。 首先是不知道css的框架该选用什么,毕竟自己写的css实在太丑了。展示图片的时候,因为每张图片的大小不一致,导致在网站上面,文案和图片都没有对齐,很难看。主题的选取也是浪费了很多时间,很多主题都是做到一半又放弃了。很多和网站主题相关的图片都有水印,十分难受。多张html文件做分页的时候,无法实现上下页跳转。英语水平不高,在github上面挂载网站困难。 二、问题的解决 css框架最终还是决定选择棋歌教学网提供的MDB,因为这个框架只是也是经常使用,对它相较于其它框架更为熟悉。针对图片大小不一致导致展示难看的问题,我选择用photoshop强行将它们改成一样的大小。主题的问题,因为实在没什么想法,最开始也准备介绍游戏的,但考虑到还是需要一些实实在在的东西,最终就决定为自己的家乡写点东西。针对一些确实需要的图片有水印的问题,我依然还是掏出photoshop对其进行去水印处理。因为要实现上下页动态跳转需要本人对js有一定的深入程度,所以我才用了另外的做法,会在后面的内容进行展示。因为第一次做web作业的时候,就需要我们托管到github上面,我第一次也尝试过,但那速度确实不敢恭维,所以换用了国产的gitee,但是gitee一小时又只能上传20个文件,难受。最后还是用Git这个软件才解决。但是这次当我还想托管到gitee上面的时候发现gitee正在维护,于是只能硬着头皮,托管到github上面了。 三、开发环境 8G运存,64位的笔记本一台。 软件用的Visual Studio Code 四、部分网站源码展示 4.1 css框架 这次在css框架上面下足了功夫,不仅给每张html文件单独写了框架,还为许多功能单独写了框架。
按照这次的要求我一共做了6张HTML文件,除了总结的那张以外,其它5张基本都是600行代码左右。 这次js用的比较少,但代码还是有点多。
这里用js实现动态轮播图片 这里用js实现swiper倾斜图片列表ui布局,可以拖动,可以放大查看
因为我没有用js动态实现分页所以用字来提示当前是第几页,但页码的按钮用了css3的动画特效,所以按钮是3D的。
最下面就是联系我的一些链接了 这一页我除了发发牢骚以外就是直接给出了这篇总结博客的链接了。 通过这为期8周的web学习,让我对前端的编程有了一定了解,以前我一直认为编程就应该搞什么软件开发,但现在我发现也许走前端也是个不错的方向,前端虽然入门容易但是想要深入学习也需要为之付出巨大努力。要是向我一样只会点皮毛那是没什么用的,应该继续向动态网站前进,学习新的框架。也许这种可视化的开发更容易让人有成就感,最后借用我的前端启蒙网站——棋歌教学网的一句话“学习不应复杂和痛苦,而应简单和快乐”,希望今后我能继续砥砺前行,快乐且简单的学习编程。 附录网站效果展示 网站源码下载地址 |
CopyRight 2018-2019 实验室设备网 版权所有 |