PHP+MySQL实现留言板功能（一）

1.登陆注册页面前端设计

       由于小编第一次写博客，加上前端知识还不够扎实，本文小编着重处理后端，及PHP连接数据库，实现添加留言，删除留言功能。话不多说，我们直接上代码。

  登陆页面设计：我们将其命名为：index.php

由于小编在设计的时候把所有的css全部写在了一个文件中，所以css文件我会最后发出来。

 

 

  

    

      
  
       
 
     
 
           
用户登陆
     
       
  
           
用户名
  
           
  
       
  
       
  
           
密   码
  
           

       
       
 
           

           
             
             
           
  
       
 
     
     
    
  
 


 

注册页面设计：我们将其命名为：register.php

 

  

    

      

      

      
 
          
注册用户
      
      

          
用户名
          

          
          
      
      

          
密   码
          

          
      
      
      

          
Again
          

          
          
      
      

        

        
         
        
        
      
   
   
    
  

这样在加上我最后发出来的css文件，就实现了一个简单的登陆注册的前端页面的设计了。前端效如下：

接下来我们先实现登陆和注册功能，在注册页面通过post传输方法得到的

首先创建数据表储存账号和对应密码：

代码如下：

DROP TABLE IF EXISTS `tbl_ms`;
CREATE TABLE `tbl_ms` (
  `username` varchar(25) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

这样，简单的注册功能加上后台处理页面就实现了，后面我也会把登陆注册后台处理页面发出来的。要实现登陆功能，就要先写出添加留言的前端网页，否则就会出现这样的界面：

小编就不解释为什么会出现这样的情况了 ，相信大家都懂。

为了方便大家后面的页面设计，我在这一节就先把css文件类容先发出来，将其命名为index1.css

.btn {
    color: white;
    background-color: #2579d1;
    padding: 0px 1em;
    height: 35px;
	font-size:17px;
	border-radius: 12px;
   /* border: 0px solid black;*/
}

.btn:hover {
    background-color: #00ff00;
}
.index_01{
   height: 400px;width: 400px;
   margin:auto; 
   position: absolute;top: 0;
   left: 0;right: 0;bottom: 0;
   border-radius: 50%; 
   background-color: rgba(50,150,550,0.5);
   font-family:宋体;
}
div.k1 {
	margin-top:55px;
    margin-left:auto;
    margin-right:auto;
    max-width: 500px;
    background: #D2E9FF;
    padding: 20px 20px 20px 20px;
    color: #666;
}
h1 {
    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 10px 10px 10px 20px;
    display: block;
    background: #C0E1FF;
    border-bottom: 1px solid #B8DDFF;
    margin: -20px -20px 15px;
    }
h1>span {
    display: block;
    font-size: 14px;
}
label {
    display: block;
    margin: 0px 0px 5px;
}
label>span {
    float: left;
    width: 22%;
    text-align: right;
    padding-right: 15px;
    margin-top: 10px;
    font-weight: bold;
}
input[type="text"],textarea,select {
    color: #888;
    width: 70%;
    padding: 0px 0px 0px 5px;
    border: 1px solid #C5E2FF;
    background: #FBFBFB;
    outline: 0;
    -webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
    box-shadow: inset 0px 1px 6px #ECF3F5;
    font: 200 12px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;
    height: 30px;
    line-height:15px;
    margin: 2px 6px 16px 0px;
}
textarea{
    height:100px;
    padding: 5px 0px 0px 5px;
    width: 70%;
}
.button,.reset,.submit,.button1{
    padding: 10px 30px 10px 30px;
    background: #66C1E4;
    border: none;
    color: #FFF;
    box-shadow: 1px 1px 1px #4C6E91;
    -webkit-box-shadow: 1px 1px 1px #4C6E91;
    -moz-box-shadow: 1px 1px 1px #4C6E91;
    text-shadow: 1px 1px 1px #5079A3;
}
.button:hover,.reset:hover,.submit:hover,.button1:hover{
    background: #9AFF02;
}
.wrapper {
    width: 600px;
    margin: 0 auto;
}
.ds-post-main {
    position: relative;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.ds-comment-body {
    z-index: 1;
    position: relative;
    left: 0;
    background: #F0F0E3;
    padding: 15px 15px 15px 30px;
    color: #696A52;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;
}
.ds-comment-body {
    color: #696A52;
}
.ds-avatar {
    z-index: 2;
    position: absolute;
    top: 48px;
    left: -20px;
    padding: 5px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: -1px 0 1px rgba(0,0,0,.15) inset;
}
.ds-avatar a {
    display: block;
    padding: 1px;
    width: 32px;
    height: 32px;
    border: 1px solid #B9BAA6;
    border-radius: 50%;
    background-color: #fff;
    -moz-transition: color 0.15s linear;
    -webkit-transition: color 0.15s linear;
    transition: color 0.15s linear;
}
a {
    text-decoration: none;
}

 

这次就先讲到这里了。要实现具体的留言板功能，记得关注哦。小编会持续更新的。最多不超过一周。小编就会更新下一节哦。

欢迎关注熊熊出没ING公众号，不定时跟新Java、python、信息安全等相关知识哦。