留言板截图
留言板在线演示
[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 '连接失败'; } } }?>
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论
