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

这篇具有很好参考价值的文章主要介绍了web前端开发期末大作业 ——个人主页(可自取源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(一)主页实现

首先进入的是我们的封面,头像用的是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

也可以私我!文章来源地址https://www.toymoban.com/news/detail-458608.html

到了这里,关于web前端开发期末大作业 ——个人主页(可自取源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript

    家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成

    2024年02月08日
    浏览(47)
  • html网页设计小作业(个人主页)

    目录 作品介绍: 效果展示 代码部分: 简易的个人网页小作业,只用了html+css 布局制作,没啥好说的,直接上图!!! Home 页面:  About页面:    Hobbies页面: Home界面: About页面:  Hobbies页面: oKK,就这么多啦。。

    2024年02月11日
    浏览(38)
  • Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:

    👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比

    2024年02月12日
    浏览(60)
  • web前端(第二次作业)

    1、计算用户指定的数值内的奇数和。例如用户输入的是 10,则计算 1 + 3 + 5 + 7 + 9 的和 运行截图: 2.使用递归计算 1 ~ 100 的和 运行结果;

    2024年01月17日
    浏览(32)
  • 抖音web版地址个人主页和视频地址

    https://www.douyin.com/user/MS4wLjABAAAAfLsItSD2WiJrsji1g_iZv-it6W2CcvBFkdUwMjTeSD4 MS4wLjABAAAAfLsItSD2WiJrsji1g_iZv-it6W2CcvBFkdUwMjTeSD4 是 sec_uid。 https://v.douyin.com/h17aA6H https://www.iesdouyin.com/share/user/MS4wLjABAAAAfLsItSD2WiJrsji1g_iZv-it6W2CcvBFkdUwMjTeSD4 MS4wLjABAAAAfLsItSD2WiJrsji1g_iZv-it6W2CcvBFkdUwMjTeSD4 是 sec_uid。 下面的写法

    2024年04月27日
    浏览(42)
  • Web前端动态交互(某校实验作业)

    1. 创建typer.html,使用window对象间隔调用函数实现如图1所示的文字打印效果,主要要求: 浏览器打开页面后,一个字一个字地动态输出文本“西华大学计算机与软件工程学院坚持全面育人的原则,以培养具有良好文化素养、扎实专业基础和具有实践能力的复合型应用人才为目

    2024年02月04日
    浏览(35)
  • web前端第二次作业

    1,计算用户指定的数值内的奇数和 效果运行图: 代码: 2,使用递归计算 1 ~ 100 的和 效果运行图: 代码:

    2024年01月16日
    浏览(35)
  • web前端课程作业设计:个人简历

    今天博主的web前端选修课结课了,期末大作业也提交了,今天写一篇博客把我的大作业分享给大家。 个人简历主页设计 应尽量包含以下内容: Ø 包含个人基本信息、教育背景、个人风采、与我联系四块内容 Ø 在页面组织上,以上内容可以通过主页链接到不同页面,也可以放

    2024年02月08日
    浏览(31)
  • Web前端大学生期末大作业--京东首页

    欢迎点赞 👍 收藏 ⭐留言 📝 私信 学习目标: 掌握京东项目流程体系 掌握网站三大标签优化 掌握京东头部和尾部制作 掌握京导航栏制作 掌握京东焦点图制作 了解网站三大标签优化 技术栈: HTML + CSS 快速导航栏部分 中间头部分 中间分类区域 页面底部分 上面仅仅是部分代

    2024年02月12日
    浏览(31)
  • Web前端期末大作业---新农村建设网页设计

    ✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强!☀️ 🔥前言 期末来咯,很多小伙伴们苦苦难受在老师的多要求,难受在老师要求的页面有点

    2024年02月03日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包