留言板截图
留言板在线演示
[link href=https://jiubx.com/demo/liuyanban/index.php]在线演示[/link]
留言板Css样式
*{
margin: 0;
padding: 0;
border: none;
}
header {
width: 100%;
height: 300px;
background-image: url("https://rizhuti.com/wp-content/uploads/2019/07/5048d2137920ee7.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
header .jb {
width: 1100px;
margin: 0 auto;
}
header .jb .logo {
padding-top: 60px;
text-align: center;
}
header .jb .logo img {
width: 80px;
height: 80px;
border-radius: 50%;
}
header .jb .qm {
color: #fff;
text-align: center;
padding-top: 30px;
}
section {
width: 100%;
}
section .ly {
width: 800px;
margin: 30px auto 0;
}
section .ly span {
display: inline-block;
}
section .ly span:nth-child(1) {
color: #000;
font-weight: bold;
font-size: 18px;
}
section .ly span:nth-child(2) {
width: 800px;
color: #ccc;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lyb-sec {
width: 100%;
margin-top: 30px;
}
.lyb-sec .lyb {
width: 877px;
margin: 0 auto;
}
.lyb-sec .lyb textarea {
border: 1px solid #ccc;
}
.lyb-sec .lyb input {
border: 1px solid #ccc;
}
.lyb-sec .lyb .inputa {
float: left;
width: 300px;
height: auto;
}
.lyb-sec .lyb .inputa input {
height: 19px;
}
.lyb-sec .lyb .inputb{
float: right;
width: 200px;
height: auto;
text-align: right;
}
.lyb-sec .lyb .inputb input {
width: 160px;
height: 30px;
border-radius: 6px;
background: #1E6BD2;
color: #fff;
}
留言板源码
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>留言面板</title>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="jb">
<div class="logo">
<img src="https://jiubx.com/wp-content/uploads/2020/02/%E4%B9%85%E4%BC%B4_avatar_1580716534-96x96.jpg" alt="">
</div>
<div class="qm">
<span>这是留言板，大家踊跃留言啊~</span>
</div>
</div>
</header>
<section>
<?php
//数据库链接~
$con=mysqli_connect("数据库链接地址","数据库名","数据库密码","数据库");
if ($con)
{
$sql="select * from liuyanban";
$res=mysqli_query($con,$sql);
while($arr=mysqli_fetch_array($res)){
echo '<div class="ly">';
echo "<span>$arr[1]说</span>";
echo "<span>$arr[2]</span>";
echo'</div>';
}
}
else{
echo '连接失败';
}?>
</section>
<section class="lyb-sec">
<div class="lyb">
<form action="" method="post">
<textarea name="jcent" id="" cols="120" rows="7"placeholder="输入文字~"></textarea>
<div class="inputa">
姓名：<input type="text" name="jname">
</div>
<div class="inputb">
<input type="submit" name="submit" value="提交">
</div>
</form>
</div>
</section>
</body>
</html>
<?php
//数据库链接~
$con=mysqli_connect("数据库链接地址","数据库名","数据库密码","数据库");
$jname=$_POST['jname'];
$jcent=$_POST['jcent'];
if (isset($_POST['submit'])){
if($jname==null){
echo '<script>alert("输入不能为空");</script>';
}
else
{
if ($con)
{
$sql="insert into liuyanban values(null,'$jname','$jcent')";
$res=mysqli_query($con,$sql);
if($res){
echo '留言成功';
echo "<script language=\"javascript\">location.href='index.php';</script>";
}
else{
echo '留言失败';
}
}
else{
echo '连接失败';
}
}
}?>
