<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
box-sizing: border-box;
color: #DE8786;
}
.mainbox {
width: 980px;
margin: 0 auto;
}
.nav {
background-color: #FE9AB5;
}
.nav .item {
display: inline-block;
line-height: 46px;
padding: 0 30px;
color: #fff;
}
.banner {
text-align: center;
}
.frombox {
background: url("./images/content_bg.jpg");
padding: 0 180px;
}
.step {
padding: 10px 0;
}
.step .tip {
font-size: 20px;
line-height: 42px;
float: left;
}
.userinfo .title {
border-bottom: 1px solid #FE9AB5;
line-height: 42px;
margin-bottom: 10px;
}
input {
border: 1px solid #FE9AB5;
}
.tableinput {
padding: 5px 30px;
}
.tableinput tr {
margin: 10px 0;
}
.tableinput .info {
width: 220px;
height: 22px;
}
.tableinput tr .titles {
text-align: right;
}
.tableinput select {
width: 168px;
border-color: #FE9AB5;
color: #FE9AB5;
}
</style>
</head>
<body>
<div class="content">
<div class="logo mainbox">
<img src="./images/logo.jpg" alt="">
</div>
<div class="nav">
<ul class="mainbox">
<li class="item">首页</li>
<li class="item">会员</li>
<li class="item">活动</li>
<li class="item">直播</li>
<li class="item">视频</li>
<li class="item" style="background-color: #FE9AB5;">注册</li>
</ul>
</div>
<div class="banner">
<img src="./images/banner.jpg" alt="">
</div>
<div class="frombox mainbox">
<div class="step">
<span class="tip">注册步骤：</span>
<img src="./images/step.jpg" alt="">
</div>
<div class="userinfo">
<p class="title">您的账号信息：</p>
<table class="tableinput">
<tr>
<td class="titles">注册方式：</td>
<td><input type="radio"> E-main注册 <input type="radio"> 手机号码注册</td>
</tr>
<tr>
<td>注册邮箱：</td>
<td><input class="info" type="email"></td>
</tr>
<tr>
<td class="titles">注册手机：</td>
<td><input class="info" type="email"></td>
</tr>
<tr>
<td class="titles">登录密码：</td>
<td><input class="info" type="email"></td>
</tr>
<tr>
<td class="titles">昵称：</td>
<td><input class="info" type="email"></td>
</tr>
</table>
</div>
<div class="userinfo">
<p class="title">您的个人信息：</p>
<table class="tableinput">
<tr>
<td class="titles">性别：</td>
<td><input type="radio"> 男 <input type="radio"> 女</td>
</tr>
<tr>
<td class="titles">学历：</td>
<td><select>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
</select></td>
</tr>
<tr>
<td class="titles">所在城市：</td>
<td><select>
<option value="北京">北京</option>
<option value="江西">江西</option>
<option value="四川">四川</option>
</select></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>