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

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

news 文章来源：https://blog.csdn.net/aw2371/article/details/139785644 2024/10/23 14:32:01

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

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

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实现网页留言板功能（需要创建数据库）

话说前头，我这方面很菜滴。这是我网页作业的一部分。 1.body部分效果展示（不包括footer） 2、代码 2.1 leaving.php（看到的网页） <!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

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

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

编程日记 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(超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议；HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准。 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:0ivDiff[i] 如果 vDiff[i1]，则a[i1…]全部如果vDiff[i2]–,则a[i2…]全部–。令11 < i2 ，则： { a [ i ] 不变&…...

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

SpringBoot | 实现邮件发送

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

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

spring boot接入nacos 配置中心

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

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

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

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

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

uniapp中u-input点击事件失效

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

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

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

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

编程日记 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包含三大组件，分别是HDFS、MapReduce和YARN --HDFS(分布式文件系统) HDFS集群由NameNode,DataNode,SecondaryNameNode构成NameNode：主要负责接受用户请求…...

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

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

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

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

双层循环和循环语句

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

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

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

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

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

LINUX系统编程：线程的概念

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

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

如何更换OpenHarmony SDK API 10

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

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

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

题目： 题解： 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

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

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

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

【ai】tx2-nx：搭配torch的torchvision

微雪的教程pytorch_version 1.10.0 官方教程安装torch官方教程依赖项 nvidia@tx2-nx:~/twork/03_yolov5$ $ sudo apt-get install libjpeg-dev zlib1g-dev lib...

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

深入浅出MyBatis：全面解析与实战指南

MyBatis 是一个优秀的持久层框架，它简化了 Java 应用与关系数据库之间的映射。对于大多数 Java 开发者而言，掌握 MyBatis 是必不可少的一部分。本文将详细介绍 MyBatis 的各个方面，包括其基本原理、配置、操作、动态 SQL、插件机制和高级应用…...

编程日记 2024/6/20 22:12:24

好用的linux一键换源脚本

最近发现一个好用的linux一键换源脚本，记录一下官方链接大陆使用 bash <(curl -sSL https://linuxmirrors.cn/main.sh)# github地址 bash <(curl -sSL https://raw.githubusercontent.com/SuperManito/LinuxMirrors/main/ChangeMirrors.sh) # gitee地址 …...

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

机器人----控制方式

位置控制点位控制点到点--PTP 只关心起点和目标点，不关心走过的轨迹。连续轨迹控制 CP(continus path) eg：焊接，切割。力控制使用多大的力进行控制。 eg:用多大的力写字。...

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

json的特点

JJSON是一种轻量级的数据交换格式，它基于JavaScript编程语言的一个子集，采用完全独立于语言的文本格式，结构化程度高。 JSON的主要特点包括： 轻量级：JSON的格式紧凑，易于传输和解析。结构化：…...

编程日记 2024/6/20 22:07:18

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 连续字母长度(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ，一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 ｜ 编程一对一辅导 👏 感谢大家的订阅➕ 和喜欢💗 &#x1f…...

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

18 Shell编程规范与变量

目录 18.1 Shell脚本概述 18.1.1 Shell的作用 18.1.2 编写第一个Shell脚本 18.1.3 重定向与管道操作 18.2 Shell变量的作用、类型 18.2.1 自定义变量 18.2.2 特殊的Shell变量 18.1 Shell脚本概述可以批量处理、自动化地完成一系列维护任务，大大减轻管理员的负担。…...

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

Linux基础命令大全（详解版）

Linux基础命令（详解版） 文章目录 Linux基础命令（详解版）1.Linux的目录结构**2.Linux路径的描述方式**3.Linux命令基础格式4.ls命令隐藏文件、文件夹5.pwd命令6.cd命令特殊路径符7.mkdir命令文件操作命令8.touch命令9.cat命令10…...

编程日记 2024/6/20 22:03:12

python列表常见去重方法

列表去重在python实际运用中，十分常见，也是最基础的重点知识。 1. 使用for循环实现列表去重此方法去重后，原顺序保持不变。 # for循环实现列表去重 list1 [a, 4, 6, 4, b, hello, hello, world, 9, 9, 4, a] list2 [] for l1 in list1:…...

编程日记 2024/6/20 22:02:10

usb摄像头应用编程

作者简介： 一个平凡而乐于分享的小比特，中南民族大学通信工程专业研究生在读，研究方向无线联邦学习擅长领域：驱动开发，嵌入式软件开发，BSP开发作者主页：一个平凡而乐于分享的小比特的个人主页…...

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

怎么使用免费的wordpress/为什么打开网址都是站长工具

在Centos中yum安装和卸载软件的使用方法安装方法安装一个软件时yum -y install httpd安装多个相类似的软件时yum -y install httpd*安装多个非类似软件时yum -y install httpd php php-gd mysql 卸载一个软件时yum -y remove httpd卸载多个相类似的软件时yum -y remove httpd*卸…...

编程日记 2024/10/23 14:26:21

普洱建设单位网站/nba最新交易汇总实时更新

导读： 最近想在linux下面找一款文件比较的工具。在这里找到了下面几款免费的文件比较工具： P4WinMerge - Perforce Visual Merge for Windows ExamDiff xdelta Java xdelta GNU Diff Utilities WinMerge xxdiff KDiff3 CSDiff 因为在windows下面习惯了Ul…...

编程日记 2024/10/23 13:43:57

手机网站关闭窗口代码/新媒体营销策略有哪些

今天做类型转换将String转为Integer类型是报出异常： 代码： String a "12345678910" //11位 Integer b Integer.valueOf(a) //转换格式原因： Integer在32位的编译环境下，存储长度为32位。即-231~231-1; 即-2,…...

编程日记 2024/10/23 12:00:55

中国十大新闻网站排名/发帖子的网站

前几天，在技术交流会上，八期师哥提到了存储过程和触发器的区别和联系，原来我只知道，触发器时存储过程的一种，在机房收费系统个人版中也用到了存储过程和触发器，自己却没有深究，只道是自己会用就…...

编程日记 2024/10/23 10:19:39

wordpress后台卡顿/宁波seo优化公司

一压缩方式 IoTDB允许在创建一个时间序列的时候指定该列的压缩方式。 UNCOMPRESSED（不压缩）SNAPPY压缩LZ4压缩GZIP压压缩方式（SNAPPY）针对二进制流进行压缩，因此压缩方式的使用不再受数据类型的限制。二编码方式…...

编程日记 2024/10/23 9:06:49

wordpress添加文件2m/深圳正规seo

replaceAll() 方法使用给定的参数 replacement 替换字符串所有匹配给定的正则表达式的子字符串。语法public String replaceAll(String regex, String replacement)参数regex -- 匹配此字符串的正则表达式。newChar -- 用来替换每个匹配项的字符串。返回值成功则返回替换的字符…...

编程日记 2024/10/23 5:16:01