Style de page de forum développé en PHP
Le code de l'un de nos chapitres n'utilise aucun style de page. La page a l'air très désordonnée, ce qui n'est pas l'effet auquel nous nous attendions. Par conséquent, ce chapitre utilise certains styles CSS pour rendre la page plus impressionnante
<. 🎜>Astuce : Lors de l'exécution en ligne, certains styles peuvent ne pas être visibles en raison de la grande taille de l'image
<. 🎜>style CSS <style>
#left{
width: 25%;
float: left;
}
#center{
width: 42%;
float: left;
}
#right{
width: 32%;
float: left;
}
.right{
margin-left: 180px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 70px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-left: 20px;
cursor: pointer;
}
form{
font-size: 17px;
}
button{
background-color: rgba(249, 247, 255, 0);
border: none;
font-size: 16px;
color: #551a8b;
cursor: pointer;
}
a{
text-decoration:none;
}
table{
width: 550px;
height: 100px;
}
</style>
Nous utilisons l'effet afficher-masquer dans
jQuery sur la page de publication du message. Lorsque nous cliquons pour publier le message, le message apparaît. page que nous avons utilisée pour publier le message sera affiché. Sortez, le code jQuery est le suivant
Remarque : Pour utiliser l'effet d'affichage de jQuery, vous devez charger la bibliothèque jQuery, et vous devez mettre le morceau de code suivant dans la tête
<script src="http://libs.baidu.com/jquery/ 1.10.2/jquery.min.js"></script><script>
$(document).ready(function(){
$("button").click(function(){
$("form").toggle();
});
});
</script>JS
Nous devons vérifier les messages nous publions. Si le nom et le message ne sont pas renseignés, nous ne sommes pas autorisés à les publier. Ils doivent recevoir des informations rapides, le code est le suivant<script>
function foo(){
if(myform.name.value=="")
{
alert("请输入你的姓名");
myform.name.focus();
return false;
}
if (myform.content.value=="")
{
alert("留言内容不能为空");
myform.content.focus();
return false;
}
if(myform.vcode.value==""){
alert('验证码不能为空');
myform.vcode.focus();
return false;
}
}
</script>
Code de mise en page complet <?php
session_start();
header("content-type:text/html;charset=utf-8");
$page=isset($_GET['page']) ?$_GET['page'] :1 ;//接收页码
$page=!empty($page) ? $page :1;
$conn=mysqli_connect("localhost","root","root","Ressage");
mysqli_set_charset($conn,'utf8'); //设定字符集
$table_name="ressage_user";//查取表名设置
$perpage=5;//每页显示的数据个数
//最大页数和总记录数
$total_sql="select count(*) from $table_name";
$total_result =mysqli_query($conn,$total_sql);
$total_row=mysqli_fetch_row($total_result);
$total = $total_row[0];//获取最大页码数
$total_page = ceil($total/$perpage);//向上整数
//临界点
$page=$page>$total_page ? $total_page:$page;//当下一页数大于最大页数时的情况
//分页设置初始化
$start=($page-1)*$perpage;
$sql= "select * from ressage_user order by id desc limit $start ,$perpage";
$result=mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<style>
.right{
margin-left: 140px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 70px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-left: 20px;
cursor: pointer;
}
form{
font-size: 17px;
}
button{
background-color: rgba(249, 247, 255, 0);
border: none;
font-size: 16px;
color: #551a8b;
cursor: pointer;
}
a{
text-decoration:none;
}
table{
width: 360px;
height: 100px;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("form").toggle();
});
});
function foo(){
if(myform.name.value=="")
{
alert("请输入你的姓名");
myform.name.focus();
return false;
}
if (myform.content.value=="")
{
alert("留言内容不能为空");
myform.content.focus();
return false;
}
if(myform.vcode.value==""){
alert('验证码不能为空');
myform.vcode.focus();
return false;
}
}
</script>
</head>
<body>
<div id="left">
<img src="https://img.php.cn/upload/image/460/147/285/1477727203382106.jpg" width="370px">
</div>
<div id="center">
<h1>留言内容</h1>
<p>
<?
if($result==null){
echo"暂时没有留言";
} ?>
</p>
<?php
while($row=mysqli_fetch_array($result)){
?>
<table border="1" cellspacing="0">
<tr>
<td>姓名：<?php echo $row['name']?></td>
<td style="text-align: center">留言时间:<?php echo $row['ressage_time']?></td>
<td><a href="ressage_delete.php?id=<?php echo $row['id']?>" >删除</a> </td>
</tr>
<tr>
<td colspan="3">你的留言:<?php echo $row['content']?></td>
</tr>
</table>
<?php
}?>
<div id="baner" style="margin-top: 20px">
<a href="<?php
echo "$_SERVER[PHP_SELF]?page=1"
?>">首页</a>
<a href="<?php
echo "$_SERVER[PHP_SELF]?page=".($page-1)
?>">上一页</a>
<!-- 显示123456等页码按钮-->
<?php
for($i=1;$i<=$total_page;$i++){
if($i==$page){//当前页为显示页时加背景颜色
echo "<a style='padding: 5px 5px;background: #000;color: #FFF' href='$_SERVER[PHP_SELF]?page=$i'>$i</a>";
}else{
echo "<a style='padding: 5px 5px' href='$_SERVER[PHP_SELF]?page=$i'>$i</a>";
}
}
?>
<a href="<?php
echo "$_SERVER[PHP_SELF]?page=".($page+1)
?>">下一页</a>
<a href="<?php
echo "$_SERVER[PHP_SELF]?page={$total_page}"
?>">末页</a>
<span>共<?php echo $total?>条</span>
</div>
</div>
<div id="right" >
<h2>留言板</h2>
<div > <a href="">首页</a> | <button>留言</button> <a href="" class="right">管理员登录</a>
<form method="post" action="ressage_post.php" style="display:none;" onsubmit="return foo();" name="myform" ">
<div class="form">
<p>
姓名：<input type="text" name="name">
</p>
<p>
邮箱：<input type="email" name="email">
</p>
<p>
留言内容：<br/>
<textarea cols="30" rows="7" name="content"></textarea>
</p>
<p>
验证码：<input type="text" name="vcode"><img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand">
</p>
<p>
<button class="button">提交留言</button>
</p>
</div>
</form>
</div>
</body>
</html>De cette façon, notre mise en page est prête . L'étape suivante consiste à publier un message et à insérer les données dans la base de données
.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
