本步骤主要知识点：

1、超全局变量$_SESSION应用保存登录状态，注意使用前必须session_start()
2、给普通密码加盐值，加强密码强度
3、注销登录，具体查看logout.php代码

1、模板

html代码

  
    
      
        
留言表单后台登录
        
FEEDBACK
      

      
        
          
            
            
          

          
        
      

    

  

css代码

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h2, h3, h4, h4, h5, h6, h7 {
    font-weight: normal;
}

body {
    font-family:"微软雅黑", "Microsoft Yahei";
}
.wp {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}
a {
    color: #333;
}
a:hover {
    color: #e4392a;
}

#hd {
    /*height: 101px;*/
    height: 90px;
    background: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, .3);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index:9999;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}

.tit-i {
    text-align: center;
    padding: 50px 0;
    line-height: 36px;
    overflow: hidden;
}
.tit-i h4 {
    font-size: 30px;
    color: #002;
    margin-bottom: 10px;
}
.tit-i h6 {
    font-size: 20px;
    color: #cacace;
    text-transform: uppercase;
    font-family: Arial;
}
.tit-i h6 span {
    color: #e4392a;
}
.tit-i em {
    width: 45px;
    border-bottom: 1px solid #7f7f90;
    display: inline-block;
}

.login-l {
    width: 38%;
    float: left;
}
.login-r {
    width: 50%;
    margin: 0 auto;
}

.login-form .inp {
    width: 49%;
    border: 1px solid #6d6d88;
    height: 33px;
    padding: 0 10px;
    margin-bottom: 15px;
}
.login-form textarea {
    width: 100%;
    border: 1px solid #6d6d88;
    height: 98px;
    margin-bottom: 24px;
}
.login-form .sub {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #63637f;
    border: 0;
    cursor: pointer;
    font-family:"微软雅黑", "Microsoft Yahei";
    font-size: 16px;
}

.list ul{
    padding: 20px 0;
    width: 50%;
    margin: 0 auto;
}
.list .tit-i{
    padding: 50px 0 10px 0;
}
.list ul li{line-height: 1.8em;color: #666;}

2、数据操作

--
-- 表的结构 `admin`
--

CREATE TABLE `admin` (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `login_name` varchar(128) NOT NULL COMMENT '登录账号',
  `password` varchar(64) NOT NULL COMMENT '登录密码',
  `salt` char(4) NOT NULL COMMENT '盐值，加强密码强度',
  `addtime` int(10) UNSIGNED NOT NULL DEFAULT '0' COMMENT '记录时间',
  PRIMARY KEY (`id`),
  KEY `login_name` (`login_name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='管理员数据表';

login.php

alert('登录成功');setTimeout(function(){location.href='/login_ok.php'}, 500)";

login_ok.php

  
    
      
            您好，，退出。
        
      
        
您已登录后台中心！
      

    

  

logout.php

alert('注销登录成功');setTimeout(function(){location.href='/login.html'}, 500)";

3、测试

养成好习惯，简单测试一遍，再提交工作。
登录页面

登录成功后的页面