网页版创意简历

素颜马尾好姑娘i 2022-10-07 01:52 183阅读 0赞

## 介绍 ##

又到了毕业季了，突然想起了那一年的高考作文题《你们再看看书，我再看看你们》。每次毕业都要对面新的选择，每次都是很迷茫，不知道自己该何去何从。希望我们不负青春，展望未来。愿每个人都能学有所成、业有所获。

> 这个简历，是由两个页面构成，他们是横着排的，鼠标滚动的时候页面会横向滚动。这里用到阿里的iconfont图标，我用link连接css样式，所以复制代码的话，图标不会显示在页面中，有需要的话可以私信我哦！！

## 先看效果图吧~~ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 2]

## 完整代码 ##

<!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>XXXXXX5371@qq.com</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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/24ce2078f8e546c5b67ba41eb9b808ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/82cb19b12ceb4989a0aec2d807b5a46f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/98ab71ef9de945b684dcf4a164fd2861.png