<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />meta标签告诉浏览器，使设备的宽度作为视图宽度，并且禁止初始的缩放。
initial-scale：初始的缩放比例； maximum-scale：允许用户缩放到的最大比例；user-scalable:
user-scalable:该属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。
user-scalable:用户是否可以手动缩放。
body{
display: flex;
justify-content: center;
align-items: center;
}
.wrap{
display: flex;
justify-content: center;
}
.aside-left{
min-height: 100vh;
background-image: url(http://coding.imweb.io/img/project/resume/bg.png);
background-color: #188eee;
flex-basis:50%;
opacity: 0.8;
animation: background-flash 1s ease infinite;
display:flex;
justify-content: center;
}
@keyframes background-flash{
50% {
opacity:0.9
}
}左边flex布局。min-height:100vh设置左边栏最少占一屏高度。
min-height:设置元素的最小高度。
vn：视窗高度的半分比，vw视窗宽度的百分比。
视窗：浏览器可视区域的宽高。1vh=1%的浏览器的高度。100vh=整个视窗的高度。
vmin:当前较小的vw和vh； vmax:当前较大的vw和vh。
flex-basis:50%；再分配多余空间之前，设置左边栏的主轴宽度为warp主轴空间的50%，默认值是auto,即项目的本来大小。
opacity:0.8；设置元素的不透明级别，默认值为1，完全不透明。值为0，完全透明。
animation:background 1s ease infinite; 设置关键帧动画，动画1s完成，中间状态为0.9不透明级别，无限循环。实现元素背景无限闪烁的状态。
justify:content；设置子元素居中。
.personal-info{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}jusify-content,align-items:center；设置子元素水平垂直方向居中。
.box-center{
display: flex;
flex-direction: column;
align-items: center;
min-height: 40vh;
justify-content: space-between;
}
.image-head{
width: 100px;
height: 100px;
box-shadow: 0 0 0 5px rgb(121,204,255);;
border-radius: 50%;
}
.image-head:hover{
animation: head-loading 1s ease infinite;
border:none;
}
blur-radius；box-shadow的第三个length值，值越大，模糊面积越大，阴影就越大越淡。不能为负值，默认为0。
spread-radius；box-shadow的第四个属性，取正值时，阴影扩大；取负值时，阴影缩小；默认为0，阴影与元素一样大。
inset，将外部阴影改为内部阴影。
.address .email::before, .address .telephone::before, .address .git::before{
border:1px solid #FFFFFF;
border-radius: 50%;
margin-right: 10px;
}
.address .email::before{
content: "\1f582";
}
.address .telephone::before{
content: "\1f581";
}
.address .git::before{
content: "\1f599";
}
.basic-info{
width: 324.47px;
flex-basis: 66px;
border: 1px solid red;
display: flex;
flex-wrap:wrap;
align-content:space-around ;
border: 1px solid #666666;
border-radius: 10px;
justify-content: space-around;
}.basic-info .item1, .basic-info .item2,.basic-info .item3,.basic-info .item4{
flex-basis:45%;
color: #FFFFFF;
}.container-wrap{
background-color: #FFFFFF;
flex-basis: 50%;
display: flex;
flex-wrap: wrap;
flex-direction:column;
min-height: 100vh;
}min-100vh设置了，在手机屏幕上，container-wrap元素可以下拉到占满整个设备屏幕。
.con-header{
width: 100%;
text-align: center;
background: linear-gradient(to left, #DBDBDB 98%,#FFFFFF 1%) no-repeat left center/100% 1px #fff;
display: flex;
justify-content: center;
align-items:center ;
flex: 2;
}flex:2；该元素占据了父元素剩余空间的2份。
.con-header .container-head{
display: inline-block;
background-color: #FFFFFF;
position: relative;
padding: 0px 10px;
color:#6699ff;
}position:relative；规定了自己的定位方式，方便子元素使用absolute定位。在改变视窗宽度的时候，布局不会乱。
.skill-wrap>li{
width: 100%;
}
@media (max-width:767px){
.wrap{
display: block;
}
.aside-left{
width: 100%;
}
.personal-info{
display: flex;
}
.address li{
display: flex;
}
.box-center{
min-height: 60vh;
}
.container-wrap{
width: 100%;
}
}右边.container-wrap占满整个浏览器宽度。min-height:60vh可以更好的实现space-between布局，用户体验更佳。
以下为整个项目代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="resume.css" />
<link rel="stylesheet" type="text/css" href="http://coding.imweb.io/demo/reset.css" />
<title></title>
</head>
<body>
<div class="wrap">
<aside class="aside-left">
<!--左边栏外层-->
<div class="personal-info">
<div class="box-center">
<!--内容整体居中布局-->
<div class="image-box">
<!--左边栏头像盒子-->
<img src="http://coding.imweb.io/img/project/resume/avatar.png" class="image-head" />
<!--头像-->
</div>
<div class="name-box">
<h1>牛文彬</h1>
</div>
<div class="advantage-box">
<p>念经（coding）、参禅(thinking)、化缘(searching)</p>
</div>
<ul class="address">
<li class="email"><a href="http://mail.qq.com">372258681@qq.com</a></li>
<li class="telephone"><a href="http://qq.com">18965551451</a></li>
<li class="git"><a href="http://git.imweb.io/cico" target="_blank">http://git.imweb.io/cico</a></li>
</ul>
<ul class="basic-info">
<li class="item1">学历：本科</li>
<li class="item2">工作年限：2年</li>
<li class="item3">毕业院校：石油大学</li>
<li class="item4">出身年月：1993年4月</li>
</ul>
</div>
</div>
</aside>
<section class="container-wrap">
<!--右边内容包裹盒子-->
<div class="con-header">
<!--顶部header部分-->
<h2 class="container-head">工作经历</h2>
</div>
<div class="work-experence">
<!--工作经历盒子-->
<ul class="work-skill">
<li class="skill-box1">
<p class="pseudo-element">2014.08 - 至今</p>
<p>腾讯科技(深圳)有限公司/产品策划</p>
<p class="detail-para">负责腾讯课堂教研功能的策划；能熟练对接用户及运营侧，规划版本，推进需求落地，并根据数据及用户反馈优化功能；所负责功能覆盖PC客户端、PCWeb、APP、H5</p>
</li>
<li class="skill-box2">
<p class="pseudo-element">2013.07 - 2013.10</p>
<p>腾讯科技(深圳)有限公司/产品实习生</p>
<p class="detail-para">QQ群商业化探索(在线教育方向)负责QQ群商业化探索，调研用户使用QQ群进行在线教育情况，由于实习期间表现良好得以留用。调研结果帮助项目组决策，加大投入在线教育的资源，并在之后成立了腾讯课堂项目。</p>
</li>
</ul>
</div>
<div class="con-header">
<h2 class="container-head">技能特长</h2>
</div>
<ul class="skill-wrap">
<li class="skill-item1">
<ul class="ps-wrap">
<li class="ps-item">
PS
<span class="describe">了解</span>
</li>
<li class="cut-item">
基本切图
</li>
<li class="loading">
<div class="first-process"></div>
</li>
</ul>
</li>
<li class="skill-item2">
<ul class="html-wrap">
<li class="html-item">
HTML & CSS
<span class="master">精通</span>
</li>
<li class="CSS-item">
语义化、CSS3、动画、响应式、移动端、预处理器...
</li>
<li class="loading">
<div class="second-process"></div>
</li>
</ul>
</li>
<li class="skill-item3">
<ul class="js-wrap">
<li class="js-item">
Javascript
<span class="understand">熟悉</span>
</li>
<li class="jquery-item">
jquery、node、react、vue、webpack...
</li>
<li class="loading">
<div class="third-process"></div>
</li>
</ul>
</li>
</ul>
</section>
</div>
</body>
</html>body{
display: flex;
justify-content: center;
align-items: center;
}
/*最外层wrap布局*/
.wrap{
display: flex;
justify-content: center;
}
/*布局左边栏部分*/
.aside-left{
min-height: 100vh;
background-image: url(http://coding.imweb.io/img/project/resume/bg.png);
background-color: #188eee;
flex-basis:50%;
opacity: 0.8;
animation: background-flash 1s ease infinite;
display:flex;
justify-content: center;
}
.personal-info{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box-center{
display: flex;
flex-direction: column;
align-items: center;
min-height: 40vh;
justify-content: space-between;
}
.image-box{
display: flex;
justify-content: center;
}
.image-head{
width: 100px;
height: 100px;
box-shadow: 0 0 0 5px rgb(121,204,255);;
border-radius: 50%;
}
.image-head:hover{
animation: head-loading 1s ease infinite;
border:none;
}
.name-box h1{
color: #FFFFFF;
text-align: center;
font-size: 24px;
}
.advantage-box{
text-align: center;
color: #FFFFFF;
}
.address{
color: #FFFFFF;
font-size:14px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.address li{
width: 50.1%;
}
.address a{
color: #FFFFFF;
}
.address .email::before, .address .telephone::before, .address .git::before{
border:1px solid #FFFFFF;
border-radius: 50%;
margin-right: 10px;
}
.address .email::before{
content: "\1f582";
}
.address .telephone::before{
content: "\1f581";
}
.address .git::before{
content: "\1f599";
}
.basic-info{
width: 324.47px;
flex-basis: 66px;
border: 1px solid red;
display: flex;
flex-wrap:wrap;
align-content:space-around ;
border: 1px solid #666666;
border-radius: 10px;
justify-content: space-around;
}
.basic-info .item1, .basic-info .item2,.basic-info .item3,.basic-info .item4{
flex-basis:45%;
color: #FFFFFF;
}
/*右边布局container部分*/
.container-wrap{
background-color: #FFFFFF;
flex-basis: 50%;
display: flex;
flex-wrap: wrap;
flex-direction:column;
min-height: 100vh;
}
.con-header{
width: 100%;
text-align: center;
background: linear-gradient(to left, #DBDBDB 98%,#FFFFFF 1%) no-repeat left center/100% 1px #fff;
display: flex;
justify-content: center;
align-items:center ;
flex: 2;
}
.con-header .container-head{
display: inline-block;
background-color: #FFFFFF;
position: relative;
padding: 0px 10px;
color:#6699ff;
}
.work-experence{
display: flex;
flex: 3;
flex-direction: column;
padding: 0 22px;
}
.work-skill{
display: flex;
flex-wrap: wrap;
background: linear-gradient(to bottom ,#fff 3%,#ccc 14%,transparent 100%) no-repeat left top/1px 100%;
flex: 1;
flex-direction: column;
justify-content: space-between;
padding: 0 13px;
}
.work-skill li{
flex: 1;
position: relative;
}
.skill-box .detail-para{
font-size: 8px;
color: #B3B3B3;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.detail-para{
font-size: 8px;
color: #B3B3B3;
margin-top: 8px;
}
.skill-box{
color: #188EEE;
font-size:20px;
display: flex;
flex: 1;
flex-direction: column;
}
.skill-box1::before{
content: "";
height: 14px;
width: 14px;
display: inline-block;
position: absolute;
left:-20px;
top: 3px;
border-radius: 50%;
background: radial-gradient(circle,#1881ee 42%,#b0deff -2%);
}
.skill-box2::before{
content: "";
height: 14px;
width: 14px;
display: inline-block;
position: absolute;
left:-20px;
top: 5px;
border-radius: 50%;
background: radial-gradient(circle,#1881ee 42%,#b0deff -2%);
}
.skill-box1:hover::before, .skill-box2:hover::before{
animation: li-loading 1s ease infinite;
}
.skill-box p{
font-size: 14px;
color: black;
}
.skill-wrap{
display: flex;
flex-wrap:wrap;
padding: 0px 10px 0px 32px;
}
.skill-wrap>li{
width: 100%;
}
.ps-item, .html-item, .js-item{
display: flex;
justify-content: space-between;
}
.skill-wrap span{
border: 1px solid #B3B3B3;
border-radius: 24px;
font-size: 12px;
color: #B3B3B3;
padding: 0 7px;
}
.skill-wrap .skill-item2,.skill-wrap .skill-item3{
margin-top: 17px;
}
.skill-wrap{
padding: 0px 10px 50px 32px;
flex: 3;
display: flex;
flex-direction:column;
justify-content:space-around;
}
.skill-wrap>li{
flex:1;
display: flex;
}
.skill-wrap .cut-item, .skill-wrap .CSS-item, .skill-wrap .jquery-item{
color: #B3B3B3;
font-size: 10px;
}
.skill-wrap .loading{
height: 6px;
background: linear-gradient(to right,#E1E9EE,#DDDDDD);
box-shadow: 0px 0px 1px #D0D4D6;
}
.ps-wrap{
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex: 1;
}
.html-wrap{
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex: 1;
}
.js-wrap{
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex: 1;
}
.first-process{
background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));
width: 20%;
height: 100%;
border-radius: 2px;
}
/*动画复用*/
.skill-item1:hover .first-process{
animation: first-loadingflash 1s ease 1;
}
.skill-item2:hover .second-process{
animation: second-loadingflash 1s ease 1;
}
.skill-item3:hover .third-process{
animation: third-loadingflash 1s ease 1;
}
.first-process:hover{
animation: first-loadingflash 1s ease 1;
}
.second-process{
background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));
width: 80%;
height: 100%;
border-radius: 2px;
}
.second-process:hover{
animation: second-loadingflash 1s ease 1;
}
.third-process{
background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));
width: 50%;
height: 100%;
border-radius: 2px;
}
.third-process:hover{
animation: third-loadingflash 1s ease 1;
}
.last-para{
flex-basis: 6%;
}
/*响应式布局*/
@media (max-width:767px){
.wrap{
display: block;
}
.aside-left{
width: 100%;
}
.personal-info{
display: flex;
}
.address li{
display: flex;
}
.box-center{
min-height: 60vh;
}
.container-wrap{
width: 100%;
}
}
/*帧动画*/
@keyframes background-flash{
50% {
opacity:0.9
}
}
@keyframes head-loading{
50%{
box-shadow: 0 0 40px 0px #FFFFFF;
}
}
@keyframes li-loading{
50%{
box-shadow: 0 0 0.3px 1px #188eee;
}
}
@keyframes first-loadingflash{
50% {
width: 5%;
box-shadow: 0 0 0 2px #DBDBDB;
}
}
@keyframes second-loadingflash{
50% {
width: 20%;
box-shadow: 0 0 0 2px #DBDBDB;
}
}
@keyframes third-loadingflash{
50% {
width: 20%;
box-shadow: 0 0 0 2px #DBDBDB;
}
}
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
