1.body部分效果展示（不包括footer）

b40aca5805b885115384a1cf56731b08.png

3dafa1e9b303cd38de0c4b9fdec1946a.jpeg

2、代码

2.1 leaving.php（看到的网页）

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>留言板</title>  
    <link rel="stylesheet" href="leaving_styles.css">  
</head>  
<body>  
    <header >  
        <h1>…………</h1>  
    </header> 
    
  <div class="le">
    <h2>留言板</h2>  
    <div class="in">
    <form action="post_message.php" method="post">  
        <textarea name="message" rows="5"  placeholder="输入你的留言..."></textarea> 
        <br>
        <input class="in" type="submit" value="提交">  
    </form> 
    </div>
    
    <table> 
        <tr><td>
        <div id="message-container" >  
        <?php include 'display_messages.php'; ?>  
        </div>
        </td></tr>
    </table>
  </div>
    <footer>  
        <p>留言板 &copy; 2024 草海桐</p>  
    </footer>  
</body>  
</html>

2.2 leaving_styles.css

body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0; 
    justify-content: center;  
    align-items: center;  
    background-color: rgba(224, 255, 255, 1);
}  
  
header {  
    width: 100%;
    height: 200px;
    background-image: url('.jpg');  
    background-size: cover; 
    background-position: center; 
    text-align: center;
    margin: auto;
} 

h1{

}

h2{
    display: flex;
    justify-content: center; 
    padding: 0;
    margin: 0;
}

/*.le{
    margin: 0; 
    padding: 20px; 
    text-align: center;
    align-items: center;
    background-color: rgba(224, 255, 255, 1);    
}*/
.le{
    width: auto;
    top: 200px;
    bottom: 0;
    left: 0;
    text-align: center;
    align-items: center;
    margin: 0;
    padding: 10px;
    background-size:cover;
    position: absolute;
    right: 0;
}   
.in{
    justify-content: center;
}
textarea{
    width: 65%;
}


form{
    text-align: center;
    padding: 10px; 
    align-items: center;
}
table{
    border-collapse: collapse; 
    align-items: center;
    text-align: center;
    bottom: 0;
} 
tr{
    align-items: center;
    text-align: center;
}
td{
    text-align:center ;
    align-items: center;
}
#message-container{  
    text-align: center;
    align-items: center;
    max-height: 350px;
    overflow-y: auto; 
    padding: 0;
    border: 2px solid black; 
    background-color: rgba(255, 255, 255, 1);  
}

@media screen and (max-width: 400px) {  
    #message-container{  
    align-items: center;
    text-align: center;
    max-height: 220px;
    width: auto;
    overflow-y: auto; 
    padding: 0;
    border: 2px solid black; 
    background-color: rgba(255, 255, 255, 1);  
    }
}

footer {  
    background-color: #333;  
    color: #fff;  
    text-align: center;  
    position: fixed;  
    left: 0;  
    bottom: 0;  
    width: 100%;  
}

2.3 post_massage.php

<?php  
$servername = "localhost"; 
$username = "";//用户名
$password = "";//密码
$dbname = "";//数据库名称
  
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql_create_table = "CREATE TABLE IF NOT EXISTS messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)";

if ($conn->query($sql_create_table) === FALSE) {
    echo "创建表时发生错误: " . $conn->error;
} else {
    echo "表已成功创建或已存在。";
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $message = $conn->real_escape_string($_POST['message']);

    $sql_insert = "INSERT INTO messages (content) VALUES ('$message')";

    // 执行插入操作
    if ($conn->query($sql_insert) === TRUE) {
        echo "留言成功添加！";
        header("Location: leaving.php");
        exit();
    } else {
        echo "Error: " . $sql_insert . "<br>" . $conn->error;
    }
}

$conn->close();
?>

2.4 display_massages.php

<?php  
$servername = "localhost";  
$username = "";//用户名  
$password = "";//密码
$dbname = "";//数据库名称

$conn = new mysqli($servername, $username, $password, $dbname);  
  
if ($conn->connect_error) {  
    die("连接失败: " . $conn->connect_error);  
}  
  
$sql = "SELECT * FROM messages ORDER BY timestamp DESC";  
$result = $conn->query($sql);  
  
if ($result->num_rows > 0) {  
    while ($row = $result->fetch_assoc()) {  
        echo "<p>提交时间：" . $row["timestamp"]  . "<br>". nl2br($row["content"])."<hr></p>";  
    }  
} else {  
    echo "目前还没有留言。";  
}  

$conn->close();  
?>

# html # css # php
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

cover

大厂揭秘：腾讯健康的40%代码居然是由AI来自动写的

avatar 腾讯云开发者社区
cover

腾讯云轻量服务器Lighthouse的前世今生

avatar 腾讯云开发者社区
cover

腾讯云携手行业专家走进中顺洁柔，共探渠道数字化与AI创新未来

avatar 腾讯云开发者社区