前端开发2：基于Bootstrap的登录页面

一、页面需求？

1.提供输入用户名和密码的登录功能；
2.提供忘记密码时的其他验证方式链接：
3.提供新用户的注册链接；
4.页面版权说明信息；

二、页面结构

登录页面 - 整体布局

三、页面内容

HTML：用于展示页面元素；（解决有什么内容的问题）
CSS：用于层叠样式效果；（解决静态上是否好看的问题）
JS：用于实现交互效果。（解决用户交互效果的问题）

1.login.html的整体结构

<!doctype html>
<html>
<head>
<!--1.指定编码格式-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--2.设置页面以默认比例展示（即不缩放）:初始化移动浏览显示，用于适配移动浏览器-->
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1" >
<!--3.网站关键字，SEO优化-->
<meta name="keywords" content="Login form web Site, Sign up Web Site" />
<!--4.引入Bootstrap框架的CSS文件-->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--5.引入自定义的CSS文件-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--6.引入低于IE9的兼容性设置 -->
    <!--[if lt IE 9]>
         <script src="lib/html5shiv/html5shiv.js"></script>
         <script src="lib/respond/respond.min.js"></script>
      <![endif]-->
<title>登录页</title>
</head>
<body>
<div class="bg">
    <h2>欢迎登录***系统</h2>
    <!--第1框：登录框-->
<div class="login-top">
        <h1>LOGIN FORM</h1>
        <form class="form-horizontal" role="form">
            <!--第1行：账号-->
            <div class="form-group"></div>
            <!--第2行：密码-->
            <div class="form-group"></div>
            <!--第3行：记住我-->
<div class="form-group"></div>
<!--第4行：登录按钮-->
            <div class="form-group"></div>
        </form>
</div>
<!--第2框：新用户注册框-->
    <div class="login-bottom"></div>
    <!--第3框：页面版权说明-->
    <div class="copyright"></div>
</div></body>

2.添加内容后的login.html

<body>
<div class="bg">
    <h2>欢迎登录***系统</h2>
    <div class="login-top">
        <h1>LOGIN FORM</h1>
        <form class="form-horizontal" role="form">
            <!--第1行：账号-->
            <div class="form-group">
                <label for="name" class="col-sm-3 control-label">User Name：</label>
                <div class="col-sm-8">
                    <input type="text" id="name" class="form-control" placeholder="请输入用户名">
                </div>
            </div>
            <!--第2行：密码-->
            <div class="form-group">
                <label for="password" class="col-sm-3 control-label">Password：</label>
                <div class="col-sm-8">
                    <input type="password" id="password" class="form-control" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-5">
                    <div class="checkbox">
                            <label>
                                <input type="checkbox">请记住我
                            </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="forgot col-sm-offset-2 col-sm-10">
                    <a href="#">forgot Password</a>
                    <input type="submit" value="Login">
                    <!--<button type="submit" class="btn btn-success">登录</button>-->
                </div>
            </div>
        </form>
    </div>
    <!--第2框：新用户注册框-->
    <div class="login-bottom">
        <h3>New User &nbsp;<a href="#">Register</a>&nbsp Here</h3>
    </div>
    <!--第3框：页面版权说明-->
    <div class="copyright">
        <p>Copyright &copy; 2017.ZHBIT 肖sir All rights reserved.</p>
    </div>
</div>

<!-- 7.引入jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="lib/jquery/jquery-1.11.0.min.js"></script>
    <!-- 包括所有已编译的插件 -->
      <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <!--规范提醒：css的载入放到head中，js的载入放到body中。-->
</body>
</html>

登录页面内容展示

四、布局和美化（CSS）

0.初始化所有默认样式：

/*初始化所有默认样式*/
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{  vertical-align:top;}/* vertical align top */
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{   display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/

1.设置整体背景图、以及全文默认字体大小：

/*--1.设置整体背景图、以及全文默认字体大小--*/
body{
   background: url(../images/banner.jpg)repeat;
   padding:100px 0px 30px 0px;
   font-size: 13px;
}

2.登录框定位，并按屏幕比例自适应变化：

/*--2.中间登录框的大小，根据屏幕比例自适应变化--*/
.bg {
  width: 40%;
  margin: 0 auto;
}
.bg h2{
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 0px 0px 50px 0px;
  font-family: 'Droid Serif', serif;
}

3.登录框div局部布局

/*--3.登录框上半部分--*/
.login-top {
  background-color:#E1E1E1 ;
  border-radius: 25px 25px 0px 0px;
  padding: 40px 60px;
  opacity:0.9;
}
.login-top h1 {
  text-align: center;
  font-size: 27px;
  font-weight: 500;
  color: #F45B4B;
  margin: 0px 0px 20px 0px;
}

3.2. 账户输入框的样式自定义：

/*3.2.账户输入框的样式自定义*/
.login-top input[type="text"] {
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: #818181;
  padding: 1px 20px;
  background: #CACACA;
  border: 1px solid #ccc;
  border-radius:25px;
  margin: 0px 0px 12px 0px;
  width: 88%;
}

3.3. 密码输入框的样式自定义：

/*3.3.密码输入框的样式自定义*/
.login-top input[type="password"]{
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: #818181;
  padding: 1px 20px;
  background: #CACACA;
  border: 1px solid #ccc;
  border-radius:25px;
  margin: 0px 0px 12px 0px;
  width: 88%;
}

3.4. 忘记密码：

/*3.4.忘记密码*/
.forgot  a{
  font-size: 13px;
  font-weight: 500;
  color: #F45B4B;
  display: inline-block;
  border-right: 2px solid #F45B4B;
  padding: 0px 7px 0px 0px;
}
.forgot  a:hover{
  color: #818181;
}

3.5. 登录按钮：

.forgot input[type="submit"] {
  background: #F45B4B;
  color: #FFF;
  font-size: 17px;
  font-weight: 400;
  padding: 8px 7px;
  width: 20%;
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
  margin: 0px 7px 0px 3px;
  outline: none;
  border: none;
}
.forgot input[type="submit"]:hover {
    background:#818181;
    transition: 0.5s all;
}

4.新用户注册框（下半部分）：

.login-bottom {
  background: #E15748;
  padding: 20px 65px;
  border-radius: 0px 0px 25px 25px;
  text-align: right;
  border-top: 2px solid #AD4337;
}
.login-bottom h3 {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.login-bottom h3 a {
  font-size: 25px;
  font-weight: 500;
  color: #fff;
}
.login-bottom h3 a:hover {
  color:#696969;
  transition: 0.5s all;/*颜色渐变效果*/
}

5.网站脚注：开发时间、开发者、授权单位等：

.copyright {
  padding: 150px 0px 0px 0px;
  text-align: center;
}
.copyright p {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}
.copyright p a{
  font-size: 15px;
  font-weight: 400;
  color: #E15748;
}
.copyright p a:hover{
  color: #fff;
  transition: 0.5s all;/*颜色渐变效果*/
}

6.不同分辨率下的登录框自适应宽度：

/*当屏幕宽度变化时，根据不同尺寸，修改中间登录框的大小（比例）*/
@media(max-width:1024px){
.bg {
  width: 60%;
}
@media(max-width:768px){
.bg {
  width: 70%;
}
@media(max-width:480px){
.bg {
  width: 90%;
}

登录页面效果

五、引入到IDEA项目中

在resources目录新建resources文件夹，用于存放项目使用到的静态资源文件（包括html、CSS、js等），把做好的页面及静态资源包复制到该文件夹下。
SpringBoot在默认无路由的情况下，自动访问静态资源文件夹，如果还没才会返回error页面。

静态资源目录

访问测试：http://localhost:8080/login.html