php美化版留言板源码

久伴

452
文章

493
评论

2020年2月7日23:43:02 评论 64 2602字阅读8分40秒

留言板截图

留言板在线演示

在线演示

留言板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 '连接失败';
        }
    }
}?>