用HTML5實現網頁版簡歷
阿新 • • 發佈：2019-01-17
<!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 ✉:
<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>
<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 ✉:
<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>