介绍
又到了毕业季了，突然想起了那一年的高考作文题《你们再看看书，我再看看你们》。每次毕业都要对面新的选择，每次都是很迷茫，不知道自己该何去何从。希望我们不负青春，展望未来。愿每个人都能学有所成、业有所获。
这个简历，是由两个页面构成，他们是横着排的，鼠标滚动的时候页面会横向滚动。这里用到阿里的iconfont图标，我用link连接css样式，所以复制代码的话，图标不会显示在页面中，有需要的话可以私信我哦！！
先看效果图吧~~
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
<style>
*{
padding: 0;margin: 0;}
body{
overflow-y: hidden;}
.main{
overflow-x: scroll;overflow-y: hidden;}
.container{
width: calc(100vw *2);height: calc(100vh - 1.4rem);}
.page{
width: 100vw;height: calc(100vh - 1.4rem);float: left;}
/*第一屏的CSS*/
.show{
background-image: linear-gradient(-45deg,transparent,transparent,rgb(43, 124, 43)),url('./背景图.jpg');background-size: 100% 100%;background-attachment: fixed;display: flex;justify-content: center; align-items: center;flex-direction: column;position: relative;}
.show h1{
font-family: "宋体";color: transparent;font-size: 5.8rem;-webkit-text-stroke: 1px #ff6fe7;/* 字间隔 */letter-spacing: 40px;padding-left: 32px;}
.show p{
font-family: Georgia;color: pink;/* 字母转为大写 */text-transform: uppercase;font-size: 40px;/* 字间隔 */letter-spacing: 5px;}
.show svg{
position: absolute;right: 0px;bottom: calc(-100vh /4);width: 100vh;transform: rotate(90deg);transform-origin: 100% 0;}
/* 第二屏的CSS */
.content{
--introduceWidth: 340px;--introduceHeight:533px;background-image: linear-gradient(to right,#ffff99,#fdfdaa);background-size: 100% 100%;display: flex;align-items: flex-start;}
.content h2{
text-align: center; letter-spacing: 14px;color: teal;font-family: "宋体";background-color: chartreuse;}
/* 简历的左边区域 个人信息*/
.introduce{
width: var(--introduceWidth);height: var(--introduceHeight);border-right: 3px solid pink;margin-top: 50px;}
.introduce .name{
height: 238px;}
/* 头像 */
.introduce .name img{
width: 200px;border: 5px solid mediumaquamarine;border-radius: 50%;}
/* 姓名 */
.introduce .name{
font-size: 24px;text-align: center;font-weight: bolder;font-family: 'Courier New', Courier, monospace;color: rgb(78, 60, 241);border-bottom: 3px dashed pink;}
.introduce .name p{
margin: 10px 0px;}
/* 联系信息区域 */
.content .introduce .contact{
padding: 12px 10px 0 0; height: 291px; border-bottom: 3px dashed pink;box-sizing: border-box;}
.content .introduce .contact p{
line-height: 50px;font-size: 20px;/*文字一行显示*/}
.content .introduce .contact p>span{
color: turquoise;}
/* 联系信息中的网站 */
.content .introduce .contact .site{
cursor: pointer;position: relative;line-height: 30px;}
.content .introduce .contact .site:hover img{
display: block;}
/* 博客二维码图片 */
.content .introduce .contact .site>img{
display: none;width: 180px;position: absolute;right: -150px;bottom: 40px;border: 2px solid mediumaquamarine;z-index: 10;}
/* 简历的右边区域 技能展示*/
.content .skill{
margin-top: 50px;width: calc(100vw - var(--introduceWidth));height: var(--introduceHeight);box-sizing: border-box;display: flex;flex-wrap: wrap;align-items: stretch;}
.content .skill>div{
width: 500px;box-sizing: border-box;padding: 10px;position: relative;z-index: 2;}
/*div遮罩*/
.content .skill>div::before{
content: "";width: calc(100% - 20px);height: calc(100% - 37px);position: absolute;left: 10px;bottom: 0;opacity: 0.6;transition: all 0.4s;transform: scale(1,1);transform-origin: top;background-color: rgb(160, 241, 79);}
/*鼠标经过遮罩消失*/
.content .skill>div:hover:before{
transform: scale(1,0);}
.content .skill>div:hover p{
color: blue;}
/*自我介绍*/
.content .skill .self-introduction{
/*首行缩进两个字符*/text-indent: 2rem;height: 241px;border-bottom: 3px dashed pink;}
.content .skill .self-introduction p{
line-height: 30px;font-family: "黑体";color: indianred;}
/*教育背景*/
.content .skill .education-background{
height: 241px;text-indent: 2rem;border-bottom: 3px dashed pink;}
.content .skill .education-background p{
line-height: 30px;color: indianred;}
.content .skill .education-background>p>span{
padding: 0 20px;color: lightgreen;}
/*工作经历*/
.content .skill .work-experience{
height: 289px;border-right: 3px dashed pink;border-bottom: 3px dashed pink;}
.content .skill .work-experience p{
line-height: 30px;color: indianred;}
/*技能及其他*/
.content .skill .skill-introduction{
border-bottom: 3px dashed pink;border-right: 3px dashed pink;}
.content .skill .skill-introduction P{
line-height: 30px;color: indianred;}
/* iconfont图标 */
.content .skill .skill-introduction .ifpic span{
color: rgb(74, 28, 184);font-size: 30px;}
/*纸飞机的CSS*/
#feiji{
position: absolute;font-size: 6rem;color: blue;left: -150px;z-index: 100;animation: move 8s linear; animation-delay: 2s;}
#feiji::after{
content: "自律";font-size: 2rem;color: red;font-family: "宋体";position: absolute;bottom: -30px;left: 10px;border: 2px solid blue;}
@keyframes move{
from{
left: -150px;bottom: 100px;}to{
left: 100vw;bottom: calc(100vh + 100px);}}
</style>
<link rel="stylesheet" href="./font_2609606_1r0bl90cukk/iconfont.css">
<link rel="stylesheet" href="./font_2609739_p136v71ytq/iconfont.css">
</head>
<body>
<div class="main">
<div class="iconfont" id="feiji">
<span></span>
</div>
<div class="container">
<div class="page show">
<h1>个人简历</h1>
<p>curriculum vitae</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ffff99" fill-opacity="1" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,293.3C960,320,1056,320,1152,309.3C1248,299,1344,277,1392,266.7L1440,256L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>
</div>
<div class="page content">
<div class="introduce">
<div class="name">
<img src="./pyy.jpg" alt="">
<p>姓名：黄鼠狼</p>
</div>
<div class="contact">
<h2>联系信息</h2>
<p><i class="iconfont"></i> 电话：<span>1XXXXXXXXX0</span></p>
<p><i class="iconfont"></i> 联系地址：<span>XXXXXXXX村</span> </p>
<p><i class="iconfont"></i> 邮箱：<span>[email protected]</span></p>
<p class="site">
<i class="iconfont"></i> 网站：
<span>www.xxx.com/s?wd="csdn Vernonin"</span>
<img src="./csdn.jpg" alt="">
</p>
</div>
</div>
<div class="skill">
<div class="self-introduction">
<h2>自我介绍</h2>
<p>本人性格开朗、稳重、有活力，待人热情、真诚；工作认真负责，积极主动，能吃苦耐劳，用于承受压力，勇于创新；有很强的组织能力和团队协作精神，具有较强的适应能力；纪律性强，工作积极配合；意志坚强，具有较强的无私奉献精神。</p>
</div>
<div class="education-background">
<h2>教育背景</h2>
<p><span>清华大学</span><span>计算机应用技术</span><span>本科</span></p>
<h4 style="text-align: center;color: teal;">主修课程</h4>
<p>计算机操作系统、计算机网络基础、C#语言、Android应用、Linux、数据库原理及应用，java Web程序设计、网页设计与制作、JAVA程序设计等专业课程。同时也要学习英语、高数、思政等公共基础课。</p>
</div>
<div class="work-experience">
<h2>工作经历</h2>
<p>搬过砖、搬过快递、洗过碗。</p>
</div>
<div class="skill-introduction">
<h2>技能及其他</h2>
<p>掌握AE、AI、AUPR、PS、DW等Abode全家桶的安装与卸载。</p>
<p>精通Window、Linux、UNIX的开关机。</p>
<p>熟练c、c++、c#、Java、Python、javascript、Swift、PHP、Ruby等语言打印hello world。</p>
<p>了解mysql、oracle、sqlserver、sqlite等数据库的存在。</p>
<p>会打开word、ppt、Excel</p>
<div class="ifpic">
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//获取dom元素
let main = document.getElementsByClassName('main')[0];
let container = document.getElementsByClassName('container')[0];
//给main绑定鼠标滚轮事件
main.addEventListener('wheel', function(e) {
e.stopPropagation();
main.scrollLeft += e.deltaY/5;
})
</script>
</body>
</html>