web前端课程作业设计：个人简历

news2025/1/6 20:42:06

一.说明

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

二.题目

1. 大作业题目

个人简历主页设计

2. 内容要求

应尽量包含以下内容：

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

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

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

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

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

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

三.分析

1.布局

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

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

2.各部分实现

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

  1. 视觉风格和布局：您可以通过CSS来设置页面的样式和布局，可以采用一些现成的CSS框架或者自己编写CSS代码。
  2. 四块内容展示：可以使用HTML来创建不同的页面模块，并且通过超链接或者Javascript来实现页面跳转。另外，也可以在一个页面上使用标签和样式来区分四块内容的展示。
  3. 导航条：可以使用HTML和CSS来创建导航栏，并且通过Javascript来实现页面跳转。其中，CSS可以用于设置导航栏的样式和布局，Javascript可以用于实现导航栏的响应功能。
  4. 个人基本信息：可以使用HTML和CSS来设置个人信息的样式和布局，并且在页面上直接展示。另外，也可以设置一个单独的页面来展示更详细的个人信息。
  5. 教育背景：可以使用HTML和CSS来设置教育背景的样式和布局，并且使用表格来展示大学阶段的科目和成绩信息。
  6. 个人风采栏目：可以使用Javascript和CSS来创建自动播放的图片查看器，并且将个人照片或者作品嵌入到查看器中。
  7. 与我联系页面：可以使用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代码，全部代码在我的资源中，链接放在后面供大家获取。

五.最后结果

运行结果：

wFwi.jpg

wH3p.jpg

w9df.jpg

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

六.留言

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/602683.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

企业四要素核验-企业四要素核验接口-api接口

企业四要素核验-企业四要素核验接口-api接口

接口地址&#xff1a; https://登录后显示/pyi/184/358(支持:http/https)) 在线查询&#xff1a;https://www.wapi.cn/api_detail/184/358.html 网站地址&#xff1a;https://www.wapi.cn 返回格式&#xff1a;json,xml 请求方式&#xff1a;GET,POST 请求说明&#xff1a; …
阅读更多...
【实用篇】Elasticsearch01

【实用篇】Elasticsearch01

分布式搜索引擎01 – elasticsearch基础 1.初识elasticsearch 1.1.了解ES 1.1.1.elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; 在GitHub搜索…
阅读更多...
智慧公厕系统如何通过物联网技术提高公厕的管理效率

智慧公厕系统如何通过物联网技术提高公厕的管理效率

智慧公厕系统可以通过物联网技术&#xff0c;实现公共卫生间的智能化管理和服务&#xff0c;提高管理效率。本文将详细介绍智慧公厕系统如何通过物联网技术提高公共卫生间的管理效率&#xff0c;从硬件、软件、系统等方面逐一分析。 XP-智慧厕所方案-HYF20230328&#xff08;16…
阅读更多...
工业企业为什么要用边缘计算网关？

工业企业为什么要用边缘计算网关？

在我们进入智能制造和工业4.0的新时代&#xff0c;工业企业的数据需求正急速增长。传感器&#xff0c;机器和设备每分钟都在产生大量数据&#xff0c;它们对实时处理和分析的需求比以往任何时候都要强烈。这就是为什么工业企业需要边缘计算网关。 边缘计算网关在物联网架构中担…
阅读更多...
大数据：Apache hive分布式sql计算平台，hive架构，hive部署，hive初体验

大数据：Apache hive分布式sql计算平台，hive架构，hive部署，hive初体验

大数据&#xff1a;Apache hive分布式sql计算平台 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&a…
阅读更多...
Java002——JDK的安装以及配置环境变量

Java002——JDK的安装以及配置环境变量

为什么要安装jdk 1、JDK 全称 Java Development Kit&#xff0c;意为 Java 开发工具。&#xff0c;要想开发java程序就必须安装JDK。没有JDK的话&#xff0c;无法编译运行Java程序。 2、JDK包含的基本组件包括以下文件&#xff1a; 　　javac.exe,用于编译java文件&#xff0c…
阅读更多...
不经意传输(OT)了解

不经意传输(OT)了解

概述 OT&#xff0c;不经意传输&#xff0c;常被大量用于安全多方计算中&#xff0c;能够很大程度决定一个SMPC协议的效率。它的核心概念是接收方可以从发送方&#xff08;持有秘密信息&#xff09;手中选择性接收自己想要的信息而接收方对所选择的信息内容一无所知。目前有2-…
阅读更多...
乐谱文件转换，支持批量mscz、mxl、musicxml转mp3等格式

乐谱文件转换，支持批量mscz、mxl、musicxml转mp3等格式

我是一个喜欢听音乐的人&#xff0c;每天都会在路上听着歌放松自己。但是有时候想要听的歌并没有下载下来&#xff0c;或者格式不兼容。 最近我发现了一个神奇的软件——mscz转mp3&#xff0c;可以把乐谱文件转成mp3格式&#xff01; 软件界面简洁明了&#xff0c;使用也非常…
阅读更多...
js的Bom操作

js的Bom操作

1.认识Bom ◼ BOM&#xff1a;浏览器对象模型&#xff08;Browser Object Model&#xff09;  简称 BOM&#xff0c;由浏览器提供的用于处理文档&#xff08;document&#xff09;之外的所有内容的其他对象&#xff1b;  比如navigator、location、history等对象&#xff1…
阅读更多...
YOLOv5改进系列（6）——替换主干网络之 ShuffleNetV2

YOLOv5改进系列（6）——替换主干网络之 ShuffleNetV2

【YOLOv5改进系列】前期回顾： YOLOv5改进系列（0）——重要性能指标与训练结果评价及分析 YOLOv5改进系列（1）——添加SE注意力机制
阅读更多...
预约直播|揭秘鸿蒙全新流量阵地，元服务带来的体验变革

预约直播|揭秘鸿蒙全新流量阵地，元服务带来的体验变革

【导读】 在PC 互联网到移动互联网的演进过程&#xff0c;随着人们对交互和信息获取的智能化要求越来越高&#xff0c;移动终端上的应用生态发展到今天也面临着变革。传统厚重的App&#xff0c;功能齐全&#xff0c;但开发成本高、周期长&#xff0c;且存在搜索、安装、卸载等…
阅读更多...
Mybatis-Plus实战

Mybatis-Plus实战

文章目录 #简介#特性#支持数据库总结1、Mybatis-Plus常用注解2、[条件构造器](https://www.baomidou.com/pages/10c804/#abstractwrapper)2.1 介绍2.2 条件 3、Mybatis-Plus属性配置3.1 Mybatis-Plus常用配置项3.2 mybatis-plus.configuration. 下配置项3.3 配置小结 4、CRUD实…
阅读更多...
javascript基础十四：解释下什么是事件代理？应用场景？

javascript基础十四：解释下什么是事件代理？应用场景？

一、是什么 事件代理&#xff0c;俗地来讲&#xff0c;就是把一个元素响应事件&#xff08;click、keydown…&#xff09;的函数委托到另一个元素 前面讲到&#xff0c;事件流的都会经过三个阶段&#xff1a;捕获阶段 -> 目标阶段 -> 冒泡阶段&#xff0c;而事件委托就是…
阅读更多...
MFA多因素认证：保护你的邮箱、VPN等账户免遭黑客入侵

MFA多因素认证：保护你的邮箱、VPN等账户免遭黑客入侵

多因素认证&#xff08;MFA&#xff09;是防范黑客攻击的重要防线之一。在密码被越来越容易被破解的情况下&#xff0c;多因素认证让你的账户更加安全。本文将详细讲解多因素认证是什么、如何工作以及如何设置多因素认证来保护你的账户。 什么是MFA多因素认证 简单地说&#xf…
阅读更多...
AIGC+开放式社交，为年轻人注入了新的“Soul”？

AIGC+开放式社交，为年轻人注入了新的“Soul”？

5月21日全国助残日&#xff0c;Soul App举办了一场与众不同的线上公益活动&#xff0c;邀请视障用户担任“见习解忧师”&#xff0c;诉说世界更多角落“不完美”的故事&#xff0c;展示人生更多可能&#xff0c;传递温暖与爱。 参与此次派对的“见习解忧师”都是Soul平台上充满…
阅读更多...
OTP动态口令身份认证的多种形式

OTP动态口令身份认证的多种形式

密码无处不在&#xff0c;但却出了名的弱。因此需要新的工具和技术来减少或减轻账户被接管&#xff08;ATO&#xff09;的风险。OTP动态口令身份认证的主要目的就是要确保该用户的身份足够可信。现在&#xff0c;最常见的方法是通过增加某种认证令牌来提供MFA多因素认证。 令牌…
阅读更多...
Linux：日志文件分析

Linux：日志文件分析

日志文件的分类 1内核及系统日志 由系统服务syslog统一进行管理&#xff0c;日志格式基本相似 2 用户日志&#xff1a;记录系统用户登录及退出系统的相关信息 3 程序日志&#xff1b;由各种应用程序独立管理的日志文件&#xff0c;记录格式不统一 日志文件 日志保存位置&#…
阅读更多...
day43_crud

day43_crud

一、CRUD (create, read (retrieve), update, delete) 增 查 改 删 1.1 代码规范 com.qf.功能名.类名 – com.qf.model.Xxx 实体类 com.qf.util.Xxx 工具类 com.qf.servlet.XxxServlet Servlet类,主要是做接收请求作出响应 com.qf.dao.XxxDao Dao类. Data Access Obje…
阅读更多...
hive详解(二)

hive详解(二)

2 hive的两种访问方式 2.4.1 命令行的方式 在前面的操作中&#xff0c;我们都是通过cli的方式访问hive的。我们可以切身的体会到&#xff0c;通过cli的方式访问hive的不足&#xff0c;如&#xff1a;cli太过笨重&#xff0c;需要hive的jar支持。 2.4.2 HiveServer2模式 1.JD…
阅读更多...
Flutter学习二：构建第一个Flutter App

Flutter学习二：构建第一个Flutter App

目录 1 使用vsCode创建APP项目 1.1 创建项目 1.2 调试项目 2 使用AndroidStudio创建APP项目 2.1 创建项目 2.2 调试项目 1 使用vsCode创建APP项目 1.1 创建项目 查看>命令面板&#xff0c;输入Flutter&#xff0c;点击New Project >Application&#xff0c;按流程创…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023