使用bootstrap打造卡片个人简历

你想把简历制作成这样吗？

用你的手机扫一扫上面的二维码看看。（网页文件，卡片photoshop文件这里下载）

首先你要到腾讯云注册个帐号，选择对象储存，创建存储桶，把修改好的网页文件上传上去，再选择基础配置，到静态网站选择开启，把访问节点上的网址复制下来到浏览器打开，如果你能看到网页就成功了。

现在用你的手机浏览器打开上面网址，并生成二维码，再发送回电脑，制作卡片（photoshop)，印制名片，你的名片简历就成了。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><link rel="icon" href="grjl.png"><title>小熊猫 个人简历</title><!-- Bootstrap core CSS --><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><style>body{padding-top:50px;margin:0;       border:0;           }.tool{position:fixed;right:20px;bottom:20px;width:50px;height:100px;       padding:5px;border:2px solid #000;}.tool-button{background-color:#dedede;width:100%;height:40px;margin-bottom:5px;font-weight:bold;text-align:center;padding-top:10px;}.c{margin:0 auto;max-width:400px;left:0;right:0;padding:5px;}.c-title{font-weight:bold;border:1px solid #000;border-radius:10px;padding:5px;float:left;background-color:#dedede;}.c-hr{      margin-top:15px;width:100%;border:1px solid #000;}</style></head>
<body><audio id="music" src="grjl.mp3" autoplay></audio><div class="tool"><div class="tool-button" id="music_control">音乐</div><div class="tool-button" id="top_control">顶部</div></div><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">选择菜单</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">小熊猫 个人简历</a></div><div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><a href="#">基本资料</a></li><li><a href="#">教育背景</a></li><li><a href="#">工作经历</a></li><li><a href="#">个人能力</a></li><li><a href="#">自我评价</a></li><li><a href="#">联系我</a></li></ul></div></div></nav><div class="c"><div style="clear:both;text-align:center;"><img src="photo.jpg"></img></div></div><div class="c" id="jbzl"><div class="c-title">&emsp;基本资料&emsp;</div><div class="c-hr"></div><div style="clear:both;"></div><div style="float:left;width:50%;padding-top:10px;padding-left:10px;"><p>姓名：小熊猫</p><p>性别：男</p><p>籍贯：广东</p><p>联系电话：88888888888</p><p>求职意向：销售</p></div><div style="float:left;width:50%;padding-top:10px;padding-left:10px;"><p>出生年月：1990.00.00</p><p>政治面貌：群众</p><p>学历：本科</p><p>专业：计算机软件</p><p>毕业院校：广东大学</p></div>       <div style="clear:both;"></div></div>  <div class="c" id="jybj"><div class="c-title">&emsp;教育背景&emsp;</div><div class="c-hr"></div><div style="clear:both;"></div><div style="float:left;width:33.33%;padding-top:10px;padding-left:10px;"><p>2003-2006</p></div><div style="float:left;width:33.33%;padding-top:10px;padding-left:10px;"><p>广东大学</p></div><div style="float:left;width:33.33%;padding-top:10px;padding-left:10px;"><p>工商管理</p></div>    <div style="clear:both;padding-left:10px;padding-right:5px;">主修课程：统计学、市场营销、国际市场营销、市场调查与预测、商业心理学、广告学等<br>在校活动：GPA：3.8/4.0 在校四年均保持排名位于专业前10%</div>      </div><div class="c" id="gzjl"><div class="c-title">&emsp;工作经历&emsp;</div><div class="c-hr"></div><div style="clear:both;"></div><div style="float:left;width:33.33%;padding-top:10px;padding-left:10px;"><p>2015-至今</p></div><div style="float:left;width:33.33%;padding-top:10px;padding-left:10px;"><p>熊猫办公有限公司</p></div><div style="float:left;width:33.33%;padding-top:10px;padding-left:10px;"><p>销售总监</p></div>  <div style="clear:both;padding-left:10px;padding-right:5px;">工作描述：<br>独立开发新客户，完成客户跟进、签约及后续服务工作；<br>定期与合作客户进行沟通，与客户建立并维持长期稳定的合作伙伴关系；<br>会展业务洽谈推广，搜集市场信息和竞争对手信息，展会期间和团队一起完成会场服务工作；<br>协助落实会展服务实施，协调整合各方资源，确认和执行活动方案，对活动全流程进行管理。</div><div style="float:left;width:33.33%;padding-top:10px;padding-left:10px;"><p>2011-2015</p></div><div style="float:left;width:33.33%;padding-top:10px;padding-left:10px;"><p>熊猫办公有限公司</p></div><div style="float:left;width:33.33%;padding-top:10px;padding-left:10px;"><p>销售助理</p></div> <div style="clear:both;padding-left:10px;padding-right:5px;">工作描述：<br>在职期间完成销售订单50余单，开拓渠道3家，维系稳定客户12家；<br>锻炼了销售的商务沟通能力，能够从营销的角度规划销售方案。</div></div><div class="c" id="grnl"><div class="c-title">&emsp;个人能力&emsp;</div><div class="c-hr"></div>        <div style="clear:both;padding-top:10px;padding-left:10px;padding-right:5px;">         语言技能：英语CET6、日语、韩语<br>专业技能：熟练掌握营销专业知识，熟悉商务流程，掌握销售技巧<br>办公技能：熟练使用Office办公软件、Axure RP、Visio</div>     </div><div class="c" id="zwpj"><div class="c-title">&emsp;自我评价&emsp;</div><div class="c-hr"></div>      <div style="clear:both;padding-top:10px;padding-left:10px;padding-right:5px;">     工作积极认真，细心负责，熟练运用办公自动化软件，善于在工作中提出问题，发现问题，解决问题，有较强的分析能力；勤奋好学，踏实肯干，动手能力强，认真负责，有很强的社会责任感；坚毅不拔，吃苦耐劳，喜欢和善于迎接新挑战。</div>        </div><div class="c" id="lxw"><div class="c-title">&emsp;联系我&emsp;</div><div class="c-hr"></div><div style="clear:both;padding-top:10px;padding-left:10px;padding-right:5px;"><p>我珍惜每一次的面试机会，请填写下面信息给我发条短信或者直接拔打我电话，谢谢！</p><p><div class="input-group"><span class="input-group-addon">贵公司名称：</span><input type="text" class="form-control" id="mc"></div></p><p><div class="input-group"><span class="input-group-addon">贵公司地址：</span><input type="text" class="form-control"  id="dz"></div></p><p><div class="input-group"><span class="input-group-addon">&emsp;面试时间：</span><input type="text" class="form-control" id="mssj"></div></p><p><div style="clear:both;text-align:right;padding-bottom:500px;"><button type="button" class="btn btn-default" id="sms">填好了给我发短信</button><button type="button" class="btn btn-default" id="call">打我电话88888888888</button></div></p></div>         </div><!-- Bootstrap core JavaScript================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script>$( function(){var d=new Date();$("#mssj").val(d.getFullYear()+"-"+((d.getMonth()+101)+"").substr(1)+"-"+((d.getDate()+100)+"").substr(1)+" ");if(d.getHours()>12){$("#mssj").val($("#mssj").val()+"下午 "+((d.getHours()%12+100)+"").substr(1)+":"+((d.getMinutes()+100)+"").substr(1));}else{$("#mssj").val($("#mssj").val()+"上午 "+((d.getHours()%12+100)+"").substr(1)+":"+((d.getMinutes()+100)+"").substr(1));}$(".nav>li>a").on("click",function(){if($(this).text()=="基本资料"){$("html,body").animate({scrollTop:$("#jbzl").offset().top - "50" + "px"}, 500);}if($(this).text()=="教育背景"){$("html,body").animate({scrollTop:$("#jybj").offset().top - "50" + "px"}, 500);}if($(this).text()=="工作经历"){$("html,body").animate({scrollTop:$("#gzjl").offset().top - "50" + "px"}, 500);}if($(this).text()=="个人能力"){$("html,body").animate({scrollTop:$("#grnl").offset().top - "50" + "px"}, 500);}if($(this).text()=="自我评价"){$("html,body").animate({scrollTop:$("#zwpj").offset().top - "50" + "px"}, 500);}if($(this).text()=="联系我"){$("html,body").animate({scrollTop:$("#lxw").offset().top - "50" + "px"}, 500);}$(".navbar-toggle").trigger("click");});      $("#music_control").on("click",function(){  var audio=$("#music")[0];        if(audio!==null){if(audio.paused){audio.play();// 播放}else{audio.pause();// 暂停}}});        $("#top_control").on("click",function(){$("html,body").animate({scrollTop:0 - "90" + "px"}, 500);});$("#sms").on("click",function(){if(($("#mc").val().length==0)||($("#dz").val().length==0)||($("#mssj").val().length==0)){alert("面试信息填写不完整");return false;}window.location.href="sms:88888888888?body="+$("#mc").val()+"_地址："+$("#dz").val()+"_时间："+$("#mssj").val();  });$("#call").on("click",function(){window.location.href="tel:88888888888";});$(document).on("scroll",function(){      $(".tool").show().delay(5000).fadeOut();});} );</script></body>
</html>

使用bootstrap打造卡片个人简历相关推荐

几分钟打造自己的简历生成器，收割offer！
★★★ 本文源自AI Studio社区精品项目,[点击此处]查看更多精品内容 >>> 几分钟打造自己的简历生成器,收割offer! 介绍近年来,受疫情影响,招聘活动都转为线上,简历 ...
手把手教你打造自己的简历编辑网站-编辑完后可以一键导出为PDF
如何打造自己的简历编辑网站目录如何打造自己的简历编辑网站一.相关环境配置 A.服务器环境 B.服务器面板二.相关软件安装 A.安装Node.js B.安装yarn 三.部署简历网站 A.开始安 ...
【慕课笔记】用技术打造小程序简历_3设计简历封面
上一篇:[慕课笔记]用技术打造小程序简历_2初始化小程序代码和FLEX布局下一篇:[慕课笔记]用技术打造小程序简历_4xxxxxx 简历封面设计 (1)简历封面demo,分析各个元素 (2)增加图片 ...
如何打造一份简历，让所有的hr看了都会眼前一亮
众所周知,现在前端培训机构如雨后春笋,他们的面试也都有自己的一套. 有些单位知道,其实有一定经验的前端和刚培训出来的前端没有太大差别. 那么我们如何在这样的局势下保证自己的地位不被动摇.如何保证自己不 ...
用Bootstrap写一份简历
以前学习Bootstrap时练手用的.分享给大家. 注意Bootstrap相关文件的路径,Bootstrap依赖jQuery,需要先加载jQuery Github代码链接:链接 (如果有点小用,求个小 ...
Bootstrap -Card卡片
Cards(卡片) Bootstrap 提供了一个可伸缩可扩展的内容容器给多种变量和选择. 关于卡片是一个灵活的.可扩展的内容容器.它包括用于页眉和页脚的选项.各种各样的内容.上下文背景颜色和强大的 ...
Bootstrap组件——卡片
卡片一.卡片(card) 1.基础卡片 2.内容类型 2.宽度设置 3.文本对齐 4.导航 5. 图像 6.文本放在图片身上 7.水平排列 8.卡片样式 9.卡片组一.卡片(card) 卡片是一个 ...
ViewPager 实现广告页轮播、打造卡片切换、卡片缩放动画
介绍 ViewPager是我们最常用的控件之一了,几乎在项目中都会使用到它.我们在应用中会经常看到这样一种效果. 实现效果这种效果很常见,比如推荐内容.广告轮播等等会用到这样的效果.它实现起来也是不 ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
一份百投百中的计算机校招简历
标题党一波~ 严格意义上来说并没有百投百中,阿秀在今年秋招中直接简历挂的只有苏州微软以及拼多多了(原因你们应该懂得) 其他的互联网公司基本都给面试机会了,靠的是什么?靠的就是阿秀迭代了足足 26 版的 ...

使用bootstrap打造卡片个人简历

使用bootstrap打造卡片个人简历相关推荐

最新文章

热门文章