html+css登录注册页面案例
一、展示效果
1. 登陆页面展示（背景图片来自网络可以自己更换）：
2. 注册页面展示：
二、需要添加的normalize.css跟common.css
代码如下（normalize.css重置样式表）：
/* 重置样式表 */
/* 重置内外边距 */
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
/* 去除图片底部4px白边 */
img{
vertical-align: middle;
}
/* 去除li的点 */
ul{
list-style: none;
}
/* 重置a标签的默认样式 */
a{
text-decoration: none;
color: black;
}
代码如下（common.css公共样式表）：
/* 公共样式表 */
/* 左浮动 */
.fl{
float: left;
}
/* 右浮动 */
.fr{
float: right;
}
/* 清除浮动 */
.clearfix::after{
content: '';
height: 0px;
display: block;
clear: both;
}
/* 测试 */
.test{
border: 1px solid red;
}
/* 重置container内边距 */
.container , .container-fuild{
padding: 0%;
}
body{
background-color: #f2f2f2;
}
h1,h2,h3,h4,h5,h6{
padding: 0%;
margin: 0%;
}
/* ================================================================================== */
/* 公共模块表 */
/* 头部模块 */
/* 尾部模块 */
三、登陆页面
- login.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>登录页面title>
<link rel="stylesheet" href="../../asset/css/normalize.css">
<link rel="stylesheet" href="../../asset/css/common.css">
<link rel="stylesheet" href="./login.css">
head>
<body>
<form action="#" class="" method="post">
<div class="login "><a>登录页面a> div>
<div class="userName clearfix"><p class="fl">用户名:p><input type="text" class="fr" id="userName" placeholder="请输入用户名">div>
<div class="passWord clearfix"><p class="fl">密码:p><input type="text" class="fr" id="passWord" placeholder="请输入密码">div>
<div class="button clearfix"><button type="submit" class="fr" id="button">登录button>div>
<div class="register fr"><a href="../register/register.html">注册新账号a> div>
form>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous">script>
body>
html>
- login.css代码展示：
body {
background-image: url(../../asset/img/图片1.png);
background-repeat: no-repeat;
background-size: 1500px auto;
}
/* ================================================================================== */
/* 登录样式 */
form {
width: 600px;
height: 400px;
text-align: center;
position: relative;
margin: 0 auto;
background-color: rgba(0, 0, 0, .5);
margin-top: 10%;
border-radius: 20px;
padding-top: 40px;
}
.login {
width: 200px;
height: 50px;
margin: 0% auto;
line-height: 50px;
}
.login a{
font-size: 36px;
color: whitesmoke;
}
.passWord,
.userName,
.button{
width: 420px;
margin: 0 auto;
margin-top: 30px;
box-sizing: border-box;
}
.passWord p,
.userName p {
color: whitesmoke;
font-size: 28px;
line-height: 50px;
}
#userName,
#passWord{
height: 50px;
width: 320px;
font-size: 24px;
outline: none;
padding-left: 20px;
background: none;
border-radius: 15px;
border: 2px solid gray;
}
button {
width: 320px;
height: 50px;
background: none;
outline: none;
border: 2px solid gray;
border-radius: 15px;
font-size: 24px;
transition: all 1s;
color: whitesmoke;
}
button:hover {
background: rgb(175, 170, 175);
color: whitesmoke;
}
.register {
width: 300px;
margin-top: 20px;
}
.register a {
color: whitesmoke;
font-size: 18px;
}
input{
color: whitesmoke;
}
四、注册页面
- register.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>登录页面title>
<link rel="stylesheet" href="../../asset/css/normalize.css">
<link rel="stylesheet" href="../../asset/css/common.css">
<link rel="stylesheet" href="./register.css">
head>
<body>
<form action="#" class="" method="post">
<div class="register">注册页面div>
<div class="yourUserName clearfix"><p class="fl">用户名:p><input type="text" class="fr" id="userName" placeholder="请输入您要注册的账号">div>
<div class="yourPassWord clearfix"><p class="fl">注册密码:p><input type="text" class="fr" id="passWord" placeholder="请输入您要注册的密码">div>
<div class="email clearfix"><p class="fl">邮箱地址:p><input type="text" class="fr" id="email" placeholder="请输入您的邮箱">div>
<div class="button clearfix"><button type="submit" class="fr" id="button">点击注册button>div>
<div class="register fr"><a href="../login/login.html">点击跳转到登录页面a> div>
form>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous">script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous">script>
body>
html>
- register.css代码展示：
body {
background-image: url(../../asset/img/图片1.png);
background-repeat: no-repeat;
background-size: 1500px auto;
}
/* ================================================================================== */
/* 登录样式 */
form {
width: 600px;
height: 500px;
text-align: center;
position: relative;
margin: 0 auto;
background-color: rgba(0, 0, 0, .5);
margin-top: 6%;
border-radius: 20px;
padding-top: 20px;
}
.register {
width: 200px;
height: 50px;
margin: 0% auto;
line-height: 50px;
font-size: 36px;
color: whitesmoke;
}
.yourPassWord,
.yourUserName,
.email,
.button{
width: 450px;
margin: 0 auto;
margin-top: 30px;
box-sizing: border-box;
}
.yourPassWord,
.yourUserName,
.email {
color: whitesmoke;
font-size: 28px;
line-height: 50px;
}
#userName,
#passWord,
#email{
height: 50px;
width: 320px;
font-size: 24px;
outline: none;
padding-left: 20px;
background: none;
border-radius: 15px;
border: 2px solid gray;
}
button {
width: 320px;
height: 50px;
background: none;
outline: none;
border: 2px solid gray;
border-radius: 15px;
font-size: 24px;
transition: all 1s;
color: whitesmoke;
}
button:hover {
background: rgb(175, 170, 175);
color: whitesmoke;
}
.register {
width: 300px;
margin-top: 20px;
}
.register a {
color: whitesmoke;
font-size: 18px;
}
input{
color:whitesmoke;
}