(一)主页实现

首先进入的是我们的封面,头像用的是3D变换,鼠标悬停时,完成沿着y轴旋转的效果。然后我们做个两个div标签,一个是在图片里面,添加了文字2022 · Lucky,一个是在图片下面,添加了文字Lucky。关于下面对应的文字和背景图,我们在JS里应用了网址https://v1.hitokoto.cn/和https://cn.bing.com/,每更新一次,文字和背景图都更新。在超链接“我的主页”下面,我们4个超链接,分别对应的是Github、CSND、知乎和qq邮箱,点进去分别是对应的网站。在首页的右下角,我们也用了一个div标签,添加了文字和一个空超连接。

web前端开发期末大作业 ——个人主页(可自取源码)

1、点击“我的主页”,首先进去的是“个人信息”。在导航栏部分,我们用了10个超链接,分别对应我们的10个主页。在这个主页,我们用了一个大的div标签,添加个人信息、个人作品、个人经历。在每个主页的左下角,我们都用了,audio标签添加了音乐播放。

web前端开发期末大作业 ——个人主页(可自取源码)

web前端开发期末大作业 ——个人主页(可自取源码)

2、点击“我的博客”,我们用了一个大的div标签,添加了三个“关于HTML能做什么”、“关于CSS能做什么”和“关于JS能做什么”3个div标签。点击每一个“查看正文”进入的是自己写的博客。

web前端开发期末大作业 ——个人主页(可自取源码)

3、点击“我的收藏”,应用animated样式,让文字隔一段时间自动弹出来。关于下面的图片,在鼠标悬停时,应用了过度效果,显示出文字。在尾部,我们还用了一个超链接“回到首页”对应到“我的个人信息”。

web前端开发期末大作业 ——个人主页(可自取源码)

4、点击进入“我的兴趣爱好“,其样式与”我的收藏一样。

web前端开发期末大作业 ——个人主页(可自取源码)

5、点击进入“生活记录”,我们先是用了两个大的div标签做了美食和生活两个模块。两个模块都用了几个小的div标签添加文字和样式。在尾部,我们添加了“个人信息”、“兴趣爱好”、“美食生活”和“背包旅行”4个超链接以及电话、E-mail。

web前端开发期末大作业 ——个人主页(可自取源码)

web前端开发期末大作业 ——个人主页(可自取源码)

6、点击进入“我的相册”。首先是“旅行·日志”这里用了一个大的div标签添加了图片和文字。在“星空·相册”里,我们用了bigView image和smallView image两个窗口来可点击小窗口展示图片。在最下面,我们用了-webkot-animation将图片自动滚动展示。

web前端开发期末大作业 ——个人主页(可自取源码)

web前端开发期末大作业 ——个人主页(可自取源码)

web前端开发期末大作业 ——个人主页(可自取源码)  

7、点击进入“我的音乐”。首先,我们用了三个div标签,一个是音乐界面,一个歌单,一个是专辑简介。歌单部分,我们应用了inline-block下划线将歌曲划分和hover在鼠标悬停时显示四个按键,点击播放案件,可以跳转到网易云音乐播放。

web前端开发期末大作业 ——个人主页(可自取源码)

8、点击进入“我的导航”,我们做了一个搜索框,连接到百度的搜索引擎,在上面的导航栏是超链接。

web前端开发期末大作业 ——个人主页(可自取源码)

9、点击“返回首页”跳转到我们的封面。

这是一个比较简单的学生管理系统,需要源码的自取,百度网盘

链接:https://pan.baidu.com/s/1iq_Pj61jL2v_53I7gxkpKg 
提取码:8899

也可以私我!

发表回复