css3-div+css3制作个人简历网页

知识

css3布局：flex（重点），不熟悉，边查文档边做
错误：注意伪类不能操作除子元素外的其他元素
该小项目涉及到的知识点：布局（flex），动画（关键帧），排版，js DOM操作（本来想用伪类进行切换页面的内容，结果发现不是属于父子关系，所以用js操作了一丢丢dom但是js不熟，感觉写的代码好垃圾=。=）
总结：审美不行，代码敲的不多，很生涩

效果图

Code

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="src/css/index.css">
</head><body><!-- 导航栏 --><div class="header"><span id="one">个人信息</span><span id="two">工作经历</span><span id="three">专业技能</span><span id="four">荣誉证书</span><span id="five">自我评价</span></div><!-- 内容 --><div class="content"><div class="content1 dom"><div><div><h3>基础信息</h3></div><div><div><img src="src/image/user.svg" alt=""><span>姓名: &nbsp&nbsp&nbsp陈小坚</span></div></div><div><div><img src="src/image/birthday.svg" alt=""><span>生日: &nbsp&nbsp&nbsp1997.08</span></div></div><div><div><img src="src/image/location.svg" alt=""><span>现居: &nbsp广东广州</span></div></div><div><div><img src="src/image/study.svg" alt=""><span>学历: &nbsp大学本科</span></div></div><div><div><img src="src/image/cog.svg" alt=""><span>专业: &nbsp网络工程</span></div></div></div><div><div><h3>联系方式</h3></div><div><div><img src="src/image/mobile.svg" alt=""><span>电话: &nbsp&nbsp&nbsp15013225799</span></div></div><div><div><img src="src/image/wechat.svg" alt=""><span>微信: &nbsp&nbsp&nbsp15013225799</span></div></div><div><div><img src="src/image/qq.svg" alt=""><span>QQ: &nbsp&nbsp&nbsp&nbsp1948643206&nbsp</span></div></div><div><div><img src="src/image/briefcase.svg" alt=""><span>求职意向: &nbsp&nbsp&nbsp软件开发</span></div></div><div><div><img src="src/image/mail.svg" alt=""><span>电子邮箱: 1948643206@qq.com</span></div></div></div><div><!-- <h3>个人微信</h3><img src="src/image/wechat-mark.jpg" alt="" class="wechaterweima"> --><h3>生活照</h3><img src="src/image/生活照.jpg" alt="" class="shenghuozhao"></div></div><div class="content2 dom"><div class="content2-items"><span>武汉映山居网络科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>2017.09-2018.06&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>岗位：系统架构师</span><div class="content2-items-work-content"><p>1.负责公司系统的架构设计、研发工作；承担从业务向技术转换的桥梁作用；</p><p>2.协助项目经理制定项目计划和控制项目进度；负责辅助并指导SA开展设计工作；</p><p>3.负责组织技术研究和攻关工作；负责组织和管理公司内部的技术培训工作；</p><p>4.管理技术支撑团队并给项目、产品开发实施团队提供技术保障。理解系统的业务需求，制定系统的整体框架</p></div></div><div class="content2-items"><span>武汉映山居网络科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>2018.09-2019.06&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>岗位：前端开发工程师</span><div class="content2-items-work-content"><p>1.使用Div+css并结合Javascript负责产品的前端开发和页面制作；</p><p>2.熟悉W3C标准和各主流浏览器在前端开发中的差异，能熟练运用DIV+CSS，提供针对不同浏览器的前端页面解决方案。移动HTML5的性能和其他优化，为用户呈现最好的界面交互体验和最好的性能；</p><p>3.负责相关产品的需求以及前端程序的实现，提供合理的前端架构。改进和优化开发工具、开发流程、和开发框架；</p><p>4.与产品、后台开发人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作；</p></div></div></div><div class="content3 dom"><div class="skill-items qianduan"><span>前端:</span><div><span class="color">&nbsp</span>&nbsp;</div></div><div class="skill-items cplusplus"><span>c++:</span><div><span class="color">&nbsp</span>&nbsp;</div></div><div class="skill-items python"><span>python:</span><div><span class="color">&nbsp</span>&nbsp;</div></div><div class="skill-items JAVA"><span>JAVA:</span><div><span class="color">&nbsp</span>&nbsp;</div></div><div class="skill-items AI"><span>AI:</span><div><span class="color">&nbsp</span>&nbsp;</div></div></div><div class="content4 dom"><div class="major"><div><span>专业技能证书</span></div><p>1. 广州大学第一届程序设计竞赛一等奖</p><p>2. 广州大学第一届网络技术设计竞赛一等奖</p><p>3. 广州大学第一届网页开发设计竞赛一等奖</p></div><div class="common"><div><span>通用技能证书</span></div><p>1. 大学英语四六级证书</p><p>2. 普通话二级甲等证书</p></div></div><div class="content5 dom"><div class="first"><div><span>专业能力</span></div><p>1. 全日制本科毕业，理论功底深厚</p><p>2. 具有创造性思维，创新能力强</p></div><div class="second"></div><div><span>擅长领域</span></div><p>1. 熟悉前端开发，对前端技术有深入的理解</p><p>2. 做过数据分析，数据挖掘，具备数学建模的能力</p><div class="third"><div><span>综合素质</span></div><p>1. 有极强的执行力和抗压力，有较好的沟通和解决问题的能力</p></div></div><script>function clear(){var doc = document.getElementsByClassName("dom");console.log(doc)for(var i = 0;i<doc.length;i++){doc[i].style.display = "none";}}var content1 = document.getElementsByClassName("content1")[0];var content2 = document.getElementsByClassName("content2")[0];var content3 = document.getElementsByClassName("content3")[0];var content4 = document.getElementsByClassName("content4")[0];var content5 = document.getElementsByClassName("content5")[0];var span1 = document.getElementById("one")span1.onclick = function(){clear();content1.style.display = "flex";}var span2 = document.getElementById("two")span2.onclick = function(){clear();content2.style.display = "flex";}var span3 = document.getElementById("three")span3.onclick = function(){clear(); content3.style.display = "flex";}var span4 = document.getElementById("four")span4.onclick = function(){clear();content4.style.display = "flex";}var span5 = document.getElementById("five")span5.onclick = function(){clear();content5.style.display = "flex";}</script>
</body></html>

* {padding: 0;margin: 0;
}body {background-image: url(../image/last.jpg);background-size: cover;background-attachment: fixed;background-repeat: no-repeat;
}.header {top: 100px;position: relative;height: 100px;width: 60%;margin: 0 auto;background-color: rgba(2, 8, 37, 0.3);align-content: flex-start;/*使得span之间的空格消失*/display: flex;
}.header span {color: aliceblue;display: inline-flex;/*弹性布局*/align-items: center;/*居中*/justify-content: center;/*垂直居中*/margin: 0 auto;position: relative;width: 20%;height: inherit;cursor: pointer;font-size: 1.2rem;
}.header span:hover {color: red;background-color: rgba(28, 238, 238, 0.163);
}.content {top: 100px;position: relative;height: 350px;width: 60%;margin: 0 auto;background-color: rgba(2, 8, 37, 0.3);
}.content1,
.content2,
.content3,
.content4,
.content5 {width: 100%;height: 100%;position: absolute;/*设置为绝对定位，根据父元素的，所有的content放在同一个区域*/align-content: flex-start;/*使得span之间的空格消失*/display: flex;
}.content1 div {/*将content1水平分为3个*/display: flex;/*弹性布局*/align-items: center;/*居中*/justify-content: center;/*垂直居中*/flex-direction: column;margin: 0 auto;width: 33%;height: inherit;color: rgba(255, 255, 255, 0.5)
}.content1 div {width: 100%;font-size: medium;
}.content1 div div {display: flex;flex-direction: row;/*设置水平排列*/
}.content1 div div img {height: 25px;width: 25px;margin-right: 20px;
}.shenghuozhao {width: 60%;height: 60%;border-radius: 50%;opacity: 0.5;margin-top: 60px;margin-bottom: 40px;
}.content2 {display: flex;flex-direction: column;/*设置容器内的flex垂直排列*/
}.content2 .content2-items {width: 100%;height: 50%;margin: 0 auto auto 0;left: 15px;position: relative;
}.content2 .content2-items span {font-size: large;color: rgb(207, 206, 206);font-weight: bold;
}.content2 .content2-items .content2-items-work-content {font-size: small;color: rgba(255, 255, 255, 0.7);margin-top: 20px;
}.content .content3 {flex-direction: column;display: flex;
}.content3 .skill-items {height: 15%;position: relative;width: 60%;margin: 0 auto;margin-top: 5px;font-size: medium;color: rgba(241, 241, 241, 0.53);}.skill-items div {background-color: rgba(219, 255, 255, 0.163);width: 80%;position: absolute;left: 15%;display: inline-block;
}.qianduan div span {background-color: rgb(7, 110, 110);width: 40%;transition: width 1s;position: absolute;animation: donghua-qianduan;animation-duration: 3s;
}@keyframes donghua-qianduan {from {width: 0;}to {width: 40%;}
}.qianduan .color::after {content: "40%";float: right;
}.cplusplus div span {background-color: rgb(236, 185, 90);width: 60%;position: absolute;animation: donghua-cplusplus;animation-duration: 3s;
}@keyframes donghua-cplusplus {from {width: 0;}to {width: 60%;}
}.cplusplus .color::after {content: "60%";float: right;
}.python div span {background-color: rgb(3, 78, 125);width: 70%;position: absolute;animation: donghua-python;animation-duration: 3s;
}@keyframes donghua-python {from {width: 0;}to {width: 70%;}
}.python .color::after {content: "70%";float: right;
}.JAVA div span {background-color: rgb(224, 221, 120);width: 66%;position: absolute;animation: donghua-JAVA;animation-duration: 3s;
}@keyframes donghua-JAVA {from {width: 0;}to {width: 66%;}
}.JAVA .color::after {content: "66%";float: right;
}.AI div span {background-color: rgba(193, 17, 17, 0.53);width: 45%;position: absolute;animation: donghua-AI;animation-duration: 3s;
}@keyframes donghua-AI {from {width: 0;}to {width: 45%;}
}.AI .color::after {content: "45%";float: right;
}.content4 {flex-direction: column;
}.content4 .major {height: 50%;width: 100%;
}.content4 span {font-size: 35px;font-weight: 600;color: rgba(240, 248, 255, 0.319);margin-left: 10%;
}.content4 p {margin-left: 8%;margin-top: 10px;color: rgba(189, 193, 196, 0.693);
}.content p:hover {color: red;
}.content5 {flex-direction: column;
}.content5 span {font-size: 35px;font-weight: 600;color: rgba(240, 248, 255, 0.319);margin-left: 10%;
}.content5 p {margin-left: 8%;margin-top: 10px;color: rgba(189, 193, 196, 0.693);
}.content .content2 {display: none;
}.content .content3 {display: none;
}.content .content4 {display: none;
}.content .content5 {display: none;
}/* #one:hover .content1{   hover不能改变除子元素外的元素display: flex;
} */

css3-div+css3制作个人简历网页相关推荐

Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】
制作个人简历网页代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
前端学习第三弹：利用div+css制作个人简历
尝试用纯html制作简历,但是显得过于死板,参数设置不灵活,由于刚刚接触这一块,从网上找了很多资源,先输出后输入,通过一个具体的例子查缺补漏,这样学起来更有劲头也更具效率. ...
阿里云ECS制作个人简历网页
一,开通云服务器进入进入 https://ecs-buy.aliyun.com/#/prepay 就可以选择购买 ECS 产品了然后根据自己的需要购买(因为我之前是白嫖的,而且做过这个练习了,购买 ...
前端~html~HTML零基础（二） ~HTML常见标签补充/实战案例：个人简历网页展示/填写
文章目录回顾复习超链接标签a(补充) 表格标签列表标签表单标签 label标签 select标签 textarea标签无语义标签 div&& span 实战案例个人简历网页 ...
使用云服务器搭建个人简历网页
一.开通云服务器进入公有云提供商官网(示例:阿里云) 地址:www.aliyun.com或www.aliyun.com/minisite/goods?userCode=3satwfcw 已有阿里云账 ...
html5 纵向分割线,html5和css3制作不规则的网页背景分割线
这是一款实用的.效果炫酷的html5和css3制作不规则的网页背景分割线网页模板. EXAMPLE 1 下面来看一下第一个demo的制作流程. html结构:实用一个section来包裹所有的内容,其 ...
网页设计成品DW静态网页Html5响应式css3 ——响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述
HTML5期末大作业:游戏网站设计--响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. ...
好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
20个很酷的CSS3导航菜单制作教程
CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写 JavaScript 才能实现的效果,如今只需要简单的写几句 CSS3 ...

css3-div+css3制作个人简历网页

知识

效果图

Code

css3-div+css3制作个人简历网页相关推荐

最新文章

热门文章