学生作业报告

学院: 软件与物联网工程学院
课程名称: Web开发基础
专业班级: 软件2211班
组员姓名: 学号:
艾泽阳 0223707
范佳豪 0223717
陈志凯 0223406


网站介绍

名称:猛男养成日记

目的:立志成为猛男,不当细狗!!!


网站设计

sample1

二级导航栏

当用户将鼠标移到元素上时出现的下拉框鼠标悬浮于下拉框时下拉框不会消失

sample2

文字悬浮于图片

利用了relative和absolute元素实现

sample3

侧边栏

使用fixed元素相对视口定位实现侧边栏功能

sample3

伪元素

利用::first-letter 伪元素用于向文本的首字母添加特殊样式

两种样式的轮播图

炫酷的图片展示效果

通过js实现回到顶部的动画效果

登录注册界面

使用js使点击sign in/sign up可以在登录注册界面切换,同时背景图片丝滑的自动切换

(视频时提前录的,后面加了返回首页的按钮)


网站内容

使用了html、css和js编写

实现了导航栏、二级导航栏、侧边栏、轮播图、图片展示功能及利用js实现了一些简单流畅的动画

还做了一些阴影效果、背景颜色及文本的大小和位置等使得整体较为简洁

所有的子网页可以通过导航栏和页脚的十一个选项进行跳转

遇到的问题

小组在制作轮播图时一开始打算用html和css实现,试过之后发现轮播功能实现不了

然后小组成员通过学习使用js实现轮播功能

过程中还学会了用swiper插件

亮点

部分页面做了响应式设计,使用了float+clear布局,position定位(absolute, fixed),伪类,伪元素,表格table, 图片img, 列表ul

以及利用js和css实现的各种漂亮的动效,例如

总结

我们小组三人通过学习和努力,终于完成了这几千行代码,且完成的效果还算不错吧。

对此,我非常感谢我们小组组员为此的辛苦付出以及老师的大力帮助。

同时我们也明白我们在web的学习上面还有许多地方的不足,在制作网页的过程中总是遇到不会、不明白的地方。

所以我们会继续努力,争取下一次做出一个更为完善的网站

最后,再次衷心感谢小组成员共同的努力以及老师的帮助!