Bootstrap实战练习---Web全栈工程师简历模版

最新推荐文章于 2023-05-08 22:17:15 发布
最新推荐文章于 2023-05-08 22:17:15 发布
阅读量1.5k 收藏 13
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/119521908
版权

head

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web全栈工程师简历模版https://www.eduwork.cn/resume/webjl.html</title>
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--引入Bootstrap CSS-->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!-- 引入CSS Swiper插件 -->
    <link rel="stylesheet" href="css/swiper.min.css">

    <!--引入手风琴CSS-->
    <link rel="stylesheet" href="css/style.css">

    <!--引入 Dplayer css-->
    <link rel="stylesheet" href="css/DPlayer.min.css">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">

      <!-- Swiper demo styles -->
      <style>
      html, body {
          position: relative;
          height: 100%;
      }
      body {
          background: #fff;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color:#000;
          margin: 0;
          padding: 0;
      }
      </style>

</head>

body

  • 导航栏
    在这里插入图片描述
<body>
    <div class="container-fluid" style="background-color: rgb(214, 209, 209);">
        <div class="row">
            <!--导航栏-->
            <div class="col-lg-3 col-md-12 ml-4">
                <section class="bg-dark text-white">
                    <div class="mx-4 py-5 bg-success text-center h4">全栈工程师<br>WEB</div>
                    <br>
                    <div class="mx-4 py-2 bg-success text-center h4 d-block d-lg-none">Menu</div>
                    <nav class="nav flex-column p-3 d-none d-lg-block">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;个人资料</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;技能专长</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;工作经验</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;项目经历</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;教育背景</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;我的作品</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;简历说明</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                    </nav>
                    <div class="text-center py-4">
                        <a class="text-decoration-none text-white h5" href="#">回到首页</a>
                    </div>
                </section>

            </div>
  • 简历图
    在这里插入图片描述
            <!--简历正文-->
            <div class="col-lg-8 col-md-12 mt-5"  style="background-color: #fff;">

                <!--简历图-->
                <div class="row">
                    <div class="card bg-dark text-white">
                        <img src="images2/LOGO3.jpg" class="card-img w-100 h-100" alt="...">
                        <div class="card-img-overlay text-center pt-5 mt-5">
                          <h2 class="card-title pt-5 mt-5">您好! <span class="text-info">我是 Web开发工程师</span></h2>
                          <!--文字轮播-->
                          <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="margin-left: 40%;margin-right: 40%;">
                            <div class="carousel-inner">
                              <div class="carousel-item active">
                                <p class="card-text mode1">Web前端工程师</p>
                              </div>
                              <div class="carousel-item">
                                <p class="card-text mode2">PHP开发工程师</p>
                              </div>
                              <div class="carousel-item">
                                <p class="card-text mode3">系统架构师</p>
                              </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
  • 个人资料
    在这里插入图片描述
                <!--个人资料-->
                <div class="row mt-5 px-3">
                    <div>
                        <div class="text-muted">我是谁 ?</div>
                        <h2 >个人资料</h2>
                    </div>
                    <div class="pr-5">
                        <hr>
                        <p class="">我是一名职业的WEB开发工程师， 具备WEB全栈开发技能。前端可以开发各种WEB页面、响应式布局、 各种交互特效、前后端模板分离和微信小程序开发。后端可以按各种编程思想处理业务逻辑， 设计和编写安全高效的接口，部署高并发的WEB架构，进行各种复杂的大型项目数据库设计和开发。 本人坦诚且有责任心， 有独立进取的品性，勤于动手、善于动脑，适应新环境能力很强。 能在最短时间内掌握从未接触过的新技术，尽自己最大的努力融入新的工作生活。</p>
                    </div>
                    <div class="container mt-3">
                        <div class="row">
                            <div class="col-12 col-md-6 pr-4">
                                <div class="row">
                                    姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名: 学习猿地
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                                <div class="row">
                                    联系电话: 101 1010 0001
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                                <div class="row">
                                    求职岗位: WEB开发工程师
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                            </div>
                            <div class="col-12 col-md-6 pr-4">
                                <div class="row">
                                    电子邮件: lmonkey@eduwork.cn
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                                <div class="row">
                                    出生日期: 1998年8月8日
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                                <div class="row">
                                    期望薪资: 23K/月
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                            </div>
                        </div>

                    </div>
                    <div class="row py-4" style="margin-left: 40%;">
                        <span class="btn btn-info text-center"><img src="images2/图标/html.png" style="height: 18px;width: 18px;">下载简历</span>
                    </div>

                </div>
  • 技术 & 知识
    在这里插入图片描述
                <!--技术 & 知识-->
                <div class="row mt-5 px-3">
                    <div>
                        <div class="text-muted">我最擅长的</div>
                        <h2 >技术 & 知识</h2>
                    </div>
                    <div class="container mt-0">
                        <hr class="p-0 " style="margin-left: -15px;">
                        <div class="row">
                            <div class="col-12 col-lg-6 pr-4">
                                <div class="row">
                                    前端开发
                                    <span class="border bg-dark text-white px-1" style="margin-left: 60%;">100%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" ></div>
                                </div>
                                <div class="row">
                                    后端开发
                                    <span class="border bg-dark text-white px-1" style="margin-left: 60%;">100%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" ></div>
                                </div>
                                <div class="row">
                                    数据库开发
                                    <span class="border bg-dark text-white px-1" style="margin-left: 55%;">94%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 94%;" ></div>
                                </div>
                                <div class="row">
                                    架构师设计
                                    <span class="border bg-dark text-white px-1" style="margin-left: 50%;">87%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 87%;" ></div>
                                </div>
                                <div class="row">
                                    服务器运维
                                    <span class="border bg-dark text-white px-1" style="margin-left: 48%;">83%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 83%;" ></div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6 px-4 ">
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    HTML5 / CSS3 / JavaScript / DOM / BOM /ES6
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    jQuery / BootStrap / Vue / React / 小程序
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    PHP / Composer / Laravel框架 / RESTFul接口
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    Nodejs / WordPress框架 / socket
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    MySQL / Redis / 主从 / 集群
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    Linux / 云服务器 / Apache / Nginx / GIT / 微服务
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    全套开发工具
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    架构设计 / 分布式 / SOA体系
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    团队协作 / 代码管理 / 项目管理
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
  • 工作经验
    在这里插入图片描述
                <!--工作经验-->
                <div class="row mt-5">
                    <div class="pl-4">
                        <div class="text-muted">我的工作经历</div>
                        <h2>工作经验</h2>
                    </div>
                    <hr>
                    <div class="container mt-0" style="margin-left: 0px;">
                        <hr>
                        <!--第一项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2020.1-2020.10</h5>
                                <br>
                                <img src="images/zxy_logo.png" class="w-50 border border-muted border-left-0 border-right-0 border-bottom-0">
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">www.eduplayer.cn</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>项目经理</h5>
                                <p  class="text-muted">1、确保项目目标的实现，领导项目开发团队准时、优质地完成全部工作。<br>
                                    2、 与客户沟通，了解项目的整体需求。并与客户保持一定的联系，即时反馈阶段性的成果，和即时更改客户提出的合理需求。<br>
                                    3、 制定项目开发计划文档，量化任务，并合理分配给相应的人员。<br>
                                    4、 跟踪项目的进度，协调项目组成员之间的合作。<br>
                                    5、 监督生产项目进展各阶段的文档，并即时沟通，保证文档的完整和规范。<br>
                                    6、 参与和控制开发过程中的需求变更，确定要变更需求的情况下，需产生需求变更文档，更改开发计划。<br>
                                    7、 项目提交测试管理，了解测试结果，根据测试的bug的严重程度来重新更改开发计划。<br>
                                    8、 向上汇报，向上级汇报项目的进展情况，需求变更等所有项目信息。<br>
                                    9、 项目完成的时候需要项目总结，产生项目总结文档。<br>
                                </p>
                            </div>
                        </div>

                        <!--第二项工作经验-->
                        <div class="row mt-5">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2019.5-2020.1</h5>
                                <br>
                                <img src="images/logo.png" class="w-50 border border-muted border-left-0 border-right-0 border-bottom-0">
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">www.eduwork.cn</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>Web前端开发工程师 / 小程序开发工程师</h5>
                                <p class="text-muted">公司的官网、日常的运营页面、管理后台的页面优化、小程序的webview页面、 APP的活动页面、视频直播页面、游戏等等设计和开发。工作非常饱和，APP开发选择了轻巧、 高性能、可组件化的Vue.js作为主攻的MVVM框架， 并应用了WebPack，ECMAScript6，Node.js(Express)等技术， 开发工具使用npm、Bower、Gulp.js等, 在工作期间创建自己的一个GitHub项目，能看到我长期保持着对最新技术的学习热度。<br>
                                </p>
                            </div>
                        </div>

                        <!--第三项工作经验-->
                        <div class="row mt-5">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2018.7-2019.5</h5>
                                <br>
                                <img src="images/xxyd_logo.png" class="w-50 border border-muted border-left-0 border-right-0 border-bottom-0">
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">www.lmonkey.com</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>PHP软件工程师</h5>
                                <p class="text-muted">根据产品需求完成项目的任务分析设计，和详细设计和编码，确保项目的进度和质量；<br>
                                    负责后端API设计和开发维护，从构思到执行，编写架构性好的后端代码；<br>
                                    协助其他人员的开发测试，完成测试阶段bug的修改；<br>
                                    参与编写完善各阶段的文档资料；<br>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
  • 项目经历
    在这里插入图片描述
                <!--项目经历-->
                <div class="row mt-5">
                    <div class="pl-4">
                        <div class="text-muted">我参与开发过的项目</div>
                        <h2>项目经历</h2>
                    </div>
                    <hr>
                    <div class="container mt-0" style="margin-left: 0px;">
                        <hr>
                        <!--第一项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2020.4-2020.7</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">图书兄弟小程序</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责前端开发</h5>
                                <p  class="text-muted">
                                    ▷ 项目描述：替代图书光盘，扫描二维码即可观看图书配套视频，完成阶段测试，下载配套源码，阅读扩展文章等，并有成长记录统计和学习交流互动。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、根据图书兄弟小程序需求进行PC端、移动端、微信小程序的开发；<br>
                                    2、配合服务端开发工程师完成系统整体开发，调试等工作；<br>
                                    3、参与项目的技术开发，参与讨论用户体验和细化需求；
                                    4、负责微信小程序上线后的优化与迭代开发维护，持续优化<br>产品性能和用户体验，探索小程序新能力、新技术、新架构应用；<br>
                                    5、负责微信公众平台消息接口开发，负责系统的技术架构和概要设计；<br>
                                    6、负责服务器端和客户端软件的设计、开发和维护；<br>
                                    7、负责微信接口设计、开发和维护；<br>
                                    8、独立完成微信公众服务号的接口设计、开发、数据管理、日常维护和其他后台维护管理工作。<br>
                                    <br>
                                    ▷ 项目业绩：页面显示延迟低于1秒，运行过程无bug，整体项目工期缩短20%。<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第二项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2020.1-2020.4</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">直播电商</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责PHP程序开发</h5>
                                <p  class="text-muted">
                                    ▷ ▷ 项目描述： 支持PC、MAC、Android、IOS、Web、H5、小程序、APP全平台观看 支持外部推流、转播各大主流平台、直播间分发，一端直播多端观看互动 支持微信、微博等主流平台播放，直接连通流量，爆炸式传播。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、负责协助技术总监进行技术评测，bug处理，代码开发；<br>
                                    2、负责网站数据库、栏目、程序模块的设计与开发；<br>
                                    3、负责根据公司要求进行直播电商系统等项目开发；<br>
                                    4、定期与培训部和测试部沟通，获取反馈信息并进行相应的处理；<br>
                                    5、按时按质完成公司下达程度开发、系统评测等工作任务；<br>
                                    6、定期维护系统程序，处理反馈回来的系统bug；<br>
                                    7、网站程序开发文档的编写。<br>
                                    <br>
                                    ▷ 项目业绩：基于Laravel最新版本框架，再封装一层框架，使用项目各个模块相互关联又相互独立，结合分布式架构，可无限扩展服务器。<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第三项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2019.9-2020.1</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">EduPlayer在线教育系统</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责后端接口开发</h5>
                                <p  class="text-muted">
                                    ▷ 项目描述：EduPlayer是一款在线教育平台，支持录播和直播课程，是一款SASS系统，可以为多个机构一键构建自己的网校。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、根据产品文档，与产品沟通，完成系统模型设计；<br>
                                    2、根据 APP UI 界面和交换设计，与前端工程师沟通，完成接口设计；<br>
                                    3、编码实现接口的功能；<br>
                                    4、发布接口服务，配合前端工程师，完成接口对接；<br>
                                    5、接口服务上线后，关注异常，持续优化代码和性能。<br>
                                    <br>
                                    ▷ 项目业绩：完全按RESTFul API规范设计实现，分布式架构，同时支持上万名学生在线学习。<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第四项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2019.5-2019.9</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">团购分销APP</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责前端和项目管理</h5>
                                <p  class="text-muted">
                                    ▷ 项目描述：团购分销是一种S2B2C的零售模式，也就是一种社群分销，团长负责社群运营、链接投放、订单收集和最终的货品分发， 社区居民加入社群后参加活动。 有两级以上的分销模式，都是通过熟人基于微信社交圈来进行获客，社区团购是有自己的供应链， 可以保证当天就可以通过社区团长，送到消费者手里。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、前端框架的设计与实现,负责公司移动端APP架构设计;<br>
                                    2、参与多种平台的应用开发,负责前端交互的实现;<br>
                                    3、配合ui和后台人员完成APP的编码、后期维护,及版本控制；<br>
                                    4、参与系统架构设计、数据库结构设计、业务逻辑抽象、组件封装等编码工作;<br>
                                    5、参与系统的需求分析、设计、评审、编码等开发和运营工作，确保相关系统稳定可靠运行;<br>
                                    6、与系统开发、后端开发工程师保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作。<br>
                                    <br>
                                    ▷ 项目业绩：将高复杂度的业务流程转化为清晰的开发需求，将开发效率提高20%。<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第五项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2018.7-2018.9</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">EduWork考试系统</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责WEB前端开发</h5>
                                <p  class="text-muted">
                                    ▷  项目描述：专为技能等级证书考试设计开发，支持异地考试、自由时间考试的系统，并且支持手机、PC端考试， 支持选择题、填空题、判断题、论述题、子母题等各种题型。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、使用响应式布局并结合React负责产品的前端开发和页面制作，和后端程序开发分离。<br>
                                    2、熟悉W3C标准和各主流浏览器在前端开发中的差异，响应式页面布局，移动HTML5的性能和其他优化，为用户呈现最好的界面交互体验和最好的性能。<br>
                                    3、负责相关产品的需求以及前端程序的实现，提供合理的前端架构。改进和优化开发工具、开发流程、和开发框架。<br>
                                    4、与产品、后台开发人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作；<br>
                                    独立完成功能页面的设计与代码编写，配合产品团队完成功能页面的需求调研和分析。<br>
                                    5、参与服务器端的部分相关工作，在交互体验、产品设计等方面给出了自己的见解。<br>
                                    <br>
                                    ▷ 项目业绩：页面显示速度快，业务流程清晰，运行过程无bug，考试过程无异常。<br>
                                    <br>
                                </p>
                            </div>
                        </div>                        
                    </div>
                </div>
  • 教育背景
    在这里插入图片描述
                <!--教育背景-->
                <div class="row mt-5">
                    <div class="pl-4">
                        <div class="text-muted">我的学习经历</div>
                        <h2>教育背景</h2>
                    </div>
                    <hr>
                    <div class="container mt-0" style="margin-left: 0px;">
                        <hr>
                        <!--第一项教育背景-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2018.1-2018.7</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">融职教育</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>Web全栈工程师就业班</h5>
                                <p  class="text-muted">
                                    √ 掌握Web前后端开发技能，包括HTMl5、CSS3、各种页面布局、JavaScript、DOM、BOM、jQuery、Ajax、BootStrap、 Vue、React、微信小程序、WebAPP、PHP高级编程、Laravel框架、Nodejs开发、MySQL数据库、Redis数据库、Linux服务器、云服务器管理、 程序架构设计、设计模式和算法、项目管理、协作开发等。<br>
                                    √ 在培训期间独立完成4个项目上线；<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第二项教育背景-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2015.7-2019.7</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">XX 科技大学</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>本科 & 软件学院</h5>
                                <p  class="text-muted">
                                    √ 主修课程有C/C++程序设计、Java程序设计、数据结构、程序算法、编译原理、软件工程、操作系统原理、数据库系统原理、网络数据库等。<br>
                                    √ 在校四年均保持排名位于专业前10%；<br>
                                    <br>
                                </p>
                            </div>
                        </div>
                       
                    </div>
                </div>
  • 作品集
    在这里插入图片描述
            <!--作品集-->
                <div class="row mt-5">
                    <div class="pl-4">
                        <div class="text-muted">我的工作</div>
                        <h2>作品集</h2>
                    </div>
                    <div class="container mt-0" >
                        <hr>
                        <ul class="nav mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                              <a class="nav-link text-decoration-none text-body active mode3" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab">全部</a>
                            </li>
                            <li class="nav-item" role="presentation">
                              <a class="nav-link text-decoration-none text-body mode3" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab">项目集</a>
                            </li>
                            <li class="nav-item" role="presentation">
                              <a class="nav-link text-decoration-none text-body mode3" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab">工作拍</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel">
                                <div class="container">
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-1.jpg" target="_blank"><img src="images2/img-1.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-2.jpg" target="_blank"><img src="images2/img-2.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-3.jpg" target="_blank"><img src="images2/img-3.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-4.jpg" target="_blank"><img src="images2/img-4.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-5.jpg" target="_blank"><img src="images2/img-5.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-6.jpg" target="_blank"><img src="images2/img-6.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="pills-profile" role="tabpanel" >
                                <div class="container">
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-5.jpg" target="_blank"><img src="images2/img-5.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="pills-contact" role="tabpanel">
                                <div class="container">
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-1.jpg" target="_blank"><img src="images2/img-1.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-2.jpg" target="_blank"><img src="images2/img-2.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-3.jpg" target="_blank"><img src="images2/img-3.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-4.jpg" target="_blank"><img src="images2/img-4.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-5.jpg" target="_blank"><img src="images2/img-5.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-6.jpg" target="_blank"><img src="images2/img-6.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
  • 简历声明
    在这里插入图片描述
            <!--简历声明-->
            <div class="row my-5">
                <div class="pl-4">
                    <div class="text-muted">简历描述</div>
                    <h2>简历声明</h2>
                </div>
                <div class="container mt-0" style="margin-left: 0px;">
                    <hr>
                    <div class="row">
                        <div class="col-6">
                            <div class="bg-light border p-3 text-muted">这是你在EduWork学习完成WEB全栈工程师就业班课程，并参加了智校云一个阶段的实习工作以后的简历模版。工作经验和项目经历以实现在融职科技参与的真实开发的商业上线项目为准。</div>
                            <br>
                            <div class="text-right">
                                <span class="btn btn-info">申请试学</span>
                            </div>
                        </div>
                        <div class="col-6 text-center">
                            <img src="images2/img1.jpg" class="border border-dark" style="border-radius: 50%;">
                            <div class="pt-3">WEB全栈工程师</div>
                        </div>
                    </div>
                </div>
            </div>
  • 页脚
    在这里插入图片描述
            <!--页脚-->
            <div class="d-flex flex-row justify-content-around bg-light py-5" style="margin-left: -14px;width: 103.5%;">
                <div></div>
                <div></div>
                <div class="p-2 text-center">
                    <div class="border rounded-circle bg-primary pt-2 ml-3 text-white mode2" style="height: 45px;width:45px;">学</div>
                    <div class="btn border text-muted bg-light mt-3 mode1">融职教育</div>
                </div>
                <div class="p-2 text-center">
                    <div class="border rounded-circle bg-primary pt-2 ml-4 text-white mode2" style="height: 45px;width:45px;">习</div>
                    <div class="btn border text-muted bg-light mt-3 mode1">WEB全栈班</div>
                </div>
                <div class="p-2 text-center">
                    <div class="border rounded-circle bg-primary pt-2 ml-3 text-white mode2" style="height: 45px;width:45px;">猿</div>
                    <div class="btn border text-muted bg-light mt-3 mode1">课程大纲</div>
                </div>
                <div class="p-2 text-center">
                    <div class="border rounded-circle bg-primary pt-2 ml-3 text-white mode2" style="height: 45px;width:45px;">地</div>
                    <div class="btn border text-muted bg-light mt-3 mode1">授课安排</div>
                </div>
                <div></div>
                <div></div>
            </div>

            <div class="row">
                <div class="col-12 text-center text-muted bg-dark py-3">2020 © 融职. Design by EduWork</div>
            </div>

JS

    <!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>

    <!--作品集-->
    <script>
        $(function(){
            $(".mode3").hover(function(){
                $(this).addClass("text-danger").removeClass("text-body").show();
            }, function(){
                $(this).addClass("text-body").removeClass("text-danger").show();
            });
            });

    </script>



    <!--页脚-->
    <script>
        $(function(){
            $(".mode2").hover(function(){
                $(this).addClass("bg-info").removeClass("bg-primary").show();
            }, function(){
                $(this).addClass("bg-primary").removeClass("bg-info").show();
            });
            });

        $(function(){
            $(".mode1").hover(function(){
                $(this).addClass("text-white").removeClass("text-muted").show();
                $(this).addClass("bg-info").removeClass("bg-light").show();
            }, function(){
                $(this).addClass("text-muted").removeClass("text-white").show();
                $(this).addClass("bg-light").removeClass("bg-info").show();
            });
            });
    </script>

全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web全栈工程师简历模版https://www.eduwork.cn/resume/webjl.html</title>
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--引入Bootstrap CSS-->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!-- 引入CSS Swiper插件 -->
    <link rel="stylesheet" href="css/swiper.min.css">

    <!--引入手风琴CSS-->
    <link rel="stylesheet" href="css/style.css">

    <!--引入 Dplayer css-->
    <link rel="stylesheet" href="css/DPlayer.min.css">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">

      <!-- Swiper demo styles -->
      <style>
      html, body {
          position: relative;
          height: 100%;
      }
      body {
          background: #fff;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color:#000;
          margin: 0;
          padding: 0;
      }
      </style>

</head>
<body>
    <div class="container-fluid" style="background-color: rgb(214, 209, 209);">
        <div class="row">
            <!--导航栏-->
            <div class="col-lg-3 col-md-12 ml-4">
                <section class="bg-dark text-white">
                    <div class="mx-4 py-5 bg-success text-center h4">全栈工程师<br>WEB</div>
                    <br>
                    <div class="mx-4 py-2 bg-success text-center h4 d-block d-lg-none">Menu</div>
                    <nav class="nav flex-column p-3 d-none d-lg-block">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;个人资料</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;技能专长</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;工作经验</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;项目经历</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;教育背景</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;我的作品</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                        <a class="nav-link text-decoration-none text-white" href="#"><img class="mb-1" src="images2/图标/公益.png" style="height:18px;width:18px;">&nbsp;&nbsp;简历说明</a>
                        <hr class="py-0 my-2 mx-3 bg-secondary">
                    </nav>
                    <div class="text-center py-4">
                        <a class="text-decoration-none text-white h5" href="#">回到首页</a>
                    </div>
                </section>

            </div>


            <!--简历正文-->
            <div class="col-lg-8 col-md-12 mt-5"  style="background-color: #fff;">

                <!--简历图-->
                <div class="row">
                    <div class="card bg-dark text-white">
                        <img src="images2/LOGO3.jpg" class="card-img w-100 h-100" alt="...">
                        <div class="card-img-overlay text-center pt-5 mt-5">
                          <h2 class="card-title pt-5 mt-5">您好! <span class="text-info">我是 Web开发工程师</span></h2>
                          <!--文字轮播-->
                          <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="margin-left: 40%;margin-right: 40%;">
                            <div class="carousel-inner">
                              <div class="carousel-item active">
                                <p class="card-text mode1">Web前端工程师</p>
                              </div>
                              <div class="carousel-item">
                                <p class="card-text mode2">PHP开发工程师</p>
                              </div>
                              <div class="carousel-item">
                                <p class="card-text mode3">系统架构师</p>
                              </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>


                <!--个人资料-->
                <div class="row mt-5 px-3">
                    <div>
                        <div class="text-muted">我是谁 ?</div>
                        <h2 >个人资料</h2>
                    </div>
                    <div class="pr-5">
                        <hr>
                        <p class="">我是一名职业的WEB开发工程师， 具备WEB全栈开发技能。前端可以开发各种WEB页面、响应式布局、 各种交互特效、前后端模板分离和微信小程序开发。后端可以按各种编程思想处理业务逻辑， 设计和编写安全高效的接口，部署高并发的WEB架构，进行各种复杂的大型项目数据库设计和开发。 本人坦诚且有责任心， 有独立进取的品性，勤于动手、善于动脑，适应新环境能力很强。 能在最短时间内掌握从未接触过的新技术，尽自己最大的努力融入新的工作生活。</p>
                    </div>
                    <div class="container mt-3">
                        <div class="row">
                            <div class="col-12 col-md-6 pr-4">
                                <div class="row">
                                    姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名: 学习猿地
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                                <div class="row">
                                    联系电话: 101 1010 0001
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                                <div class="row">
                                    求职岗位: WEB开发工程师
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                            </div>
                            <div class="col-12 col-md-6 pr-4">
                                <div class="row">
                                    电子邮件: lmonkey@eduwork.cn
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                                <div class="row">
                                    出生日期: 1998年8月8日
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                                <div class="row">
                                    期望薪资: 23K/月
                                </div>
                                <hr class="p-0 " style="margin-left: -15px;">
                            </div>
                        </div>

                    </div>
                    <div class="row py-4" style="margin-left: 40%;">
                        <span class="btn btn-info text-center"><img src="images2/图标/html.png" style="height: 18px;width: 18px;">下载简历</span>
                    </div>

                </div>


                <!--技术 & 知识-->
                <div class="row mt-5 px-3">
                    <div>
                        <div class="text-muted">我最擅长的</div>
                        <h2 >技术 & 知识</h2>
                    </div>
                    <div class="container mt-0">
                        <hr class="p-0 " style="margin-left: -15px;">
                        <div class="row">
                            <div class="col-12 col-lg-6 pr-4">
                                <div class="row">
                                    前端开发
                                    <span class="border bg-dark text-white px-1" style="margin-left: 60%;">100%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" ></div>
                                </div>
                                <div class="row">
                                    后端开发
                                    <span class="border bg-dark text-white px-1" style="margin-left: 60%;">100%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;" ></div>
                                </div>
                                <div class="row">
                                    数据库开发
                                    <span class="border bg-dark text-white px-1" style="margin-left: 55%;">94%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 94%;" ></div>
                                </div>
                                <div class="row">
                                    架构师设计
                                    <span class="border bg-dark text-white px-1" style="margin-left: 50%;">87%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 87%;" ></div>
                                </div>
                                <div class="row">
                                    服务器运维
                                    <span class="border bg-dark text-white px-1" style="margin-left: 48%;">83%</span>
                                </div>
                                <div class="progress my-3" style="height: 7px;margin-left: -15px;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 83%;" ></div>
                                </div>
                            </div>
                            <div class="col-12 col-lg-6 px-4 ">
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    HTML5 / CSS3 / JavaScript / DOM / BOM /ES6
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    jQuery / BootStrap / Vue / React / 小程序
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    PHP / Composer / Laravel框架 / RESTFul接口
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    Nodejs / WordPress框架 / socket
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    MySQL / Redis / 主从 / 集群
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    Linux / 云服务器 / Apache / Nginx / GIT / 微服务
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    全套开发工具
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    架构设计 / 分布式 / SOA体系
                                </div>
                                <div class="row mb-3">
                                    <span class="pr-2">
                                        <svg t="1628330794259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1595" width="13" height="13"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="1596"></path></svg>
                                    </span>
                                    团队协作 / 代码管理 / 项目管理
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <!--工作经验-->
                <div class="row mt-5">
                    <div class="pl-4">
                        <div class="text-muted">我的工作经历</div>
                        <h2>工作经验</h2>
                    </div>
                    <hr>
                    <div class="container mt-0" style="margin-left: 0px;">
                        <hr>
                        <!--第一项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2020.1-2020.10</h5>
                                <br>
                                <img src="images/zxy_logo.png" class="w-50 border border-muted border-left-0 border-right-0 border-bottom-0">
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">www.eduplayer.cn</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>项目经理</h5>
                                <p  class="text-muted">1、确保项目目标的实现，领导项目开发团队准时、优质地完成全部工作。<br>
                                    2、 与客户沟通，了解项目的整体需求。并与客户保持一定的联系，即时反馈阶段性的成果，和即时更改客户提出的合理需求。<br>
                                    3、 制定项目开发计划文档，量化任务，并合理分配给相应的人员。<br>
                                    4、 跟踪项目的进度，协调项目组成员之间的合作。<br>
                                    5、 监督生产项目进展各阶段的文档，并即时沟通，保证文档的完整和规范。<br>
                                    6、 参与和控制开发过程中的需求变更，确定要变更需求的情况下，需产生需求变更文档，更改开发计划。<br>
                                    7、 项目提交测试管理，了解测试结果，根据测试的bug的严重程度来重新更改开发计划。<br>
                                    8、 向上汇报，向上级汇报项目的进展情况，需求变更等所有项目信息。<br>
                                    9、 项目完成的时候需要项目总结，产生项目总结文档。<br>
                                </p>
                            </div>
                        </div>

                        <!--第二项工作经验-->
                        <div class="row mt-5">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2019.5-2020.1</h5>
                                <br>
                                <img src="images/logo.png" class="w-50 border border-muted border-left-0 border-right-0 border-bottom-0">
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">www.eduwork.cn</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>Web前端开发工程师 / 小程序开发工程师</h5>
                                <p class="text-muted">公司的官网、日常的运营页面、管理后台的页面优化、小程序的webview页面、 APP的活动页面、视频直播页面、游戏等等设计和开发。工作非常饱和，APP开发选择了轻巧、 高性能、可组件化的Vue.js作为主攻的MVVM框架， 并应用了WebPack，ECMAScript6，Node.js(Express)等技术， 开发工具使用npm、Bower、Gulp.js等, 在工作期间创建自己的一个GitHub项目，能看到我长期保持着对最新技术的学习热度。<br>
                                </p>
                            </div>
                        </div>

                        <!--第三项工作经验-->
                        <div class="row mt-5">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2018.7-2019.5</h5>
                                <br>
                                <img src="images/xxyd_logo.png" class="w-50 border border-muted border-left-0 border-right-0 border-bottom-0">
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">www.lmonkey.com</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>PHP软件工程师</h5>
                                <p class="text-muted">根据产品需求完成项目的任务分析设计，和详细设计和编码，确保项目的进度和质量；<br>
                                    负责后端API设计和开发维护，从构思到执行，编写架构性好的后端代码；<br>
                                    协助其他人员的开发测试，完成测试阶段bug的修改；<br>
                                    参与编写完善各阶段的文档资料；<br>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!--项目经历-->
                <div class="row mt-5">
                    <div class="pl-4">
                        <div class="text-muted">我参与开发过的项目</div>
                        <h2>项目经历</h2>
                    </div>
                    <hr>
                    <div class="container mt-0" style="margin-left: 0px;">
                        <hr>
                        <!--第一项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2020.4-2020.7</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">图书兄弟小程序</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责前端开发</h5>
                                <p  class="text-muted">
                                    ▷ 项目描述：替代图书光盘，扫描二维码即可观看图书配套视频，完成阶段测试，下载配套源码，阅读扩展文章等，并有成长记录统计和学习交流互动。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、根据图书兄弟小程序需求进行PC端、移动端、微信小程序的开发；<br>
                                    2、配合服务端开发工程师完成系统整体开发，调试等工作；<br>
                                    3、参与项目的技术开发，参与讨论用户体验和细化需求；
                                    4、负责微信小程序上线后的优化与迭代开发维护，持续优化<br>产品性能和用户体验，探索小程序新能力、新技术、新架构应用；<br>
                                    5、负责微信公众平台消息接口开发，负责系统的技术架构和概要设计；<br>
                                    6、负责服务器端和客户端软件的设计、开发和维护；<br>
                                    7、负责微信接口设计、开发和维护；<br>
                                    8、独立完成微信公众服务号的接口设计、开发、数据管理、日常维护和其他后台维护管理工作。<br>
                                    <br>
                                    ▷ 项目业绩：页面显示延迟低于1秒，运行过程无bug，整体项目工期缩短20%。<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第二项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2020.1-2020.4</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">直播电商</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责PHP程序开发</h5>
                                <p  class="text-muted">
                                    ▷ ▷ 项目描述： 支持PC、MAC、Android、IOS、Web、H5、小程序、APP全平台观看 支持外部推流、转播各大主流平台、直播间分发，一端直播多端观看互动 支持微信、微博等主流平台播放，直接连通流量，爆炸式传播。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、负责协助技术总监进行技术评测，bug处理，代码开发；<br>
                                    2、负责网站数据库、栏目、程序模块的设计与开发；<br>
                                    3、负责根据公司要求进行直播电商系统等项目开发；<br>
                                    4、定期与培训部和测试部沟通，获取反馈信息并进行相应的处理；<br>
                                    5、按时按质完成公司下达程度开发、系统评测等工作任务；<br>
                                    6、定期维护系统程序，处理反馈回来的系统bug；<br>
                                    7、网站程序开发文档的编写。<br>
                                    <br>
                                    ▷ 项目业绩：基于Laravel最新版本框架，再封装一层框架，使用项目各个模块相互关联又相互独立，结合分布式架构，可无限扩展服务器。<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第三项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2019.9-2020.1</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">EduPlayer在线教育系统</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责后端接口开发</h5>
                                <p  class="text-muted">
                                    ▷ 项目描述：EduPlayer是一款在线教育平台，支持录播和直播课程，是一款SASS系统，可以为多个机构一键构建自己的网校。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、根据产品文档，与产品沟通，完成系统模型设计；<br>
                                    2、根据 APP UI 界面和交换设计，与前端工程师沟通，完成接口设计；<br>
                                    3、编码实现接口的功能；<br>
                                    4、发布接口服务，配合前端工程师，完成接口对接；<br>
                                    5、接口服务上线后，关注异常，持续优化代码和性能。<br>
                                    <br>
                                    ▷ 项目业绩：完全按RESTFul API规范设计实现，分布式架构，同时支持上万名学生在线学习。<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第四项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2019.5-2019.9</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">团购分销APP</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责前端和项目管理</h5>
                                <p  class="text-muted">
                                    ▷ 项目描述：团购分销是一种S2B2C的零售模式，也就是一种社群分销，团长负责社群运营、链接投放、订单收集和最终的货品分发， 社区居民加入社群后参加活动。 有两级以上的分销模式，都是通过熟人基于微信社交圈来进行获客，社区团购是有自己的供应链， 可以保证当天就可以通过社区团长，送到消费者手里。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、前端框架的设计与实现,负责公司移动端APP架构设计;<br>
                                    2、参与多种平台的应用开发,负责前端交互的实现;<br>
                                    3、配合ui和后台人员完成APP的编码、后期维护,及版本控制；<br>
                                    4、参与系统架构设计、数据库结构设计、业务逻辑抽象、组件封装等编码工作;<br>
                                    5、参与系统的需求分析、设计、评审、编码等开发和运营工作，确保相关系统稳定可靠运行;<br>
                                    6、与系统开发、后端开发工程师保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作。<br>
                                    <br>
                                    ▷ 项目业绩：将高复杂度的业务流程转化为清晰的开发需求，将开发效率提高20%。<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第五项工作经验-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2018.7-2018.9</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">EduWork考试系统</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>负责WEB前端开发</h5>
                                <p  class="text-muted">
                                    ▷  项目描述：专为技能等级证书考试设计开发，支持异地考试、自由时间考试的系统，并且支持手机、PC端考试， 支持选择题、填空题、判断题、论述题、子母题等各种题型。<br>
                                    <br>
                                    ▷ 项目职责：<br>
                                    1、使用响应式布局并结合React负责产品的前端开发和页面制作，和后端程序开发分离。<br>
                                    2、熟悉W3C标准和各主流浏览器在前端开发中的差异，响应式页面布局，移动HTML5的性能和其他优化，为用户呈现最好的界面交互体验和最好的性能。<br>
                                    3、负责相关产品的需求以及前端程序的实现，提供合理的前端架构。改进和优化开发工具、开发流程、和开发框架。<br>
                                    4、与产品、后台开发人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作；<br>
                                    独立完成功能页面的设计与代码编写，配合产品团队完成功能页面的需求调研和分析。<br>
                                    5、参与服务器端的部分相关工作，在交互体验、产品设计等方面给出了自己的见解。<br>
                                    <br>
                                    ▷ 项目业绩：页面显示速度快，业务流程清晰，运行过程无bug，考试过程无异常。<br>
                                    <br>
                                </p>
                            </div>
                        </div>                        
                    </div>
                </div>

                <!--教育背景-->
                <div class="row mt-5">
                    <div class="pl-4">
                        <div class="text-muted">我的学习经历</div>
                        <h2>教育背景</h2>
                    </div>
                    <hr>
                    <div class="container mt-0" style="margin-left: 0px;">
                        <hr>
                        <!--第一项教育背景-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2018.1-2018.7</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">融职教育</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>Web全栈工程师就业班</h5>
                                <p  class="text-muted">
                                    √ 掌握Web前后端开发技能，包括HTMl5、CSS3、各种页面布局、JavaScript、DOM、BOM、jQuery、Ajax、BootStrap、 Vue、React、微信小程序、WebAPP、PHP高级编程、Laravel框架、Nodejs开发、MySQL数据库、Redis数据库、Linux服务器、云服务器管理、 程序架构设计、设计模式和算法、项目管理、协作开发等。<br>
                                    √ 在培训期间独立完成4个项目上线；<br>
                                    <br>
                                </p>
                            </div>
                        </div>

                        <!--第二项教育背景-->
                        <div class="row">
                            <div class="col-12 col-lg-3 text-right mr-2">
                                <h5>2015.7-2019.7</h5>
                                <br>
                                <br>
                                <h5 style="font-size: 14px;">XX 科技大学</h5>
                            </div>
                            <div class="col-12 col-lg-8 pl-5 border border-muted border-top-0 border-right-0 border-bottom-0">
                                <h5>本科 & 软件学院</h5>
                                <p  class="text-muted">
                                    √ 主修课程有C/C++程序设计、Java程序设计、数据结构、程序算法、编译原理、软件工程、操作系统原理、数据库系统原理、网络数据库等。<br>
                                    √ 在校四年均保持排名位于专业前10%；<br>
                                    <br>
                                </p>
                            </div>
                        </div>
                       
                    </div>
                </div>

            <!--作品集-->
                <div class="row mt-5">
                    <div class="pl-4">
                        <div class="text-muted">我的工作</div>
                        <h2>作品集</h2>
                    </div>
                    <div class="container mt-0" >
                        <hr>
                        <ul class="nav mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                              <a class="nav-link text-decoration-none text-body active mode3" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab">全部</a>
                            </li>
                            <li class="nav-item" role="presentation">
                              <a class="nav-link text-decoration-none text-body mode3" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab">项目集</a>
                            </li>
                            <li class="nav-item" role="presentation">
                              <a class="nav-link text-decoration-none text-body mode3" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab">工作拍</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel">
                                <div class="container">
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-1.jpg" target="_blank"><img src="images2/img-1.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-2.jpg" target="_blank"><img src="images2/img-2.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-3.jpg" target="_blank"><img src="images2/img-3.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-4.jpg" target="_blank"><img src="images2/img-4.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-5.jpg" target="_blank"><img src="images2/img-5.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-6.jpg" target="_blank"><img src="images2/img-6.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="pills-profile" role="tabpanel" >
                                <div class="container">
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-5.jpg" target="_blank"><img src="images2/img-5.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="pills-contact" role="tabpanel">
                                <div class="container">
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-1.jpg" target="_blank"><img src="images2/img-1.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-2.jpg" target="_blank"><img src="images2/img-2.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-3.jpg" target="_blank"><img src="images2/img-3.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                    <div class="row mt-4">
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-4.jpg" target="_blank"><img src="images2/img-4.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-5.jpg" target="_blank"><img src="images2/img-5.jpg" class="img-fluid" alt=""></a></div>
                                        <div class="col-md-12 col-lg-4"><a href="images2/img-6.jpg" target="_blank"><img src="images2/img-6.jpg" class="img-fluid" alt=""></a></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>


            <!--简历声明-->
            <div class="row my-5">
                <div class="pl-4">
                    <div class="text-muted">简历描述</div>
                    <h2>简历声明</h2>
                </div>
                <div class="container mt-0" style="margin-left: 0px;">
                    <hr>
                    <div class="row">
                        <div class="col-6">
                            <div class="bg-light border p-3 text-muted">这是你在EduWork学习完成WEB全栈工程师就业班课程，并参加了智校云一个阶段的实习工作以后的简历模版。工作经验和项目经历以实现在融职科技参与的真实开发的商业上线项目为准。</div>
                            <br>
                            <div class="text-right">
                                <span class="btn btn-info">申请试学</span>
                            </div>
                        </div>
                        <div class="col-6 text-center">
                            <img src="images2/img1.jpg" class="border border-dark" style="border-radius: 50%;">
                            <div class="pt-3">WEB全栈工程师</div>
                        </div>
                    </div>
                </div>
            </div>
                    

            <!--页脚-->
            <div class="d-flex flex-row justify-content-around bg-light py-5" style="margin-left: -14px;width: 103.5%;">
                <div></div>
                <div></div>
                <div class="p-2 text-center">
                    <div class="border rounded-circle bg-primary pt-2 ml-3 text-white mode2" style="height: 45px;width:45px;">学</div>
                    <div class="btn border text-muted bg-light mt-3 mode1">融职教育</div>
                </div>
                <div class="p-2 text-center">
                    <div class="border rounded-circle bg-primary pt-2 ml-4 text-white mode2" style="height: 45px;width:45px;">习</div>
                    <div class="btn border text-muted bg-light mt-3 mode1">WEB全栈班</div>
                </div>
                <div class="p-2 text-center">
                    <div class="border rounded-circle bg-primary pt-2 ml-3 text-white mode2" style="height: 45px;width:45px;">猿</div>
                    <div class="btn border text-muted bg-light mt-3 mode1">课程大纲</div>
                </div>
                <div class="p-2 text-center">
                    <div class="border rounded-circle bg-primary pt-2 ml-3 text-white mode2" style="height: 45px;width:45px;">地</div>
                    <div class="btn border text-muted bg-light mt-3 mode1">授课安排</div>
                </div>
                <div></div>
                <div></div>
            </div>

            <div class="row">
                <div class="col-12 text-center text-muted bg-dark py-3">2020 © 融职. Design by EduWork</div>
            </div>
            </div>

        </div>
    </div>



    <!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>

    <!--作品集-->
    <script>
        $(function(){
            $(".mode3").hover(function(){
                $(this).addClass("text-danger").removeClass("text-body").show();
            }, function(){
                $(this).addClass("text-body").removeClass("text-danger").show();
            });
            });

    </script>



    <!--页脚-->
    <script>
        $(function(){
            $(".mode2").hover(function(){
                $(this).addClass("bg-info").removeClass("bg-primary").show();
            }, function(){
                $(this).addClass("bg-primary").removeClass("bg-info").show();
            });
            });

        $(function(){
            $(".mode1").hover(function(){
                $(this).addClass("text-white").removeClass("text-muted").show();
                $(this).addClass("bg-info").removeClass("bg-light").show();
            }, function(){
                $(this).addClass("text-muted").removeClass("text-white").show();
                $(this).addClass("bg-light").removeClass("bg-info").show();
            });
            });
    </script>

</body>
</html>
i see the future
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用HTML+bootstrap制作个人简历
欢乐打代码！
10-26 3375
用HTML+bootstrap制作个人简历。
全栈工程师个人简历模板.docx
07-10
全栈工程师个人简历模板.docx全栈工程师个人简历模板.docx全栈工程师个人简历模板.docx全栈工程师个人简历模板.docx全栈工程师个人简历模板.docx全栈工程师个人简历模板.docx全栈工程师个人简历模板.docx全栈工程师个人简历模板.docx
如何写出让面试官眼前一亮的Java开发简历（附模板）
热门推荐
ONESTARの博客
10-25 4万+
目录 零、前言 一、页首 二、基本信息 三、专业技能 四、工作经历 五、教育背景 六、自我评价 七、福利 零、前言 关注文末公众号，回复【简历】领取简历模板 对于程序员找工作而言，简历可以说是整个面试过程中至关重要的一环，HR每天要过几百上千份简历，如何在几秒内就让HR记住你的简历，让面试官眼前一亮？ 总体来说，对于程序员的简历，一切从简，不要弄的花里胡哨，简约的模板，简约的字体，颜色黑白就好，要让HR有看下去的欲望，内容要突出个人亮点，下面会细说，文末会分享我自己前段时间出去面
nodejs全栈工程师简历
qq_22188085的博客
05-08 990
个人简历
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
m0_69034993的博客
11-07 7976
考虑到Bootstrap提供的.border类默认边框颜色是淡灰色，在实际开发中如果想要修改边框颜色，可以使用.border-*来设置想要的场景颜色。可以使用.text-white-数值和.text-black-数值来设置颜色的透明度效果，后面的数值表示的是透明度。Bootstrap提供了十几个辅助工具类，包括边框、清除浮动、颜色、display、浮动、定位、文本对齐等。Bootstrap提供了边框类样式，可以快速地添加、删除边框，也可以设置边框的颜色，边框的圆角。也可以设置某一个方向上的边框。
bootstrap-5.1.3-dist.zip
11-11
bootstrap 发布版本 5.1.3
bootstrap-table-zh-CN.js
08-27
bootstrap-table-zh-CN.js,有需要就下载吧
startbootstrap-sb-admin-2-master
09-26
大名鼎鼎的 sb 模板，这个我就不做太多的介绍了，用上就知道了。 demo：https://blackrockdigital.github.io/startbootstrap-sb-admin/
startbootstrap-sb-admin-master.zip
09-26
大名鼎鼎的 sb 模板，这个我就不做太多的介绍了，用上就知道了。 demo：https://blackrockdigital.github.io/startbootstrap-sb-admin/
bootstrap-5.3.0-alpha1.zip
01-11
最流行的 HTML、CSS 和 JavaScript 框架，用于在 Web 上开发响应式移动优先项目
Bootstrap响应式个人简历.zip
12-08
该模版基于bootstrap与jQuery制作,基本满足日常后台需要,修改时可根据自身需求,来定制后台模版。
Resume:基于Bootstrap制作的极简个人简历静态模板
04-30
Resume 基于Bootstrap制作的极简个人简历模板
全栈工程师个人简历模板
01-02
这是一份全栈工程师个人简历模板，请下载修改后再使用，有关it专业类的工作，招聘方最看重能力和经验，大...该文档为全栈工程师个人简历模板，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
JAVA 工程师简历
03-08
请用空格分隔，最多填写5个。点击右请用空格分隔，最多填写5个。点击右
bootstrap个人简历
m0_62552215的博客
05-29 1312
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>vCard - About</title> <!-- Meta Data --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view...
学习响应式BootStrap来写融职教育网站，Bootsrtap第十三天讲师列表栏目
god953的博客
07-29 192
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>融职教育</title> <!-- 移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
java全栈工程师简历,全栈工程师：全栈JavaScript简介
weixin_34812649的博客
03-15 720
如今，使用构建的任何Web应用程序，需要做出许多架构决策，追求要做出正确的选择：能够实现快速开发，不断迭代，最大效率，速度与稳健性等的开发技术。全栈工程师是Web应用程序开发最主要的角色之一，下面我们将概述为什么全栈JavaScript更加适合全栈开发。从1998年开始，我们在服务器端的大部分开发中都使用了Perl。但即Perl占据大部分市场，但我们在客户端也有JavaScript。在过后Web服...
JAVA全栈简历技术栈
Developer
07-06 2311
前端 Html CSS Sass JavaScript Jquery Ajax Bootstrap/Layui Node.js ES6 Npm Babel 前端模块化 WebPack Vue Uniapp React 后端 Java SE基础(最难) 计算机基础知识 Java 入门基础知识 基本数据类型 数组 面向对象编程 异常 常用类 集合框架 IO流 多线程 网络编程 注解 反射 JUC Java8新特性 数据结构与算法 JVM
全栈工程师 是个啥
cao919的专栏Net
06-06 1282
创业公司不可能像大公司一样，各方面的人才都有。所以需要一个多面手，各种活都能一肩挑，独挡多面的万金油。对于创业公司，不可能说DBA前端后端客户端各种人才全都备齐了，很多工作请人又不饱和，不请人又没法做，外包又不放心质量，所以全栈工程师是省钱的一妙招。虽然说全栈工程师工资会比一般的工程师会高很多，但综合下来，成本会低很多。
java全栈工程师 自我评价
最新发布
03-09
Java全栈工程师是指在Java技术栈上具备全面开发能力的工程师。他们能够独立完成从前端到后端的开发任务，并具备一定的数据库和服务器管理经验。以下是Java全栈工程师的主要技能和职责： 1. 前端开发：Java全栈工程师需要熟悉HTML、CSS和JavaScript等前端技术，能够使用前端框架（如React、Angular等）进行页面开发和交互设计。 2. 后端开发：Java全栈工程师需要精通Java语言和相关的开发框架（如Spring、Spring Boot等），能够设计和实现高效可靠的后端服务。 3. 数据库管理：Java全栈工程师需要熟悉关系型数据库（如MySQL、Oracle等）和非关系型数据库（如MongoDB、Redis等），能够进行数据库设计、优化和维护。 4. 服务器管理：Java全栈工程师需要了解服务器的基本原理和常用操作系统（如Linux），能够进行服务器的部署、配置和监控。 5. 项目管理：Java全栈工程师需要具备良好的项目管理能力，能够协调团队成员、制定开发计划并按时交付高质量的代码。 自我评价方面，作为Java全栈工程师，我具备以下特点： 1. 扎实的Java编程基础和全栈开发经验； 2. 能够独立完成从需求分析到系统上线的全流程开发； 3. 具备良好的团队合作和沟通能力，能够与产品、设计和测试等团队紧密配合； 4. 对新技术有持续学习的热情，能够不断提升自己的技术水平。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值