网站设计

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

文字悬浮于图片
利用了relative和absolute元素实现

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

伪元素
利用::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的学习上面还有许多地方的不足,在制作网页的过程中总是遇到不会、不明白的地方。
所以我们会继续努力,争取下一次做出一个更为完善的网站
最后,再次衷心感谢小组成员共同的努力以及老师的帮助!