哈哈哈，第一次編輯屬于自己的主頁(yè)，不知道怎么做，學(xué)的內(nèi)容也不太熟練，既麻煩又簡(jiǎn)陋(T＿T)
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>個(gè)人主頁(yè)</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="韓鵬達(dá)" 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="學(xué)生" class="body5">
<input type="text" name="text" value="大學(xué)本科" class="body6">
<input type="text" name="text" value="遼寧科技大學(xué)" class="body7">
<input type="text" name="text" value="通信工程(‵▽ ′ )" class="body8">
<input type="text" name="text" value="一心只愛(ài)學(xué)習(xí)！" 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">職業(yè)</div>
<div class="body16">學(xué)歷</div>
<div class="body17">在讀學(xué)校</div>
<div class="body18">專業(yè)</div>
<div class="body19">愛(ài)好</div>
<div class="body20">聯(lián)系方式</div>
</div>
</div>
</body>
</html>
效果圖截圖
Paste_Image.png
百度網(wǎng)盤(pán)鏈接: http://pan.baidu.com/s/1bp25Tdd
密碼: 8yb6
