哈哈哈，第一次编辑属于自己的主页，不知道怎么做，学的内容也不太熟练，既麻烦又简陋(T＿T)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<style>
.box{
width :600px;
height: 500px;
}
.head{
width:600px;
height:280px;
background: #97b8d7 url(hanpengda.jpg) no-repeat 445px 10px;
position: relative;
}
.head1{
width:260px;
height:35px;
position: absolute;
left:150px;
top:130px;
font:bold 25px/35px "宋体";
color:#fff;
text-align: center;
background:#5f9bcf;
}
.head2{
width:260px;
height:20px;
position: absolute;
left:150px;
top:175px;
font:bold 15px/20px "宋体";
color:#fff;
text-align: center;
background:#6a85a2;
}
.body{
width:600px;
height:220px;
background: #ffc907;
font-size:10px;
position: relative;
}
.body0{
width:130px;
height:30px;
position: absolute;
left:235px;
top:10px;
font:bold 25px/30px "宋体";
color:#fff;
text-align: center;
}
.body1{
width:100px;
position: absolute;
left:150px;
top:60px;
background: #dcb527;
}
.body2{
width:100px;
position: absolute;
left:400px;
top:60px;
background: #dcb527;
}
.body3{
width:100px;
position: absolute;
left:150px;
top:90px;
background: #dcb527;
}
.body4{
width:100px;
position: absolute;
left:400px;
top:90px;
background: #dcb527;
}
.body5{
width:100px;
position: absolute;
left:150px;
top:120px;
background: #dcb527;
}
.body6{
width:100px;
position: absolute;
left:400px;
top:120px;
background: #dcb527;
}
.body7{
width:100px;
position: absolute;
left:150px;
top:150px;
background: #dcb527;
}
.body8{
width:100px;
position: absolute;
left:400px;
top:150px;
background: #dcb527;
}
.body9{
width:100px;
position: absolute;
left:150px;
top:180px;
background: #dcb527;
}
.body10{
width:100px;
position: absolute;
left:400px;
top:180px;
background: #dcb527;
}
.body11{
width:35px;
height:20px;
position: absolute;
left:95px;
top:61px;
}
.body12{
width:35px;
height:20px;
position: absolute;
left:345px;
top:61px;
}
.body13{
width:35px;
height:20px;
position: absolute;
left:95px;
top:91px;
}
.body14{
width:50px;
height:20px;
position: absolute;
left:345px;
top:91px;
}
.body15{
width:35px;
height:20px;
position: absolute;
left:95px;
top:121px;
}
.body16{
width:35px;
height:20px;
position: absolute;
left:345px;
top:121px;
}
.body17{
width:50px;
height:20px;
position: absolute;
left:95px;
top:151px;
}
.body18{
width:35px;
height:20px;
position: absolute;
left:345px;
top:151px;
}
.body19{
width:35px;
height:20px;
position: absolute;
left:95px;
top:181px;
}
.body20{
width:50px;
height:20px;
position: absolute;
left:345px;
top:181px;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<div class="head1">Hi,I am HanPengda</div>
<div class="head2">This is my personal homepage</div>
</div>
<div class="body">
<div class="body0">My Profile</div>
<form action="">
<input type="text" name="text" value="韩鹏达" class="body1">
<input type="text" name="text" value="男" class="body2">
<input type="text" name="text" value="汉" class="body3">
<input type="text" name="text" value="1997.08" class="body4">
<input type="text" name="text" value="学生" class="body5">
<input type="text" name="text" value="大学本科" class="body6">
<input type="text" name="text" value="辽宁科技大学" class="body7">
<input type="text" name="text" value="通信工程(‵▽ ′ )" class="body8">
<input type="text" name="text" value="一心只爱学习！" class="body9">
<input type="text" name="text" value="15941265505" class="body10">
</form>
<div class="body11">姓名</div>
<div class="body12">性别</div>
<div class="body13">民族</div>
<div class="body14">出生年月</div>
<div class="body15">职业</div>
<div class="body16">学历</div>
<div class="body17">在读学校</div>
<div class="body18">专业</div>
<div class="body19">爱好</div>
<div class="body20">联系方式</div>
</div>
</div>
</body>
</html>
效果图截图
Paste_Image.png
百度网盘链接: http://pan.baidu.com/s/1bp25Tdd
密码: 8yb6
网友评论