这个页面今天还没做完，明天做完再接着加代码，(已上传完)
代码如画：
<html>
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<style>
body{
height: 100%;
background-image: url(images/wood.png);
font-size: 12px;
font-family: Arial, 时尚中黑简体;
}
section{
width: 392px;
height: 101px;
margin: 0 auto;
border-radius: 17px;
position: relative;
box-shadow: 0 3px 4px black;
}
section:nth-child(odd){
left: -60px;
}
section:nth-child(even){
left: 60px;
}
section:nth-child(1){
background-color: #1e1a17;
transform: rotate(-3deg);
margin-top: 50px;
z-index: 1000;
background-image: url(images/diwen.png);
background-size: 70%;
background-repeat: no-repeat;
background-position: 70% 30%;
}
section:nth-child(2){
background-color: #dededc;
z-index: 900;
top: -13px;
}
section:nth-child(3){
background-color: #c4be66;
z-index: 800;
top: -26px;
}
section:nth-child(4){
background-color: #bc8ebc;
z-index: 700;
top: -39px;
}
section:nth-child(5){
background-color: #dc214c;
z-index: 600;
top: -52px;
}
section:nth-child(6){
background-color: #e3efc1;
z-index: 500;
top: -65px;
}
section:nth-child(7){
background-color: #d5c2d8;
z-index: 400;
top: -78px;
}
section:nth-child(8){
background-color: #c0c2c1;
z-index: 300;
top: -91px;
/*超出父元素的部分剪切掉*/
overflow: hidden;
}
.hole{
display: block;
width: 24px;
height: 24px;
background-image: url(images/wood.png);
border-radius: 50%;
position: absolute;
bottom: 10px;
left: 10px;
}
#jl h2{
color: #6777a8;
font-weight: normal;
font-size: 37px;
position: relative;
top: 30px;
left: 34px;
display: inline-block
}
#jl h2 small{
display:block;
font-size: 19px;
}
#jl h1{
color: white;
font-size: 67px;
display: inline-block;
font-family: 迷你简双线体;
position: relative;
left: 137px;
top: -9px;
}
h1,h2,p{
margin: 0;
text-align: right;
}
.sh2{
padding: 7px 25px;
}
p{
line-height: 130%;
position: absolute;
right: 26px;
bottom: 10px;
}
#grxx p:nth-of-type(1){
right: 195px;
}
.sh2d{
padding: 19px 25px 0 0;
}
.white_text{
color: white;
}
#zwpj p:nth-of-type(1){
top: 21px;
left: 40px;
text-align: left;
font-size: 10px;
width: 240px;
}
#zwpj p:nth-of-type(2){
top: 75px;
left: 40px;
text-align: left;
font-size: 10px;
}
#qzyx h2{
text-align: center;
position: absolute;
top: 20px;
left: 30%;
color:#fee9fe;
z-index: 320;
}
#qzyx h3{
text-align: center;
position: absolute;
top: 27px;
left: 40%;
font-size: 27px;
color: #fee9fe;
z-index: 320;
}
/*选中第一个字符*/
#qzyx h2::first-letter{
color: blue;
}
#qzyx div:nth-last-of-type(1){
width:134px;
height: 134px;
background-color: yellow;
border-radius: 50%;
opacity: 0.7;
position: absolute;
top: -4px;
left: 36px;
}
#qzyx div:nth-last-of-type(2){
width:200px;
height: 200px;
background-color: blue;
border-radius: 50%;
opacity: 0.5;
position: absolute;
top: -60px;
left: 135px;
}
</style>
</head>
<body>
<main>
<section id="jl">
<span class="hole"></span>
<h2>赵子龙<small>ZhaoZiLong</small></h2>
<h1>简历</h1>
</section>
<section id="grxx">
<span class="hole"></span>
<h2 class="sh2">个人信息</h2>
<p>
籍贯：海口<br>
政治面貌：团员<br>
毕业学校：海大<br>
专业：HTML5 <br>
</p>
<p>
民族：汉族<br>
出生日期：1988年3月8日<br>
身高：170CM
</p>
</section>
<section>
<span class="hole"></span>
<h2 class="sh2d">联系方式</h2>
<p>
电话：18888888888 <br>
E-mail：i@blog.bg7zag.com <br>
QQ：909921048
</p>
</section>
<section>
<span class="hole"></span>
<h2 class="sh2 white_text">教育经历</h2>
<p>
2002年9月至2006年6月 <br>
海南大学 <br>
计算机科学与技术
</p>
</section>
<section>
<span class="hole"></span>
<h2 class="sh2d white_text">实践经历</h2>
<p>
2012年至今 <br>
在河南智游教育 <br>
HTML5讲师
</p>
</section>
<section>
<span class="hole"></span>
<h2 class="sh2">技能水平</h2>
<p>
可熟练操作 <br>
Visual Studio Code、Fireox <br>
等开发工具
</p>
</section>
<section id="zwpj">
<span class="hole"></span>
<h2 class="sh2d">自我评价</h2>
<p>
1、大胆创新，具有敏锐的时尚触角，设计方面极感兴趣；<br>
2、有良好的独立工作能力，工作认真积极，责任心强，有较好的沟通能力和接受能力；
</p>
<p>
3、既有团队精神和协调能力，适应能力强，能吃苦耐劳，待人真诚热情
</p>
</section>
<section id="qzyx">
<span class="hole"></span>
<h2>求职意向</h2>
<h3>高级前端开发</h3>
<div></div>
<div></div>
</section>
</main>
</body>
</html>
素材下载：2017-03-16 jl
