用HTML+bootstrap制作个人简历

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script><title>个人简历</title><style>body {background-color: pink;}.card {background-color: #66ccff;width: 720px;height: 200px;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;border-radius: 10px;text-align: center;/* line-height: 200px; */}.col-sm-7 {background-color: #666;}.col-sm-7 .card {background-color: white;}.col-sm-3 .card {background-color: #fff;}</style></head><body><div class="container"><div class="row"><div class=" col-sm-7"><div class="card"><div class="card-body" style="text-align: center;padding-top: 50px;"><h1 style="padding-bottom: 15px;">求职简历</h1><h2>求职意向：前端实习生</h2></div></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">教育背景</p><table><thead><tr>xxxx学校 </tr><tr>xxxx学院 </tr><tr>xxxx-xx-xx </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">工作经验</p><table><thead><tr>xxxx公司 </tr><tr>xxxx岗位 </tr><tr>xxxx-xx-xx 至今 </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">自我评价</p><table><thead><tr>xxxx公司 </tr><tr>xxxx岗位 </tr><tr>xxxx-xx-xx 至今 </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">获得荣誉</p><table><thead><tr>xxxx公司 </tr><tr>xxxx岗位 </tr><tr>xxxx-xx-xx 至今 </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div><div class="card"><pstyle="background-color: #ffccff;border-radius: 10px;height: 50px;width: 100%;line-height: 50px;">学校经历</p><table><thead><tr>xxxx公司 </tr><tr>xxxx岗位 </tr><tr>xxxx-xx-xx 至今 </tr></thead><tbody><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></tbody></table></div></div><div class=" col-sm-3" style="background-color: #ccc;"><div class="card" style="width: 300px;height: 400px;margin-top:20px"><div class="bg-img"><img src="/1.jpg" alt=""></div></div><div class="card" style="width: 300px;height: 400px;margin-top:20px"><div class="card-body">姓名：xxx</div><div class="card-body">年龄：xxx</div><div class="card-body">性别：xxx</div><div class="card-body">电话：xxx</div><div class="card-body">邮箱：xxxxx@xxxx.qq.com</div><div class="card-body">籍贯：xxx-xxx-xxx-xxx村</div></div><div class="card" style="width: 300px;height: 400px;margin-top:20px"><p>技能等级</p><br><div class="progress"><div class="progress-bar" style="width:750%"></div><i>c语言</i></div><br><div class="progress"><div class="progress-bar bg-success" style="width:60%"></div><i>java</i></div><br><div class="progress"><div class="progress-bar bg-info" style="width:80%"></div><i>javascript</i></div><br><div class="progress"><div class="progress-bar bg-warning" style="width:90%"></div><i>Html</i></div><br><div class="progress"><div class="progress-bar bg-danger" style="width:70%"></div><i>css</i></div></div></div></div></div></body>
</html>

喜欢赶紧收藏。

用HTML+bootstrap制作个人简历相关推荐

Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
制作个人简历网页代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
求职特训营火热来袭阿里大咖教你制作专业简历
**简介:**金三银四黄金求职季,阿里专家倾心打造五节求职精品课程,从面试官角度切入讲解,帮助同学们五天快速掌握简历过关的技能,更有资深专家直播在线答疑! 一份高通过率的简历是什么样子?为什么你投了这 ...
求职特训营火热来袭，阿里大咖教你制作专业简历
**简介:**金三银四黄金求职季,阿里专家倾心打造五节求职精品课程,从面试官角度切入讲解,帮助同学们五天快速掌握简历过关的技能,更有资深专家直播在线答疑! 一份高通过率的简历是什么样子?为什么你投了这 ...
20个使用Bootstrap制作的前端框架网站案例
20个使用Bootstrap制作的前端框架网站案例转载于:https://www.cnblogs.com/zhujiabin/p/5852310.html
Word怎么在图片上制作一个简历封面?
Word怎么在图片上制作一个简历封面?Word中想要设计一个简历封面,该怎么设计呢?下面我们就来看看详细的制作方法,需要的朋友可以参考下想要给自己的简历制作一个封面,该怎么制作一个风景图片效果的封面 ...
秋招实习季，教你制作在线简历
这篇教程教你制作的简历本质上是部署在Gitee上,依赖Gitee Pages服务的静态页面,制作它需要的知识仅包括前端三件套,即HTML.CSS和Javascript.当然,即使你没有任何代码基础,也 ...
使用form表单和table表格制作个人简历
使用form表单和table表格制作个人简历制作的如下图: 代码如下: <!DOCTYPE html> <html><head><meta charset= ...
ppt如何制作个人简历？
毕业在即,一份让人眼前一亮的个人简历ppt模板,将是一块非常好用的敲门砖,那么ppt模板制作个人简历操作方法是什么呢?ppt家园就来介绍一下简历ppt模板制作的技巧吧. 第一,打开powerpoint ...
手机wps怎么改html文件后缀名,手机WPS如何制作个人简历 WPS一键修改文档重命名方法分享...
目前有着不少的用户都是用WPS手机版,但是大多数的用户都整个APP都还不是很熟悉,比如想要制作个人简历应该怎么操作?还有应该如何修改文档重命名呢?下面就和小编一起来详细的了解下吧. 手机WPS如何制作 ...

用HTML+bootstrap制作个人简历

用HTML+bootstrap制作个人简历相关推荐

最新文章

热门文章