用HTML5实现网页版简历

最新推荐文章于 2021-01-04 01:16:08 发布

DaSheng1104

最新推荐文章于 2021-01-04 01:16:08 发布

阅读量8.7k

点赞数 4

文章标签： thml5 css

本文链接：https://blog.csdn.net/loganpython/article/details/69683455

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<style>
html{

height: 100%;
}
body{
height: 100%;
background-repeat: no-repeat;
background-size:100% 100%;
background-image: url(back.jpg)

}
main{
width: 80%;
height: 500px;
margin:0 auto;
/*background-color: orange;*/
/*text-align: center;*/
}

section{

width: 400px;
height: 150px;
background-color:pink;
border-radius: 10px;
margin: 0 auto;
position: relative;
line-height: -50px;
}


/*2n-1 控制所有的奇数位元素*/
section:nth-child(2n+1):{

left:-80px;

}

/*2n控制所有偶数位的元素*/
section:nth-child(2n){

left:80px;

}

section:nth-child(1){


background-color: deeppink;
/*z-index: 用来设置元素之间的层级关系，值越大越靠上*/
z-index: 400;
/*rotate()旋转。单位deg
正值代表顺时针，负值代表逆时针。*/
transform:rotate(3deg)

}



section:nth-child(2){


background-color: yellow;
/*top:-5px;*/
z-index: 300;
transform: rotate(-1deg);



}

section:nth-child(3){

background-color:lime;
top:-10px;
z-index: 200;
transform: rotate(1.5deg)

}

section:nth-child(4){

background-color: yellowgreen;
top:-20px;
z-index: 100;
transform: rotate(-2deg)

}

section:nth-child(5){

background-color: mistyrose;
top:-40px;
z-index: 50;
}

section:nth-child(6){

background-color: pink;
top:-60px;
z-index: 1000;
transform: rotate(-3deg)

}
#one>h1{
position: relative;
font-size:45px;
font-family: '楷体';
float:right;
clear:both;
top:-20px;
}
#one>h3{

font-size: 30px;
top:10px;
padding: 30px;
}
div{
position: relative;
background-color: brown;
width: 20px;
height: 20px;
top:-10px;
margin:20px;
border-radius: 100%;

}
#two>h1{
margin: 0 0 0 20px;
}
#two>h5{
margin: 0 0 0 20px;
/*font-color:red;*/
}

#three>h1{
margin: 10px 0 0 300px;

}
#three>h5{
margin: 0 0 0 20px;
}
#four>h1{
margin: 10px 0 0 150px;

}
#four>h5{
margin: 5px 0 0 150px;
}
#four>div{
position: relative;
top:-30px;
}
#five>h1{
/*margin: 0 0 0 10px;*/
/*float:right*/
position:relative;
left:300px;
top: -30px;

}
#five>h5{
margin: 0 auto;
position: relative;
top:-30px;
right: -20px;
}
#five>div{
position: relative;
top:120px;
}
#six>div{
position: relative;
top:120px;
}
p{
margin: 0 auto;
position: relative;
left: 250px;
/*float: right;*/
/*text-align: center;*/

}
#six>h1{
margin: 0 auto;
position: relative;
top:-20px;
left:10px;
}
</style>
</head>
<body>
<main>
<section id="one">
<h1>我的简历</h1>
<h3>杨过</h3>
<div></div>
</section>
<section id="two">
<h1>个人信息</h1>
<h5>性别：男</h5>
<h5>年龄：35</h5>
<h5>身高：180cm</h5>
<h5>媳妇：❤小龙女</h5>
<div></div>

</section>
<section id="three">
<h1>教育经历</h1>
<h5>➸蛤蟆功</h5>
<h5>➸玉女心经</h5>
<h5>➸玄铁重剑</h5>
<h5>➸黯然销魂掌</h5>
<div></div>

</section>
<section id="four">
<h1>学习经历</h1>
<h5>•欧阳锋教师蛤蟆功 </h5>
<h5>•自创黯然销魂掌</h5>
<h5>•小龙女教授玉女心经</h5>
<h5> •雕兄教授玄铁重剑</h5>
<div></div>

</section>
<section id="five">
<div></div>
<h1>联系方式</h1>
<h5>E-mail ✉:2428707967@qq.com</h5>
<h5>Phone ☏：18002473605</h5>
<h5>Adress：钟南山下，活死人墓</h5>

</section>
<section id="six">
<div></div>
<h1>求职意向</h1>
<p>★高级全栈工程师</p>
<p>★自动化测试</p>
<p>★自动化运维</p>

</section>

</main>
</body>
</html>