思维导图
css
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/Default.jpg);
background‐size: cover;
}
#rg {
background-color: white;
width: 1000px;
height: 500px;
display: flex;
padding‐top: 30px;
}
#div_left {
width: 20%;
margin‐left: 30px;
font‐size: 20px;
color: gainsboro;
font‐weight: bolder;
}
#t1 {
color: orange;
}
#div_center {
margin‐top: 30px;
width: 60%;
color: gray;
display: flex;
flex‐direction: column;
align-content: center;
}
#div_center input {
width: 300px;
height: 30px;
border: 1px solid gainsboro;
border‐radius: 5px;
margin: 5px;
}
#div_center #verifies {
display: flex;
align-content: center;
}
#div_center #verify {
width: 180px;
}
#div_center img {
width: 110px;
height: 35px;
}
#div_center #btn {
background‐color: yellowgreen;
width: 150px;
height: 35px;
border: none;
}
#div_right {
width: 20%;
}
#div_right a {
color: indianred;
text‐decoration: none;
}
</style>
</head>
<body>
<div id="rg">
<div id="div_left">
<font id="t1">新用户注册</font><br />
<font id="t2">USER REGISTER</font>
</div>
<div id="div_center">
<table>
<tr>
<td>账户</td>
<td>
<input type="text" name="username" placeholder="请输入账户" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="text" name="password" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="email" placeholder="请输入邮箱" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="realname" placeholder="请输入姓名" />
</td>
</tr>
<tr>
<td>手机号</td>
<td>
<input type="text" name="phonenum" placeholder="请输入手机号" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="text" name="sex" placeholder="请输入性别" />
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" placeholder="yyyy年MM月dd日" />
</td>
</tr>
<tr>
<td>验证码</td>
<td id="verifies">
<input type="text" name="validatecode" id="verify" placeholder="请输入验证码" />
<img id="img" src="img/verify_code.jpg" />
</td>
</tr>
<tr>
<td colspan="2">
<input id="btn" type="submit" value="注册"></input>
</td>
</tr>
</table>
</div>
<div id="div_right">
已有账户?
<a href="index.html">立即登录</a>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
