验证中...
Languages: HTML
Categories: CSS 技巧
Latest update 2019-03-14 18:45
个人简介
Raw Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
div{
text-align: center;
line-height: 100px;
}
.backg{
width: 1000px;
height: 1000px;
position: relative;
left:0;
top:0;
margin: 50px auto;
/*border:2px solid red;*/
}
.left{
width:30%;
height: 100%;
background-color: black;
font-size: 18px;
font-weight: bold;
color: white;
line-height: 50px;
position:absolute ;
left:0;
top:0;
/*border: dashed 2px red;*/
}
.l1{
width:300px;
height:10%;
float:left;
background-color: green;
left:0;
top:0px;
border: 1px solid red;
}
.l2{
width:300px;
height:10%;
float:left;
background-color: green;
left:0;
top:100px;
border: 1px solid red;
}
.l3{
width:300px;
height:10%;
float:left;
background-color: green;
left:0;
top:200px;
border: 1px solid red;
}
.l4{
width:300px;
height:10%;
float:left;
background-color: green;
left:0;
top:300px;
border: 1px solid red;
}
.l5{
width:300px;
height:10%;
float:left;
background-color: green;
left:0;
top:400px;
border: 1px solid red;
}
.l6{
width:300px;
height:10%;
float:left;
background-color:green;
left:0;
top:500px;
border: 1px solid red;
}
.l7{
width:300px;
height:10%;
float:left;
background-color: green;
left:0;
top:600px;
border: 1px solid red;
}
.l8{
width:300px;
height:10%;
float:left;
background-color: green;
left:0;
top:700px;
border: 1px solid red;
}
.l9{
width:300px;
height:10%;
float:left;
background-color:green;
left:0;
top:800px;
border: 1px solid red;
}
.l10{
width:300px;
height:10%;
float:left;
background-color: green;
left:0;
top:900px;
border: 1px solid red;
}
.right {
width:70%;
height: 100%;
/*border: dashed 1px green;*/
position: absolute;
left:300px;
top:0;
}
.r1{
width:700px;
height:204px;
float:left;
background-color: peru;
left:0;
top:0px;
border: 1px solid red;
}
.r3{
float:left;
width:700px;
height:102px;
background-color: peru;
position: absolute;
left: 0;
top:204px;
border: 1px solid red
}
.r4{
float:left;
width:700px;
height:102px;
background-color: peru;
position: absolute;
left: 0;
top:306px;border: 1px solid red
}
.r5{
float:left;
width:700px;
height:102px;
background-color: peru;
position: absolute;
left: 0;
top:408px;border: 1px solid red
}
.r6{
float:left;
width:700px;
height:204px;
background-color: peru;
position: absolute;
left: 0;
top:510px;border: 1px solid red
}
.r8{
float:left;
width:700px;
height:102px;
background-color: peru;
position: absolute;
left: 0;
top:714px;border: 1px solid red
}
.r9{
float:left;
width:700px;
height:102px;
background-color: peru;
position: absolute;
left: 0;
top:816px;border: 1px solid red
}
.r10{
float:left;
width:700px;
height:102px;
background-color: peru;
position: absolute;
left: 0;
top:918px;border: 1px solid red
}
.backg .right img{
width:172.5px;
height:230px;
float:left;
margin-top:0;
}
.backg .right .r1 div{
width:172.5px;
height: 230px;
float:left;
background: #8A2BE2;
border: 1px solid red;
}
.backg .right .r1 div div{
width:172.5px;
height: 100px;
float:left;
background: #8A2BE2;
border: 1px solid red;
}
.r61{
width:393px;
height: 230px;
float:left;
background: #8A2BE2;
border: 1px solid red;
}
.r61 div{
width:393px;
height: 100px;
float:left;
background: #8A2BE2;
border: 1px solid red;
}
.r62{
width:100px;
height: 230px;
float:left;
background: #8A2BE2;
border: 1px solid red;
}
.r63{
width:200px;
height: 230px;
float:left;
background: #8A2BE2;
border: 1px solid red;
}
</style>
</head>
<body>
<h1 align="center">个人简介</h1>
<div class="backg" align="absbottom">
<div class="left">
<div class="l1">
姓名
</div>
<div class="l2">
曾用名
</div>
<div class="l3">
家庭出身
</div>
<div class="l4">
籍贯
</div>
<div class="l5">
现在家庭住址详细地址确切地址
</div>
<div class="l6">
现在任职
</div>
<div class="l7">
家庭收入来源
</div>
<div class="l8">
身份
</div>
<div class="l9">
受过的处分严重轻微以及从小到大所受到的处分
</div>
<div class="l10">
是否结婚,是否生子,是否有房有车有贷款
</div>
</div>
<div class="right">
<div class="r1">
<div>
<div>胡俊驰</div>
<div>胡俊驰</div>
</div>
<div>
<div>性别</div>
<div>出生年月</div>
</div>
<div>
<div>男</div>
<div>2000-6-11</div>
</div>
<div>
<img src="img/1.jpg" />
</div>
</div>
<div class="r3">
经商
</div>
<div class="r4">
湖北省仙桃市
</div>
<div class="r5">
湖北省仙桃市杨林尾镇古阳村一组3号
</div>
<div class="r6">
<div class="r61">
<div>学生</div>
<div>经商</div>
</div>
<div class="r62">本人<br />身体状况</div>
<div class="r63">良好没有任何<br />身体异常之处</div>
</div>
<div class="r8">普通学生</div>
<div class="r9">未受过<br />任何处分啊</div>
<div class="r10">未结婚生子没房没车有贷款</div>
</div>
</div>
<footer>
<a href="#">回到顶部</a>
</footer>
</body>
</html>

Comment list( 0 )

You need to Sign in for post a comment

Help Search