《Web应用基础》课程结业报告

学习途径多多参考了B站的教学视频，【前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程】 https://www.bilibili.com/video/BV1Kg411T7t9/?share_source=copy_web&vd_source=acb2a6761a027c4b21e4de9c9d833dd9

主题

我选择的是第一个题目，就是布置一个静态的网页出来，然后主要运用的技术是HTML，CSS，还有一点点js的，是用来显示现在的时间。这个网页部署的初衷是展示一下我的家乡杭州，然后网页中有五个跳转界面他们分别是首页，历史沿革，杭州风景，杭州地理我要留言，里面主要介绍了一下杭州的地理位置，人文风情等信息，其中我要留言的部分是可以留言的。效果如下：

开发过程

首先说的是index，它首先设置了我的家乡的网页的标题。然后在界面的右上方设置了四个跳转界面。然后就是设置了一张背景图片，后面跟着的是杭州市以及杭州市的一些简介。然后我在他的右下角设置了一个可以查看此文章的超链接。然后它的页脚也设置了我的家乡杭州。然后用js在左上角展示出了当前的时间。

左上角显示时间的js，先使用querySelector方法选择.header .time元素，并将它存储在名为timeElm的变量中。这个元素用于显示时间。定义了一个名为getTime的箭头函数。该函数用于获取当前时间并返回一个对象，包含小时、分钟和秒数。然后，创建一个Date对象，表示当前的日期和时间。用return来返回一个包含小时、分钟和秒数的对象。setInterval（500）的方法用来每500毫秒即0.5秒执行一次，该函数用来更新当前的时间。let time = getTime()，代码调用getTime函数，并将返回的对象存储在名为time的变量中。最后将显示在网页中的时间元素的文本内容设置为‘{time.hours} : {time.minutes} :time.minutes:{time.seconds}。其中的${...}`是一种模板字符串语法，用于插入变量的值，每隔0.5秒，时钟会更新一次，显示当前的小时、分钟和秒数。这样就实现了一个动态的时钟效果。

然后是历史沿革的主界面，它的网页的结构和内容的基础，然后使用了 HTML 来定义页面的结构和内容，页面的标题、段落和图片等，CSS的话，使用了 CSS 来设置页面的样式和布局，编辑了页面的背景颜色、字体和边框等。中间几张的图片展示使用了 CSS3 中的特效技术，使用了 CSS3 中的 transition 属性实现了图片的缩放动画效果，当鼠标悬停在图片上时，图片会以 1.2 倍的比例缩放，并在 0.3 秒内完成缩放动画。也使用了 Flexbox 布局来实现列表图片的排列和对齐等功能，使杭州的图片自适应容器的大小并且在水平和垂直方向上居中对齐。后面杭州风景，杭州地理的部分也是如此，其中它的背景图片表示不平，而且可以自适应填充。

最后是留言的界面，主要设计了对应的留言相关的信息的文本行，还有他们的提交的按钮。.body设置整个页面的背景图片，并将其平铺并覆盖整个页面.app：设置留言部分的样式，包括宽度、外边距、内边距、背景颜色和边框圆角，.app form设置留言表单的样式是宽度和居中对齐。.form里面设置表单中多行文本输入框的样式设置了宽度、高度、文本缩进、边框、圆角和背景颜色。.form button:active设置提交按钮在按下时有内阴影效果。

遇到的问题

展示图片的时候，一开始的图片大小不一，很多东西没有对齐，就显示的比较丑，后面学了 Flexbox 布局，可以让图片都对的非常齐，而且显示的效果很好。

哪些未解决

就比如我后面的那个留言板的话，提交了之后我是看不到你的留言信息的，这里面应该如果真的要写的话，涉及到了后端的数据库内容和前端的js来接收它。如果后面想完善这个网站的话，可以在这个上面下功夫。

总结

本次的web开发我一开始学的只学了HTML，做出来的网页只有文字，图片还有超链接等东西。就是布局的非常不整齐，感觉就是非常丑的。虽然就是效果都可以用，但是就是和我们普通看的网页还是显得非常不同的，后面学习了css工具用来调整。比如背景图片的大小，设置对话框的长短，大小等，让做出来的网页就显得非常干净整洁，而且非常美观。然后又学习了transition 等属性，让展示的效果更加吸引人。总的学习感受对于我来说就相当于是一个画画的过程，一开始的HTML其实就是用铅笔来画出该网页的股价，然后CSS就是用水彩笔来给这个网页润色，让这个网页更加好看。然后JS的话就起到了接收很多外部信息与外部交流的作用。这次全net开发可以说是接触了一点点前端的知识，以后还有很多的知识要学，就比如JS里面与后端的连接的技术，也为我以后做全栈开发打下了坚实的基础。