一、页面需求？
1.提供输入用户名和密码的登录功能；
2.提供忘记密码时的其他验证方式链接：
3.提供新用户的注册链接；
4.页面版权说明信息；
二、页面结构
登录页面 - 整体布局
三、页面内容
HTML：用于展示页面元素；（解决有什么内容的问题）
CSS：用于 层叠样式效果；（解决静态上是否好看的问题）
JS：用于实现交互效果。（解决用户交互效果的问题）
1.login.html的整体结构
登录页
欢迎登录***系统
LOGIN FORM
2.添加内容后的login.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