亿企邦
  • 首页
    •
  • 解决方案&服务
    •
  • 客户&案例
    •
  • 营销资讯
    •
  • 关于我们
    •
    15158846557 或 在线咨询 在线咨询
    亿企邦
    15158846557 或 在线咨询
    亿企邦

    快捷入口

    所在位置： 首页 > 营销资讯 > 网站运营 > 用HTML+CSS制作前端简历，很漂亮哟

    用HTML+CSS制作前端简历，很漂亮哟

    时间：2023-09-10 16:24:01 | 来源：网站运营

    时间：2023-09-10 16:24:01 来源：网站运营

    用HTML+CSS制作前端简历，很漂亮哟：

    前言

    1. 一开始我对自己模仿并加以改进的简历感到挺自豪的，我是从零开始敲代码，纯HTML+CSS将简历复刻出来的。最后发现市场上以及我身边流传着许多许多大相径庭、雷同类似的简历。也有拿来主义不换皮肤不标明出处的简历。优秀的简历被许多人借鉴模仿，养活了一届又一届的应届学者（我就是其中之一）。我恍然大悟：原来我们都是曹贼。
    2. 如果你是只想要现成简历魔改现用的，请移步Github代码仓库，将项目下载下来并且跑起来，改掉内容，Fork或借鉴请遵循LICENSE并注明出处。

    3. 如果你和我一样，看到优秀的简历，你有一种难以言传的微妙感受，你特别欣赏上面许多的亮点，你一下子被点燃，在你的内心产生一股难以遏制的 难以想象的创作激情，想要制作出与自己经历完全契合的简历，迫不及待的想要在自己的编辑器上把简历制作而不仅仅是克隆出来，想要分享给身边的同学看，恭喜你请跟着我往下看，我将教会你从零开始写网页版的简历。

    如果你还没有纸质版简历，不知到如何从零开始写一份简历，你可以点进我的另一篇文章

    经典之所以成为经典，就是因为无论如何改变，被后来的人无论如何模仿改进，优秀的简历都经得起时间和求职者的验证。

    这是我的HTML+CSS的简历

    我模仿的是我们学长的简历

    后来我同学在Github上发现了一个nodejs的版本(自动部署+自动生成PDF)

    从毕业时间来看，我们重邮闵聪学长毕业于17年，比华师吴浩麟学长16年毕业要晚一点。

    从代码仓库来最早上传时间看，闵聪学长提交于16年，比吴浩麟学长17年提交要早一点。

    从代码提交次数来看，截止2021.09.07，master分支，闵聪学长提交了7次，远远少于吴浩麟学长的133次提交。

    这份雷同简历谁是鼻祖不好说，或者另有其人也说不定。不过都没有关系，我们现在所要做的是模仿并超越他们。

    简历展示

    我的简历
    其他同学的简历
    原皮肤绿绿的简历

    简历的设计与搭建

    首先你得有一定的前端基础，掌握 HTMl+CSS

    确定主题色

    模仿一届又一届的应届生，一批又一批的求职者们啊，一开始先换个皮肤，确定主题色后面都得依赖这个主题色。

    在不使用node包的情况下，我使用的vscode的 Easy Less 插件，将less文件编译成css文件。在less文件中定义主题色变量$themeColor，在使用主题色的地方使用变量替代。

    $themeColor: #0066FF;.element{ color:$themeColor;}

    确定网页尺寸

    网页版简历和word版简历一样，都能打印成纸质版。A4纸张尺寸为21cm*29.7cm，那么网页与A4纸的比例相同即可。

    这里网页宽度我们选用为我们程序员最爱的1024px，那么页面高度=纸宽度/纸高度*网页宽度=29.7/21*1024=1440px

    .page{ width: 1024px; min-height: 1440px;}

    代码块效果

    修改strong默认样式，拥有代码块效果

    strong { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; font-size: 13px; line-height: 15px; font-weight: 500; color: #494949; margin: 0 3px; padding: 3px 8px; background-color: #F6F6F6; border-radius: 5px; border: 1px solid rgb(235, 235, 235);}这样我们在写html结构时只需要用<strong>标签将代码块包住即可

    熟悉<strong>HTML</strong>、<strong>JS(TS)</strong>、<strong>AJAX</strong>、<strong>ES6</strong>

    修改滚动条

    ::-webkit-scrollbar { width: 5px; background-color: #f1f1f1;}​::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 50px;}​

    响应式

    适配不同宽度的效果

    @media screen and (max-width:1024px) {}@media screen and (max-width: 720px) {}

    打印

    简历不只一页，不该断的地方在分页处了怎么办？

    <style>标签中设置media="print"属性说明打印时才生效的样式

    CSS设置 page-break-before属性避免分页时内容的断开

    <style media="print"> .page2{ page-break-before:always; }</style><section class=".page2">...</section>

    网页版简历转换成PDF版简历

    是的，我一开始也不知道网页版简历可以转换成PDF版简历。还傻傻的维护word版和网页版两版简历。

    1. 在网页版简历里右键，选择打印
    2. 目标打印机选择打印成PDF
    3. 边距设为【无】
    4. 背景图像勾上
    5. 点击打印另存为PDF文件

    附上PDF版简历下载链接

    将PDF简历拖进项目，命名为resume.pdf

    在a标签上设置herf属性，添加download属性就可以点击下载

    <a href="resume.pdf" download>

    简历可编辑

    怎么让别人拿你的简历改了就可以用?

    在修改按钮绑定点击事件，在回调函数中修改document.designMode 属性为on或者off

    document.designMode='on'document.designMode='off'

    关键词：简历,漂亮

    推荐文章

    新闻资讯

    整合营销 网络营销 网络推广 信息时代 建站知识 网站运营 电子商务 营销百科 公司新闻 行业动态 品牌营销

    推荐资讯

    74
    73
    25
    news

    微信公众号

    版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

    为了最佳展示效果，本站不支持IE9及以下版本的浏览器，建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
    关闭