位置: IT常识 - 正文
web前端开发期末大作业 ——个人主页（可自取源码）(web前端开发学什么)
编辑：rootadmin推荐整理分享web前端开发期末大作业 ——个人主页（可自取源码）(web前端开发学什么)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:web前端开发期末考试题,web前端开发期末大作业,web前端开发期末大作业,web前端开发期末总结,web前端开发期末作业作品,Web前端开发期末考试,web前端开发期末考试题,Web前端开发期末考试,内容如对您有帮助，希望把文章链接给更多的朋友！
（一）主页实现
首先进入的是我们的封面，头像用的是3D变换，鼠标悬停时，完成沿着y轴旋转的效果。然后我们做个两个div标签，一个是在图片里面，添加了文字2022 · Lucky，一个是在图片下面，添加了文字Lucky。关于下面对应的文字和背景图，我们在JS里应用了网址https://v1.hitokoto.cn/和https://cn.bing.com/，每更新一次，文字和背景图都更新。在超链接“我的主页”下面，我们4个超链接，分别对应的是Github、CSND、知乎和qq邮箱，点进去分别是对应的网站。在首页的右下角，我们也用了一个div标签，添加了文字和一个空超连接。
1、点击“我的主页”，首先进去的是“个人信息”。在导航栏部分，我们用了10个超链接，分别对应我们的10个主页。在这个主页，我们用了一个大的div标签，添加个人信息、个人作品、个人经历。在每个主页的左下角，我们都用了，audio标签添加了音乐播放。
2、点击“我的博客”，我们用了一个大的div标签，添加了三个“关于HTML能做什么”、“关于CSS能做什么”和“关于JS能做什么”3个div标签。点击每一个“查看正文”进入的是自己写的博客。
3、点击“我的收藏”，应用animated样式，让文字隔一段时间自动弹出来。关于下面的图片，在鼠标悬停时，应用了过度效果，显示出文字。在尾部，我们还用了一个超链接“回到首页”对应到“我的个人信息”。
4、点击进入“我的兴趣爱好“，其样式与”我的收藏一样。
5、点击进入“生活记录”，我们先是用了两个大的div标签做了美食和生活两个模块。两个模块都用了几个小的div标签添加文字和样式。在尾部，我们添加了“个人信息”、“兴趣爱好”、“美食生活”和“背包旅行”4个超链接以及电话、E-mail。
6、点击进入“我的相册”。首先是“旅行·日志”这里用了一个大的div标签添加了图片和文字。在“星空·相册”里，我们用了bigView image和smallView image两个窗口来可点击小窗口展示图片。在最下面，我们用了-webkot-animation将图片自动滚动展示。
7、点击进入“我的音乐”。首先，我们用了三个div标签，一个是音乐界面，一个歌单，一个是专辑简介。歌单部分，我们应用了inline-block下划线将歌曲划分和hover在鼠标悬停时显示四个按键，点击播放案件，可以跳转到网易云音乐播放。
8、点击进入“我的导航”，我们做了一个搜索框，连接到百度的搜索引擎，在上面的导航栏是超链接。
9、点击“返回首页”跳转到我们的封面。
这是一个比较简单的学生管理系统，需要源码的自取，百度网盘
链接：https://pan.baidu.com/s/1iq_Pj61jL2v_53I7gxkpKg 提取码：8899
也可以私我！
下一篇：使用elementUI组件实现表格的分页以及搜索功能(解读elementui的组件源码)
