一、展示效果
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><!-- 1.重置样式 --><link rel="stylesheet" href="../../asset/css/normalize.css"><!-- 2.公共样式 --><link rel="stylesheet" href="../../asset/css/common.css"><!-- 3.当前样式 --> <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><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="/npm/jquery@1.12.4/dist/jquery.min.js"integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"crossorigin="anonymous"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="/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><!-- 1.重置样式 --><link rel="stylesheet" href="../../asset/css/normalize.css"><!-- 2.公共样式 --><link rel="stylesheet" href="../../asset/css/common.css"><!-- 3.当前样式 --> <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><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="/npm/jquery@1.12.4/dist/jquery.min.js"integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"crossorigin="anonymous"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="/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;}
