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時(shí)，只能輸入Email格式
type是password時(shí)，輸入的字符顯示圓點(diǎn)-->
<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組合，可以在點(diǎn)label時(shí)點(diǎn)上輸入框-->
<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">創(chuàng)建賬戶</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* | 必需。水平陰影的位置。允許負(fù)值。
| *v-shadow* | 必需。垂直陰影的位置。允許負(fù)值。
| *blur* | 可選。模糊距離。
| *spread* | 可選。陰影的尺寸。
| *color* | 可選。陰影的顏色。
| inset | 可選。將外部陰影 (outset) 改為內(nèi)部陰影。 |
本次使用了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;
}
/*點(diǎn)擊輸入框會(huì)變色*/
.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;
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。
