QQ註冊介面設計案例
阿新 • • 發佈：2022-05-29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*取消瀏覽器外間距*/
margin: 0;
}
.c1{
width: 80%;
height: 700px;
margin: 100px auto;
border:green 5px solid;
}
.c1 .c2{
text-align: center;
font-size: 32px;
font-weight: 500;
fount-style: italic;
font-family: "Times New Roman";
color: red;
}
.c1 .c6{
width: 100px;
height: 100px;
float: left;
clear: both;
}
.c1 .c3{
width: 200px;
height: 200px;
float: left;
margin-top: 200px;
}
.c1 .c4{
width: 200px;
height: 200px;
float: right;
clear: both;
margin-top: -200px;
}
.c5{
font-size: 32px;
width: 100px;
height: 100px;
float: right;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">註冊頁面</div>
<div class="c6">
<a href="https://www.baidu.com"><img width="300" height="200" src="https://image.110go.com/upload/tpk2/86419035.jpg" alt="百度圖片" title="百度"></a>
</div>
<div class="c3">
<p>
<label for="user">姓名</label>
<input id="user" type="text" name="user" value="root"></p>
<p>密碼 <input type="password" name="pwd" value="123456"></p>
<p>生日 <input type="date" name="birth" value="1998-10-01"></p>
</div>
<div class="c4">
<p>愛好:
跑步 <input type="checkbox" name="hobby" value="running" checked>
籃球 <input type="checkbox" name="hobby" value="basketball" checked>
檯球 <input type="checkbox" name="hobby" value="billiards">
</p>
<p>性別:
男 <input type="radio" name="hobby" value="man" checked>
女 <input type="radio" name="hobby" value="woman">
其他 <input type="radio" name="hobby" value="lady-boy">
</p>
<p>籍貫:
<select name="">
<option value="hebei" checked>河北省</option>
<option value="beijing">北京市</option>
<option value="tianjin">天津市</option>
</select>
</p>
<p><input type="file"></p>
<p>
<textarea placeholder="個人簡介" name="brief" id="" cols="30" rows="10"></textarea>
</p>
</div>
</div>
<div class="c5">
<p><input type="submit"></p>
</div>
</form>
</body>
</html>