一.说明

今天博主的web前端选修课结课了，期末大作业也提交了，今天写一篇博客把我的大作业分享给大家。

二.题目

1. 大作业题目

个人简历主页设计

2. 内容要求

应尽量包含以下内容：

Ø 包含个人基本信息、教育背景、个人风采、与我联系四块内容

Ø 在页面组织上，以上内容可以通过主页链接到不同页面，也可以放在一个页面的不同区域

Ø 主页中有链接到其他各模块的导航条，以及个人基本信息的介绍

Ø 教育背景中包含自己的教育经历（小学、初中、高中、大学）以及大学中所学科目和成绩的表格

Ø 个人风采栏目包含一个自动播放的照片查看器

Ø 与我联系页面设置一个表单，填写完毕后提交可显示所填写的信息

三.分析

1.布局

下面是我对设计思路的分析：

首先需要确定整个简历主页的视觉风格和布局。可以根据您的职业特点选择相应的配色方案，并参考一些优秀的个人简历主页模板进行设计。
根据要求，将个人基本信息、教育背景、个人风采、与我联系四块内容放在页面上。这四块内容可以通过不同的区域或者链接到不同的页面来展示。
在页面上设置导航条，用于链接到各个模块。导航条可以悬浮在页面顶部，也可以放在页面侧边栏。
个人基本信息的介绍可以直接放在页面上，或者设置一个单独的页面来展示详细信息。
教育背景中，可以将自己的学历经历按时间顺序排列，并且在大学阶段添加一个成绩表格，以便更好地展示自己的能力和水平。
个人风采栏目中，可以使用一个自动播放的图片查看器，将自己的个人照片或者作品展示出来，让雇主们更好地了解自己。
最后，在与我联系页面设置一个表单，用于雇主填写相关信息并提交。提交后可以显示所填写的信息，方便雇主与您取得联系。

2.各部分实现

以下是我对各部分应该使用什么实现方式的建议：

视觉风格和布局：您可以通过CSS来设置页面的样式和布局，可以采用一些现成的CSS框架或者自己编写CSS代码。
四块内容展示：可以使用HTML来创建不同的页面模块，并且通过超链接或者Javascript来实现页面跳转。另外，也可以在一个页面上使用标签和样式来区分四块内容的展示。
导航条：可以使用HTML和CSS来创建导航栏，并且通过Javascript来实现页面跳转。其中，CSS可以用于设置导航栏的样式和布局，Javascript可以用于实现导航栏的响应功能。
个人基本信息：可以使用HTML和CSS来设置个人信息的样式和布局，并且在页面上直接展示。另外，也可以设置一个单独的页面来展示更详细的个人信息。
教育背景：可以使用HTML和CSS来设置教育背景的样式和布局，并且使用表格来展示大学阶段的科目和成绩信息。
个人风采栏目：可以使用Javascript和CSS来创建自动播放的图片查看器，并且将个人照片或者作品嵌入到查看器中。
与我联系页面：可以使用HTML和CSS来创建一个表单，让雇主填写相关信息。表单提交后，可以使用Javascript来处理并且展示所填写的信息。

四.html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>web个人简历</title><link rel="stylesheet" type="text/css" href="css/back.css"><link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" /><script src="js/dongtai.js"></script><script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
</head>
<body>
<div id="first"><!-- 导航条 --><div class="nav-container"><select onchange="location = this.value;"><option value="">请选择页面</option><option value="#first">简历首页</option><option value="#second">基本信息</option><option value="#third">教育背景</option><option value="#forth">个人风采</option><option value="#">与我联系</option></select></div><!-- 右上角图片 -->
<div class="circle"></div>
<!-- 首页寄语 -->
<div class="vertical-text"><div class="sentence">烟花虽美，只是一瞬。</div><div class="sentence">日子再苦，只是一时。</div><div class="sentence">相信自己，未来可期。</div><div class="signature">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-------- 未来的你</div>
</div><!-- 大标题 -->
<h1>我的个人简历</h1>
<div class="image-container"><img src="images/city2.jpg" alt="image1"><img src="images/city1.jpg" alt="image2">
</div>
<div class="audio-container" style="display: flex; justify-content: flex-end; margin-top: 20px;" autoplay><audio controls style="width: 300px; height: 50px; outline: none; background-color: #eee; border-radius: 10px; padding: 10px; margin: 0 10px; text-align: right;"><source src="music/music1.mp3" type="audio/mp3">您的浏览器不支持音频元素。</audio>
</div><a href="#" class="arrow">▼</a>
</div><div id="second"><!-- 大标题 --><h1>个人信息</h1><!-- 表格 --><table class="biaoge"><tr><td><img src="images/1.jpg" alt="个人信息"><br>姓名：xxx<br>性别：男</td></tr><tr><td><img src="images/2.jpg" alt="专业学历"><br>专业：物联网工程<br>学历：本科</td></tr><tr><td><img src="images/3.jpg" alt="就读学校"><br>就读学校：xx理工大学<br>学习课程：web设计与应用</td></tr><tr><td><img src="images/4.jpg" alt="个人爱好"><br>爱好：阅读、游戏、旅游<br>喜欢体育：乒乓球</td></tr></table>
</div><div id="third"><!-- 大标题 --><h1>教育背景</h1><h2>教育经历：</h2><table class="teach"><tr><td>阶段</td><td>地点</td><td>时间</td></tr><tr><td>小学</td><td>xxxxxxxxxxxxxxxxxxxx</td><td>2008.09~2014.07</td></tr><tr><td>中学</td><td>xxxxxxxxxxxxxxxxxxxxxxx</td><td>2014.09~2017.07</td></tr><tr><td>高中</td><td>xxxxxxxxxxx</td><td>2017.09~2020.07</td></tr><tr><td>大学</td><td>xx理工大学</td><td>2020.09~至今</td></tr></table><h2>成绩绩点：</h2><!-- Add the image tag below this line --><img src="images/grade.jpg" alt="grade image"><p style="font-family: Arial; font-size: 16px; color: yellow; text-align: left;">以上课程成绩来源于上学期部分科目成绩</p>
</div><div id="forth"><!-- 大标题 --><h1>个人风采</h1><p style="color:yellow;margin-top: 10px">若可，惟愿人间太平，许你一生，不受离别之苦。守着岁月静好，日出而作，日落而息，细水流长。</p><div class="plyr__video-embed rainbow-border" ><video controls crossorigin playsinline><source src="shipin/mylife.mp4" type="video/mp4" /></video></div><h2>照片查看器</h2><div class="gallery-container">
<div id="gallery1"><h2>我的校园</h2><div class="slideshow"><img src="images/kust1.jpg" alt="Image 1"><img src="images/kust2.jpg" alt="Image 2"><img src="images/kust3.jpg" alt="Image 3"><img src="images/kust4.jpg" alt="Image 4"></div><script>var currentImage1 = 0;var images1 = document.querySelectorAll("#gallery1 .slideshow img");function nextSlide1() {images1[currentImage1].style.display = "none";currentImage1 = (currentImage1 + 1) % images1.length;images1[currentImage1].style.display = "block";}setInterval(nextSlide1, 3000);</script>
</div><div id="gallery2"><h2>简单的我</h2><div class="slideshow"><img src="images/me.jpg" alt="Image 1"><img src="images/me1.jpg" alt="Image 2"><img src="images/me2.jpg" alt="Image 3"><img src="images/me3.jpg" alt="Image 4"></div><script>var currentImage2 = 0;var images2 = document.querySelectorAll("#gallery2 .slideshow img");function nextSlide2() {images2[currentImage2].style.display = "none";currentImage2 = (currentImage2 + 1) % images2.length;images2[currentImage2].style.display = "block";}setInterval(nextSlide2, 3000);</script>
</div><div id="gallery3"><h2>考研日记</h2><div class="slideshow"><img src="images/kaoyan1.jpg" alt="Image 1"><img src="images/kaoyan2.jpg" alt="Image 2"><img src="images/kaoyan3.jpg" alt="Image 3"><img src="images/kaoyan4.jpg" alt="Image 4"></div><script>var currentImage3 = 0;var images3 = document.querySelectorAll("#gallery3 .slideshow img");function nextSlide3() {images3[currentImage3].style.display = "none";currentImage3 = (currentImage3 + 1) % images3.length;images3[currentImage3].style.display = "block";}setInterval(nextSlide3, 3000);</script>
</div><div id="gallery4"><h2>旅游风光</h2><div class="slideshow"><img src="images/travel1.jpg" alt="Image 1"><img src="images/travel2.jpg" alt="Image 2"><img src="images/travel3.jpg" alt="Image 3"><img src="images/travel4.jpg" alt="Image 4"></div><script>var currentImage4 = 0;var images4 = document.querySelectorAll("#gallery4 .slideshow img");function nextSlide4() {images4[currentImage4].style.display = "none";currentImage4 = (currentImage4 + 1) % images4.length;images4[currentImage4].style.display = "block";}setInterval(nextSlide4, 3000);</script>
</div></div>
</div><h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
<div id="fifth"><div class="container"><form id="contact-form"><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><label for="phone">&nbsp;</label><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1>与我联系</h1><label for="phone">电话：</label><input type="text" id="phone" name="phone" required><br><br><label for="wechat">微信：</label><input type="text" id="wechat" name="wechat" required><br><br><label for="qq">QQ：</label><input type="text" id="qq" name="qq" required><br><br><label for="email">邮箱：</label><input type="email" id="email" name="email" required><br><br><label for="blog">博客：</label><input type="url" id="blog" name="blog" required><br><br><label for="message">给我留言：</label><textarea id="message" name="message" rows="5" required></textarea><br><br><button type="submit">提交</button></form><div id="output"></div></div>
</div><footer><p>版权所有 &copy;2023 CSAN@终究还是散了</p>
</footer>
</body>
</html>

这个只是选取的html代码，全部代码在我的资源中，链接放在后面供大家获取。

五.最后结果

运行结果：

这里本来是一个页面，但由于截屏长度的原因，这里分开展示。

六.留言

欢迎大家阅读！完整文件的文件夹我已上传到资源中，下载链接在这里。

web前端期末大作业：个人简历相关推荐

HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码常见网页设计作业题材有个 ...
学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
HTML5期末大作业：旅行网站设计——开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例
HTML5期末大作业:旅行网站设计--开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
Web前端期末大作业---响应式美女健身教练瑜伽馆网页设计（HTML+CSS+JavaScript+）实现
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
Web前端期末大作业---汽车主题网页设计002（HTML+CSS+JavaScript+）实现
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有个 ...
web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页 ...
网页设计作业开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例
HTML5期末大作业:旅行网站设计--开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面)
web前端期末大作业 html+css+javascript 全球私人定制旅游网页设计实例(6个页面) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...
web前端期末大作业：文化网站设计——中国风文化html源码(6个页面) HTML+CSS+JavaScript...
web前端期末大作业:文化网站设计--中国风文化html源码(6个页面) HTML+CSS+JavaScript 期末作业HTML代码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到 ...

web前端期末大作业：个人简历