用HTML+CSS制作前端简历

我观看了大量饥人谷前端模拟面试锦集，
观摩了优秀简历的细节
取他们亮点制作成了自己的简历

吴思里的在线简历

闵聪学长的在线简历

方应杭老师演示时制作的Demo

细节的点

代码块效果

修改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);
}

使用时将代码块用<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;
}

打印

A4尺寸为21cm*29.7cm

所以简历每页的大小比例相同即可

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

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

<style>标签中添加media属性

值为“print”，说明打印时才生效的样式

CSS page-break-before避免分页时内容的断开

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

PDF简历

开始还不知道右键打印可以网页另存为PDF

一开始还傻傻的先做word简历，

再用HTML把简历给写出来

说实话前端出身操作HHTML+CSS可比操作office擅长多了

附上pdf简历下载链接

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

<a class="pdf" href="resume.pdf" download>

简历可编辑

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

修改designMode属性

document.designMode='on'

响应式

适配不同宽度的效果

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

用HTML+CSS制作前端简历相关推荐

用HTML/CSS制作个人简历
HTML/CSS/Javascript是网页制作以及自动化报告制作用到的三大主力.由于Javascript多数情况下用于动画视效,本次简历制作没有涉及到动画过渡,所以我们先来看看HTML/CSS咋回事 ...
html简历怎么转换,教大家如何用HTML/CSS制作个人简历
HTML/CSS/Javascript是网页制作以及自动化报告制作用到的三大主力.由于Javascript多数情况下用于动画视效,本次简历制作没有涉及到动画过渡,所以我们先来看看HTML/CSS咋回事 ...
利用html+css制作个人简历
个人简历制作使用html和css制作一份个人简历: 软件:IntelliJ IDEA 2022.3.2 Ultimate 效果演示: 前期准备俗话说的好:工欲善其事必先利其器.首先需要认识html ...
前端学习第三弹：利用div+css制作个人简历
尝试用纯html制作简历,但是显得过于死板,参数设置不灵活,由于刚刚接触这一块,从网上找了很多资源,先输出后输入,通过一个具体的例子查缺补漏,这样学起来更有劲头也更具效率. ...
HTML5,CSS制作个人简历
先建立index页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
HTML CSS 制作响应式价格表单展示id1075-网页前端设计
HTML & CSS 制作响应式价格表单展示id1075-网页前端设计源码下载地址在新演示地址 html <a class="maxbutton-3 maxbutton&q ...
table虚线边框_web前端工程师7天0基础到精通（TABLE+CSS制作《互联世纪网》）
项目七项目实践:TABLE+CSS制作<互联世纪网> 实践目标 1. 熟悉CSS属性 2. 熟练运用CSS属性控制网页样式 3. 熟悉网页制作流程项目简介: 通过上一章节的学习,我们了 ...
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
制作个人简历网页代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
秋招实习季，教你制作在线简历
这篇教程教你制作的简历本质上是部署在Gitee上,依赖Gitee Pages服务的静态页面,制作它需要的知识仅包括前端三件套,即HTML.CSS和Javascript.当然,即使你没有任何代码基础,也 ...

用HTML+CSS制作前端简历

用HTML+CSS制作前端简历

细节的点

代码块效果

修改滚动条

打印

PDF简历

简历可编辑

响应式

用HTML+CSS制作前端简历相关推荐

最新文章

热门文章