1.登陆注册页面前端设计
由于小编第一次写博客，加上前端知识还不够扎实，本文小编着重处理后端，及PHP连接数据库，实现添加留言，删除留言功能。话不多说，我们直接上代码。
登陆页面设计：我们将其命名为：index.php
由于小编在设计的时候把所有的css全部写在了一个文件中，所以css文件我会最后发出来。
<html>
<head>
<title>登陆</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./css/index1.css">
<style>
body{height:100%;}
</style>
</head>
<body style="background: url(./images/timg7.jpg);">
<div class="index_01">
<table style="width: 100%;height:100%;" >
<tr>
<td align="center" >
<table align="center" width=350 height=230; class="index_table" >
<form method ="POST" action = "doloadling.php" name="frmLogin">
<tr align="center" style="font-size:25px;">
<td colspan="2" style="font-size:35px;">用户登陆</td>
</tr>
<tr>
<td align="center" style="font-size:25px;">用户名</td>
<td><input type="name" maxlength="16" name="uid" placeholder="请输入账号" style="width:180px;font-size:20px;border-radius: 8px; "></td>
</tr>
<tr>
<td align="center" style="font-size:25px;">密 码</td>
<td><input name="password" type="password" maxlength="16" placeholder="请输入密码" style="width:180px;font-size:20px;border-radius: 8px; "></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="denglu" value="登陆" class="btn">
<input type="reset" name="rs" value="重置" class="btn">
<input type="button" name="zu" value="注册" onclick="window.location.href='register.php'" class="btn"/>
</td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</div>
</body>
</html> 注册页面设计：我们将其命名为：register.php
<html>
<head>
<title>注册</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./css/index1.css">
<style>
body{height:100%;}
</style>
</head>
<body style="background: url(./images/timg7.jpg)">
<div class="index_01" >
<table style="width: 100%;height:100%;" >
<tr>
<td align="center" >
<form action="doregister.php " name="dl" method="post">
<table align="center" width=350 height=230; style="font-family:宋体;font-size:25px;">
<tr align="center">
<td colspan="2" style="font-size:35px;">注册用户</td>
</tr>
<tr>
<td align="center">用户名</td>
<td>
<input type="name" maxlength="20" name="id" placeholder="手机号/邮箱" style="width:180px;font-size:20px;border-radius: 8px; ">
</td>
</tr>
<tr>
<td align="center">密 码</td>
<td >
<input name="password" type="password" maxlength="16" placeholder="请输入密码" style="width:180px;font-size:20px;border-radius: 8px; ">
</td>
</tr>
<tr>
<td align="center">Again</td>
<td>
<input name="confirmPassword" type="password" maxlength="16" placeholder="请再次输入密码" style="width:180px;font-size:20px;border-radius: 8px; ">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name='zu' value='登陆' onclick="location.href='index.php'" style="font-size:17px;border-radius: 12px;" class="btn"/>
<input type="reset" name="zu" value="重置" style="font-size:17px;border-radius: 12px;" class="btn">
<input type="submit" name="zu" value="注册" style="font-size:17px;border-radius:12px;" class="btn"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
</body>
<html>
这样在加上我最后发出来的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;
}
这次就先讲到这里了。要实现具体的留言板功能，记得关注哦。小编会持续更新的。最多不超过一周。小编就会更新下一节哦。