<div class="form_area">
<p class="title">账号注册</p>
<form action="">
<div class="form_group">
<label class="sub_title" for="name">昵称</label>
<input placeholder="请输入一个昵称" class="form_style" type="text">
</div>
<div class="form_group">
<label class="sub_title" for="email">邮箱</label>
<input placeholder="请输入邮箱" id="email" class="form_style" type="email">
</div>
<div class="form_group">
<label class="sub_title" for="password">密码</label>
<input placeholder="请输入密码" id="password" class="form_style" type="password">
</div>
<div>
<button class="btn">注册</button>
<p>
已有账号？
<a class="link" href="#">前往登录</a>
</p>
</div>
</form>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
--shadow-color: #E99F4C;
--bg-color: #EDDCD9;
--btn-color: #DE5499;
--shadow-color: #8C7873;
--bg-color: #F5F5F5;
--btn-color: #4CAF50;
}
.form_area {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: var(--bg-color);
height: auto;
width: auto;
border: 2px solid #264143;
border-radius: 20px;
box-shadow: 3px 4px 0px 1px var(--shadow-color);
}
.title {
color: #264143;
font-weight: 900;
font-size: 1.5em;
margin-top: 20px;
}
.sub_title {
font-weight: 600;
margin: 5px 0;
}
.form_group {
display: flex;
flex-direction: column;
align-items: baseline;
margin: 10px 15px;
}
.form_style {
outline: none;
border: 2px solid #264143;
box-shadow: 3px 4px 0px 1px var(--shadow-color);
width: 300px;
padding: 12px 10px;
border-radius: 4px;
font-size: 15px;
}
.form_style:focus, .btn:focus {
transform: translateY(4px);
box-shadow: 1px 2px 0px 0px var(--shadow-color);
}
.btn {
padding: 15px;
margin: 25px 0px;
width: 300px;
font-size: 15px;
background: var(--btn-color);
border-radius: 10px;
font-weight: 800;
box-shadow: 3px 3px 0px 0px var(--shadow-color);
}
.btn:hover {
opacity: .9;
}
.link {
font-weight: 800;
color: #264163;
padding: 5px;
}
预览
控制台