基于bootstrap4技术实现个人简历
index.html主页部分
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--引入css文件-->
<!-- Bootstrap核心css文件-->
<link rel="stylesheet" href="./css/bootstrap.css">
<!-- 字体图标文件-->
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<!-- 自定义样式-->
<link rel="stylesheet" href="./css/uos.css">
<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="./js/bootstrap.js"></script>
<title>个人简历</title>
</head>
<body>
<div class="container">
<div class="row">
<!-- 左侧信息栏-->
<div class="col-sm-12 col-md-3 left">
<div class="row justify-content-between">
<div class="col-6 col-sm-5 col-md-12 p-4">
<img src="https://5b0988e595225.cdn.sohucs.com/images/20181104/6ab3b78d450b4149af859f32c23fbcba.jpeg"
alt="userPhoto"
class="img-fluid p-2 border">
<h3 class="text-white text-center">白鹭</h3>
<h5 class="text-center">求职意向:网站开发</h5>
</div>
<div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
<h4>出生年月</h4>
<p>1995年10月10号</p>
<h4>联系电话</h4>
<p>12343212345</p>
<h4>电子邮箱</h4>
<p>abcd1234@qq.com</p>
<h4>联系地址</h4>
<p>北京市朝阳区</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-9 right p-0">
<!-- 导航栏-->
<div class="my-4">
<ul class="clearfix">
<li class="float-sm-left">
<i class="fa fa-user-circle-o fa-2x">
<a href="index.html" class="ml-2">个人履历</a>
</i>
</li>
<li class="float-sm-left mx-sm-5">
<i class="fa fa-envelope-o fa-2x">
<a href="contact.html" class="ml-2">请给我发邮件</a>
</i>
</li>
<li class="float-sm-left">
<i class="fa fa-home fa-2x">
<a href="photo.html" class="ml-2">照片</a>
</i>
</li>
</ul>
</div>
<!-- 工作经历-->
<h5 class="color1">工作经历</h5>
<div class="px-5 py-2">
<table class="table">
<thead class="table-success">
<tr>
<th scope="col">#</th>
<th scope="col">时间</th>
<th scope="col">单位</th>
<th scope="col">职位</th>
</tr>
</thead>
<tbody class="table-info">
<tr>
<th>1</th>
<td>2018/8-2019/10</td>
<td>八面恒通网络公司</td>
<td>软件测试工程师</td>
</tr>
<tr>
<th>2</th>
<td>2019/11-2020/10</td>
<td>千古网络科技公司</td>
<td>软件工程师</td>
</tr>
<tr>
<th>3</th>
<td>2020/12-至今</td>
<td>冰原网络科技公司</td>
<td>前端工程师</td>
</tr>
</tbody>
</table>
</div>
<!-- 专业技能-->
<h5 class="color2">专业技能</h5>
<div class="px-5 py-2">
<!-- 嵌套格栅-->
<div class="row">
<div class="col-6">
<!-- 使用卡片组件-->
<div class="card border-primary text-primary">
<div class="card-header border-primary">擅长的技能</div>
<div class="card-body">
<p class="card-text">
HTML、CSS、JavaScript、jQuery、bootstrap、Vue.js、Angular.js、node.js、PHP、MySQL</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card border-success text-success">
<div class="card-header border-success">熟悉的技能</div>
<div class="card-body">
<p class="card-text">C语言、C++、C#、Java、Oracle、Python</p>
</div>
</div>
</div>
</div>
</div>
<!-- 教育经历-->
<h5 class="color3">教育经历</h5>
<div class="px-5 py-2">
<ul class="list-group">
<li class="list-group-item list-group-item-warning">
<div class="row">
<div class="col-4">时间</div>
<div class="col-4">学校</div>
<div class="col-4">专业</div>
</div>
</li>
<li class="list-group-item list-group-item-info">
<div class="row">
<div class="col-4">2013/6-2017/6</div>
<div class="col-4">新疆大学</div>
<div class="col-4">计算机科学与技术</div>
</div>
</li>
<li class="list-group-item list-group-item-info">
<div class="row">
<div class="col-4">2017/8-2018/6</div>
<div class="col-4">软件开发公司</div>
<div class="col-4">web前端工程师</div>
</div>
</li>
</ul>
</div>
<!-- 综合概述-->
<h5 class="color4">综合概述</h5>
<div class="px-5 py-2">
<div id="accordion">
<div class="card">
<div class="card-header">
<a href="#collapseOne" class="card-link" data-toggle="collapse">获得证书</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
<ul class="list-group">
<li class="list-group-item list-group-item-info">
1、英语等级证书：大学四、六级证书（CET4,CET6）。
</li>
<li class="list-group-item list-group-item-info">
2、计算机证书：全国计算机二级及三级和四级。
</li>
<li class="list-group-item list-group-item-info">
3、学校证书包括：奖学金证书、三好学生、优秀毕业生、优秀班干部。
</li>
<li class="list-group-item list-group-item-info">
4、财务类证书：注册会计师。
</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a href="#collapseTwo" class="collapsed card-link" data-toggle="collapse">自我评价</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
本人热爱学习，工作态度严谨认真，责任心强，有很好的团队合作能力。有良好的分析，解决问题的思维。诚实、稳重、勤奋、积极上进，
拥有丰富的大中型企业管理经验，有较强的团队管理能力，良好的沟通协调组织能力，敏锐的洞察力，自信是我的魅力。
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a href="#collapseThree" class="collapsed card-link" data-toggle="collapse">兴趣爱好</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
<ul class="list-group">
<li class="list-group-item list-group-item-info">阅读类：读报、看杂志</li>
<li class="list-group-item list-group-item-info">运动类：篮球、足球、乒乓球</li>
<li class="list-group-item list-group-item-info">饮食类：西餐、川菜</li>
<li class="list-group-item list-group-item-info">音乐类：古典、轻音乐</li>
<li class="list-group-item list-group-item-info">服饰类：正式、休闲</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
posted on 2023-05-05 14:25 Indian_Mysore 阅读(402) 评论(3) 收藏 举报
浙公网安备 33010602011771号