当前位置： 首页 > news >正文

HTML+CSS+PHP实现网页留言板功能（需要创建数据库）

news 2025/10/15 0:17:02

话说前头，我这方面很菜滴。这是我网页作业的一部分。

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

e7763df6b58149fb89f51fbcb00400ad.png

8d8e22dfce9847448c6ddc8dca1f69d6.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);  
}  $message = $conn->real_escape_string($_POST['message']);  $sql = "INSERT INTO messages (content) VALUES ('$message')";  
if ($conn->query($sql) === TRUE) {  echo "留言成功添加！";  header("Location: leaving.php");exit();  
} else {  echo "Error: " . $sql . "<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实现网页留言板功能（需要创建数据库）

话说前头&#xff0c;我这方面很菜滴。这是我网页作业的一部分。 1.body部分效果展示&#xff08;不包括footer&#xff09; 2、代码 2.1 leaving.php&#xff08;看到的网页&#xff09; <!DOCTYPE html> <html lang"en"> <head> <met…...

编程日记 2024/6/20 22:43:08

【谷歌】实用的搜索技巧

1、使用正确的谷歌网址 我们知道https://www.google.com是谷歌的网址。但根据国家，用户可能会被重定向到 google.fr（法国）或google.co.in（印度）。 最主要的URL——google.com是为美国用户准备的（或是针对全世界所有用户的唯一URL）)。当你在谷歌上搜索时，了解这一点是相…...

编程日记 2024/6/20 22:42:06

打造完美启动页：关键策略与设计技巧

启动页&#xff08;Splash Screen&#xff09;设计是指在应用程序启动时&#xff0c;首先展示给用户的界面设计。这个界面通常在应用加载或初始化期间显示&#xff0c;其主要目的是为用户提供一个视觉缓冲&#xff0c;展示品牌标识&#xff0c;并减少用户在等待过程中的焦虑感。…...

编程日记 2024/6/20 22:41:05

电子书(chm)-加载JS--CS上线

免责声明: 本文仅做技术交流与学习... 目录 cs--web投递 html(js)代码 html生成chm工具--EasyCHM 1-选择powershell 模式 生成 2-选择bitsadmin模式生成 chm反编译成html cs--web投递 cs配置监听器--->攻击---->web投递---> 端口选择没占用的, URL路径到时候会在…...

编程日记 2024/6/20 22:40:04

理解HTTP请求格式

HTTP概念 HTTP全称HyperTextTransfer Protocol(超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议&#xff1b;HTTP是一个客户端&#xff08;用户&#xff09;和服务端&#xff08;网站&#xff09;之间请求和响应的标准。 HTTP 协议是以 ASCII 码传输&…...

编程日记 2024/6/20 22:37:00

差分数组汇总

本文涉及知识点 算法与数据结构汇总 差分数组 令 a[i] ∑ j : 0 i v D i f f [ i ] \sum_{j:0}^{i}vDiff[i] ∑j:0i​vDiff[i] 如果 vDiff[i1]&#xff0c;则a[i1…]全部 如果vDiff[i2]–,则a[i2…]全部–。 令11 < i2 &#xff0c;则&#xff1a; { a [ i ] 不变&…...

编程日记 2024/6/20 22:35:59

SpringBoot | 实现邮件发送

运行环境&#xff1a; IntelliJ IDEA 2022.2.5 (Ultimate Edition) (注意&#xff1a;idea必须在2021版本以上&#xff09;JDK17 项目目录&#xff1a; 该项目分为pojo,service,controller,utils四个部分&#xff0c; 在pojo层里面写实体内容&#xff08;发邮件需要的发件人邮…...

编程日记 2024/6/20 22:34:57

spring boot接入nacos 配置中心

再接入nacos配置中心时&#xff0c;需要确认几点&#xff1a; 1. spring boot 版本 (spring boot 2.x ) 2. nacos 配置中心 服务端 版本 (1.1.4) 3. nacos client 客户端版本 (1.1.4) 方式一 1. 启动 nacos 服务端&#xff0c;这里不做解释 在配置中心中加入几个配置 2. 在…...

编程日记 2024/6/20 22:31:53

产品应用 | 小盒子跑大模型！英码科技基于算能BM1684X平台实现大模型私有化部署

当前&#xff0c;在人工智能领域&#xff0c;大模型在丰富人工智能应用场景中扮演着重要的角色&#xff0c;经过不断的探索&#xff0c;大模型进入到落地的阶段。而大模型在落地过程中面临两大关键难题&#xff1a;对庞大计算资源的需求和对数据隐私与安全的考量。为应对这些挑…...

编程日记 2024/6/20 22:30:52

uniapp中u-input点击事件失效

当给u-input设置了disabled/readonly属性后&#xff0c;pc浏览器中点击事件失效&#xff0c;但是app/移动端h5中却仍有效 解决办法 给外边包上一个盒子设置点击事件&#xff0c;给input加上css属性&#xff1a;pointer-events&#xff1a;none pointer-events CSS 属性指定在什…...

编程日记 2024/6/20 22:29:50

[机器学习] 监督学习和无监督学习

监督学习和无监督学习是机器学习的两种主要方法&#xff0c;它们之间有几个关键区别&#xff1a; 1. 定义 监督学习&#xff08;Supervised Learning&#xff09;&#xff1a; 使用带标签的数据进行训练。数据集包括输入特征和对应的输出标签。目标是学习从输入特征到输出标签…...

编程日记 2024/6/20 22:28:49

使用Python进行自然语言处理：从基础到实战

使用Python进行自然语言处理：从基础到实战 自然语言处理（Natural Language Processing, NLP）是人工智能的重要领域，旨在处理和分析自然语言数据。Python凭借其丰富的库和社区支持，成为NLP的首选编程语言。本文将介绍自然语言处理的基础概念、常用的Python库以及一个实战项…...

编程日记 2024/6/20 22:27:47

Hadoop面试题总结

一 、介绍一下hadoop 综述:hadoop是一个适合海量数据的分布式存储和分布式计算的平台 分述:hadoop包含三大组件&#xff0c;分别是HDFS、MapReduce和YARN --HDFS(分布式文件系统) HDFS集群由NameNode,DataNode,SecondaryNameNode构成NameNode&#xff1a;主要负责接受用户请求…...

编程日记 2024/6/20 22:26:43

关于IntelliJ IDEA 2024.1版本更新的问题

希望文章能给到你启发和灵感&#xff5e; 感谢支持和关注&#xff5e; 阅读指南 序幕一、基础环境说明1.1 硬件环境1.2 软件环境 二、起因三、解决四、总结 序幕 近期&#xff0c;IntelliJ IDEA 推出了全新2024版本&#xff0c;相信很多编程的爱好者或者刚接触编程的小伙伴都会…...

编程日记 2024/6/20 22:23:40

双层循环和循环语句

echo 打印 echo -n 表示不换行输出 echo -e 表示输出转义字符 echo \b 相当于退格键&#xff08;backspace&#xff09; echo \n 换行&#xff0c;相当于回车 echo \f 换行&#xff0c;换行后的新行的开头连着上一行的行尾 echo \t 相当于tab健 &#xff08;…...

编程日记 2024/6/20 22:22:38

【Codesys】-计算开机通电运行时间，累计正常使用时间，故障停机时间

应客户要求&#xff0c;在程序添加了这个用来计算开机运行时间&#xff0c;原理就是取当前时间减去一开始记录的时间&#xff0c;没什么特别要求&#xff0c;记录一下使用的变量类型和数据写法&#xff0c;防止忘记了。 下文只写了一个开机通电运行时间的写法&#xff0c;累计…...

编程日记 2024/6/20 22:21:37

LINUX系统编程：线程的概念

目录 1.线程的概念 2.线程的理解 3.怎么做到划分代码的 本文主要介绍&#xff0c;在LIUNX下的线程。 1.线程的概念 在很多的书上的你可能见过这样的。 线程是进程内部的一个执行分支&#xff0c;线程是cpu调度的基本单位。 加载到内存的程序叫做进程。修正&#xff1a;进…...

编程日记 2024/6/20 22:20:35

如何更换OpenHarmony SDK API 10

OpenHarmony社区已经发布OpenHarmony SDK API 10 beta版本&#xff0c;有些 Sample案例 也有需要API10。那么如何替换使用新的OpenHarmony SDK API 10呢&#xff1f;本文做个记录。 1、如何获取OpenHarmony SDK 1.1 每日构建流水线 可以从OpenHarmony每日构建站点获取最新的…...

编程日记 2024/6/20 22:19:33

Java | Leetcode Java题解之第155题最小栈

题目&#xff1a; 题解&#xff1a; class MinStack {Deque<Integer> xStack;Deque<Integer> minStack;public MinStack() {xStack new LinkedList<Integer>();minStack new LinkedList<Integer>();minStack.push(Integer.MAX_VALUE);}public void …...

编程日记 2024/6/20 22:17:31

大润发超市购物卡怎么用？

收到大润发超市的礼品卡以后&#xff0c;我才发现&#xff0c;最近的大润发也得十来公里 为了100块的大润发打车也太不划算了 叫外送也不在配送范围内 最后没办法&#xff0c;在收卡云上出掉了&#xff0c;还好最近价格不错&#xff0c;也不亏&#xff0c;收卡云的到账速度也…...

编程日记 2024/6/20 22:16:29

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/10/8 22:40:16

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/10/11 8:25:01

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/8/5 19:18:33

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/10/1 1:55:36

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/10/1 3:58:18

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2025/9/30 1:40:08

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/9/23 1:38:13

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47