一、静态页面index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【HTML+CSS】实现移动端高级简约的登录注册界面</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="box">
<!-- 登录 -->
<div class="login">
<div class="login_top">
<img src="img/favicon.png" alt="头像">
<h2>Welcome to Login</h2>
</div>
<div class="login_bottom">
<form>
<!-- 邮箱/手机号输入框 -->
<input type="text" class="input" placeholder="Email or Phone" />
<!-- 密码输入框 -->
<input type="Password" class="input" placeholder="Password" />
</form>
<!-- 确认框/忘记密码 -->
<p>
<input type="checkbox">
<span>I agree to follow the rules.</span>
<a href="#">Reset Password</a>
</p>
<!-- 登录按钮 -->
<button>Open Sesame</button>
<p>
<span>New to our website?</span>
<a href="#">Signup</a>
</p>
</div>
</div>
<!-- 注册 -->
<div class="register">
<div class="register_top">
<div>+</div>
<h2>Welcome to register</h2>
</div>
<div class="register_bottom">
<form>
<!-- 邮箱/手机号输入框 -->
<input type="text" class="input" placeholder="Email or Phone" />
<!-- 密码输入框 -->
<input type="Password" class="input" placeholder="Password" />
<!-- 重复密码输入框 -->
<input type="Password" class="input" placeholder="Verify Password" />
</form>
<!-- 注册按钮 -->
<button>Join Us</button>
<p>
<span>Already have an account?</span>
<a href="#">Sing In</a>
</p>
</div>
</div>
</div>
</body>
</html>
二、样式index.css
注:上面使用的外部样式表 <link rel="stylesheet" href="css文件路径">
/* 清除内、外间距 */
* {
margin: 0;
padding: 0;
}
/* 去除a标签的下划线 */
a {
text-decoration: none;
}
/* 去除li标签的序列符号(小黑点) */
li {
list-style: none;
}
body {
background-image: linear-gradient(to right, #3e9597, #214c52);
}
.box {
/* 分布式布局 */
display: flex;
justify-self: center;
}
/* 登录、注册外div公用样式 */
.login,
.register {
width: 20rem;
height: 30.5rem;
background-color: white;
border-radius: 0.5rem;
margin: 1.25rem;
}
/* 登录、注册顶部div共同样式 */
.login_top,.register_top{
width: 20rem;
height: 12rem;
color: white;
border-radius: 0.5rem 0.5rem 0 0;
text-align: center;
}
.login_top{
background: #214c52;
}
.register_top{
background: #3e9597;
}
.login_top img {
width: 5.5rem;
height: 5.5rem;
margin-top: 2rem;
}
.register_top {
padding-top: 2.5rem;
/* 添加内间距防止div扩充 */
box-sizing:border-box;
}
.register_top div{
width: 5.5rem;
height: 5.5rem;
background: white;
border-radius: 10rem;
color: silver;
font-size: 4rem;
margin: 0 auto;
text-align: center;
line-height: 5.5rem;
}
.login_bottom,.register_bottom{
text-align: center;
}
/* 登录、注册表单共同样式 */
.login_bottom .input,.register_bottom .input{
width: 17.5rem;
height: 2.5rem;
margin-top: 1rem;
padding-left: 0.6rem;
border-radius: 0.6rem;
border: 0.1rem solid silver;
/* 去除表单点击后出现的边框 */
outline: none;
color: reb(107,107,107);
}
.login_bottom p{
font-size: 0.8rem;
margin-top: 1rem;
}
/* 使复选框与后面文字水平对齐 */
.login_bottom p input{
vertical-align: middle;/* vertical 垂直的 middle 中间 */
}
.login_bottom p span{
margin-right: 0.5rem;
color: #757575;
}
.login_bottom p a{
color: #214c52;
}
.register_bottom p{
font-size: 0.8rem;
margin-top: 1rem;
}
.register_bottom p span{
margin-right: 0.5rem;
color: #757575;
}
.register_bottom p a{
color: #214c52;
}
/* 登录、注册按钮共同样式 */
.login_bottom button,.register_bottom button{
width: 18rem;
height: 2.8rem;
color: white;
margin-top: 2rem;
border-radius: 0.6rem;
border: none;
}
.login_bottom button{
background: #214c52;
margin-top: 3.6rem;
}
.register_bottom button{
background: #3e9597;
}
/* 鼠标滑过按钮出现阴影效果 */
.login_bottom button:hover,.register_bottom button:hover{
box-shadow: 0.2rem 0.2rem 0 rgba(0,0,0,0.3);
}
三、LOGO素材: