html文件
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="login-box">
<div class="left">
<h1>快速注册</h1>
<table class="login-table">
<tr>
<td>Email: </td>
<!--type是Email时，只能输入Email格式
type是password时，输入的字符显示圆点-->
<td><input type="Email" name="" placeholder="请输入email"></td>
</tr>
<tr>
<td>用户名: </td>
<td><input type="text" name="" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>密码: </td>
<td><input type="password" name="" placeholder="请输入密码"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<!--label的for和input的id组合，可以在点label时点上输入框-->
<input id='man' type="radio" name="gender" value="man"><label for="man">男</label>
<input id='woman' type="radio" name="gender" value="woman"><label for="woman">女</label>
</td>
</tr>
<tr>
<td>兴趣: </td>
<td>
<input id='ball' type="checkbox" name="interesting" value="ball"><label for="ball">篮球</label>
<input id='music' type="checkbox" name="interesting" value="music"><label for="music">音乐</label>
<input id='paint' type="checkbox" name="interesting" value="paint"><label for="paint">绘画</label>
</td>
</tr>
<tr>
<td></td>
<td>
<button class="submit">创建账户</button>
</td>
</tr>
</table>
</div>
<div class="right">
<p>若有账户请直接登录</p>
<button class="submit">登录</button>
</div>
</div>
</body>
</html>
css文件
body,html {
padding: 0;
margin:0;
}
body {
background: #eee;
display: flex;
flex-direction: row;
justify-content:center;
align-items:center;/*定义元素在纵轴上的对齐方式*/
height: 100VH;/*窗口被均分为100份，若窗口高度为200mm，则height为200mm*100/100*/
}
.login-box {
width: 900px;
height: 500px;
border: 1px solid #bbb;
/**添加阴影**/
box-shadow: 2px 2px 5px #999;/*box-shadow: h-shadow v-shadow blur spread color inset*/
/*| *h-shadow* | 必需。水平阴影的位置。允许负值。
| *v-shadow* | 必需。垂直阴影的位置。允许负值。
| *blur* | 可选。模糊距离。
| *spread* | 可选。阴影的尺寸。
| *color* | 可选。阴影的颜色。
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
本次使用了h-shadow，v-shadow，blur，color
*/
}
.left,.right {
height: 100%;
float:left;
box-sizing: border-box;
}
.left {
width: 700px;
background: #fff;
border-right: 1px solid #bbb;
padding: 1em;
}
.right {
width: 200px;
}
/*加空白,给父级加padding或给本身加margin*/
.left > h1 {
font-size: 18px;
margin: 0;
margin-bottom: 1em;
color: #05f;
}
.login-table {
color: #333;
font-size: 12px;
}
.login-table tr td:first-child{
text-align: right;
}
.login-table input[type=text], .login-table input[type=email], .login-table input[type=password] {
width: 280px;
height: 1em;
border: 1px solid #ddd;
font-size: 12px;
padding: 0.5em;
}
/*点击输入框会变色*/
.login-table input[type=text]:focus,
.login-table input[type=email]:focus,
.login-table input[type=password]:focus {
outline: 1px solid #09f;
}
.login-table tr td {
height: 3em;
}
.submit{
border:1px solid #05f;
background: #05f;
color: white;
padding:0.5em 1em;
box-shadow: 0px 0px 2px #444;
}
.login-table .submit {
font-size: 12px;
width: 8em;
}
.right {
padding: 1em;
font-size: 12px;
}
.right .submit {
font-size: 12px;
height: 2em;
box-sizing: border-box;
padding: 0.2em 1em;
}
