知识
- css3布局：flex（重点），不熟悉，边查文档边做
- 错误：注意伪类不能操作除子元素外的其他元素
- 该小项目涉及到的知识点：布局，动画，排版，js DOM操作（不熟悉）
- 总结：审美不行，代码敲的不多，很生涩
效果图
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>姓名:    陈小坚</span></div>
</div>
<div>
<div><img src="src/image/birthday.svg" alt=""><span>生日:    1997.08</span></div>
</div>
<div>
<div><img src="src/image/location.svg" alt=""><span>现居:  广东广州</span></div>
</div>
<div>
<div><img src="src/image/study.svg" alt=""><span>学历:  大学本科</span></div>
</div>
<div>
<div><img src="src/image/cog.svg" alt=""><span>专业:  网络工程</span></div>
</div>
</div>
<div>
<div>
<h3>联系方式</h3>
</div>
<div>
<div><img src="src/image/mobile.svg" alt=""><span>电话:    15013225799</span></div>
</div>
<div>
<div><img src="src/image/wechat.svg" alt=""><span>微信:    15013225799</span></div>
</div>
<div>
<div><img src="src/image/qq.svg" alt=""><span>QQ:     1948643206 </span>
</div>
</div>
<div>
<div><img src="src/image/briefcase.svg" alt=""><span>求职意向:    软件开发</span></div>
</div>
<div>
<div><img src="src/image/mail.svg" alt=""><span>电子邮箱: [email protected]</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>武汉映山居网络科技有限公司 </span>
<span>2017.09-2018.06 </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>武汉映山居网络科技有限公司 </span>
<span>2018.09-2019.06 </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"> </span> </div>
</div>
<div class="skill-items cplusplus">
<span>c++:</span>
<div><span class="color"> </span> </div>
</div>
<div class="skill-items python">
<span>python:</span>
<div><span class="color"> </span> </div>
</div>
<div class="skill-items JAVA">
<span>JAVA:</span>
<div><span class="color"> </span> </div>
</div>
<div class="skill-items AI">
<span>AI:</span>
<div><span class="color"> </span> </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;
} */