PHP7留言板开发的准备
PHP7教程栏目介绍准备的留言板开发
推荐（免费）：PHP7
课程要点：
应老友要求制作了此次教程，希望能给他带来帮助！也希望给有需要入坑的朋友提供点“动力”（其实没那么难）。
本教程适合PHP入门学习的同学；
这里用面向过程开发，容易理解；面向过程是一种基础的命令式编程，初学者比较容易掌握，这里不再阐述其他概念性的东西；
下面是本课所涉及到的也是需要掌握的技术点：
p+CSS，PHP+MYSQL
页面效果：
留言板首页
留言板列表页
开发工具：
- XAMPP3.2.2（php7.1.8/MariaDB10.1.26）
官网https://www.apachefriends.org/zh_cn/download.html - visual studio code（简称vs code）
官网https://visualstudio.microsoft.com/zh-hans/downloads/
教程安排：
分成三步骤完成讲解，由浅入深。
- 步骤一：页面设计p+CSS
- 步骤二：功能实现PHP+MYSQL
- 步骤三：代码优化
今天主要讲解步骤一。
相信一开始拿到设计稿的时候，如果是自己做过的东西，会很快进入状态直接敲代码，但要是遇到生疏的版面，或者比较复杂的设计稿的时候，会手忙脚乱，不知道如何下手。嗯，是这样的，因为刚开始我也是这样过来的。
接下来说说我的方法：
-
1、开始搭建脚手架
a、顾名思义，跟我们见到的建房子一样起初的基础框架，灌注混凝土，再慢慢砌砖而成。写p+CSS也一样，先根据设计稿设计基础框架，分清楚它是上下左右结构，再框架里面细分板块，当然搭建的时候顺便每个p标签定义一个class，这样码css样式代码的时候能很快定位到指定位置，提高效率。
b、如我们现在写的留言板，先一个.container_box容器（圈地），再分.up、.down上下结构（好吧，就说两层楼吧），最后再每一层设计详细内容，当然也可以在每一层再重复这个操作（细分结构）； -
2、新建css样式文件并根据效果图编写css代码
a、直接撸(看)css代码吧，
注意的是css文件需要在HTML页面引用<link rel="stylesheet" href="feedback.css"> -
3、最后的细节调整
a、给按钮添加鼠标事件
:hover
b、处理内容模块之间添加行距间距，让整个页面看起来内容清楚分明line-height
c、当然也可以加入一些css3的动画效果，不是这里的重点就不写了。想深入的同学可以自行学习，做为PHP开发人员，如果能完成上面两点已经足够了。
是不是思路清晰很多了，后面就尽情的发挥自己的聪明才智，页面设计的比设计稿还要好，漂亮。这种成就感不亲自体验一下是感受不到的。
这套设计思路其实在其他前端项目的设计也是适用的，如设计页面、开发jquery插件等。
感觉话说多了，我们直接开始撸吧！
代码区：
p+CSS页面设计
要点：Form表单（要用的标签有input textarea）
下面是完成后的HTML代码：
CSS（feedback.css）：
*{margin:0;padding:0;}
body{font-family: "微软雅黑", "Microsoft Yahei"; font-size: 12px;}
.container_box{width: 100%;max-width: 1170px;margin: 0 auto;text-align: center;}
a{color: #333;}
a:hover{color: #999;}
.fr{float: right}
.fl{float: left}
.container_box .up{padding: 20px 0;}
.container_box .up .title{font-size: 20px;}
.container_box .up .subtitle{color:#f00;margin-bottom: 10px;}
.container_box .down{margin: 0 auto;text-align: center;width: 50%;}
.container_box .down .input{margin-bottom: 10px;overflow: hidden;}
.container_box .down .input input{width: 46%;line-height: 30px;padding:4px;}
.container_box .down .content{width: 98%;display: block;margin-bottom: 10px;padding:4px;}
.container_box .down .sub{width: 100%;display: block;height: 35px;background-color: #63637f;color:#fff;border: 0;cursor: pointer;}
/* 鼠标移到按钮上去更换背景色 */
.container_box .down .sub:hover{background-color: #75849c;}
/* 列表 */
.list ul{padding: 20px 0;width: 100%;margin: 0 auto;text-align: left;}
.list ul li{line-height: 30px;color: #666;}HTML（首页）：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>留言板_科科分享</title> <!-- 2.新建css样式文件并根据效果图编写css代码 --> <link rel="stylesheet" href="feedback.css"> </head> <body> <!-- 工作区，呈现给用户看的 --> <!-- 1.开始搭建脚手架 --> <p class="container_box"> <p class="up"> <h3 class="title">留言板</h3> <h5 class="subtitle">FEEDBACK</h5> </p> <p class="down"> <form action="" method="post"> <p class="input"> <input type="text" class="fl" name="name" placeholder="输入您的姓名" /> <input type="text" class="fr" name="tel" placeholder="输入您的联系方式" /> </p> <textarea class="content" cols="30" rows="10" name="nr"></textarea> <input type="submit" value="提交您的留言" class="sub" /> </form> </p> </p> </body> </html
HTML（列表）：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>列表_留言板_科科分享</title> <!-- 2.新建css样式文件并根据效果图编写css代码 --> <link rel="stylesheet" href="feedback.css"> </head> <body> <!-- 工作区，呈现给用户看的 --> <!-- 1.开始搭建脚手架 --> <p class="container_box"> <p class="up"> <h3 class="title">留言板</h3> <h5 class="subtitle">LIST</h5> </p> <p class="down list"> <ul> <li>姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx</li> <li>姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx</li> <li>姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx</li> <li>姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx</li> <li>姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx</li> <li>姓名：xxx 联系方式：13800013800 内容：xxxxxxxxxxx</li> </ul> </p> </p> </body> </html
至此步骤一p+CSS页面设计就完成了。
实践，实践，实践！重要的事情说三遍。
如有错误或者不明白的地方，不要吝啬评论区哦，欢迎涂鸦！~
以上是PHP7留言板开发的准备的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
php7.0怎么安装mongo扩展
Nov 21, 2022 am 10:25 AM
php7.0安装mongo扩展的方法：1、创建mongodb用户组和用户；2、下载mongodb源码包，并将源码包放到“/usr/local/src/”目录下；3、进入“src/”目录；4、解压源码包；5、创建mongodb文件目录；6、将文件复制到“mongodb/”目录；7、创建mongodb配置文件并修改配置即可。
php7.0安装了插件还是显示未安装怎么办
Apr 02, 2024 pm 07:39 PM
解决 PHP 7.0 中插件未显示已安装问题的方法：检查插件配置并启用插件。重新启动 PHP 以应用配置更改。检查插件文件权限，确保其正确。安装丢失的依赖项，以确保插件正常运行。如果其他步骤均失败，则重建 PHP。其他可能原因包括插件版本不兼容、加载错误版本或 PHP 配置问题。
php7检测tcp端口不好用怎么解决
Mar 22, 2023 am 09:30 AM
在php5中，我们可以使用fsockopen()函数来检测TCP端口。这个函数可以用来打开一个网络连接和进行一些网络通信。但是在php7中，fsockopen()函数可能会遇到一些问题，例如无法打开端口、无法连接到服务器等。为了解决这个问题，我们可以使用socket_create()函数和socket_connect()函数来检测TCP端口。
PHP 服务器环境常见问题指南：快速解决常见难题
Apr 09, 2024 pm 01:33 PM
PHP服务器环境常见的解决方法包括：确保已安装正确的PHP版本和已复制相关文件到模块目录。临时或永久禁用SELinux。检查并配置PHP.ini，确保已添加必要的扩展和进行正确设置。启动或重启PHP-FPM服务。检查DNS设置是否存在解析问题。
php7.0怎么安装部署
Nov 30, 2022 am 09:56 AM
php7.0安装部署的方法：1、到PHP官网下载与本机系统对应的安装版本；2、将下载的zip文件解压到指定目录；3、打开命令行窗口，在“E:\php7”目录下运行“php -v”命令即可。
如何在系统重启后自动设置unixsocket的权限？
Mar 31, 2025 pm 11:54 PM
如何在系统重启后自动设置unixsocket的权限每次系统重启后，我们都需要执行以下命令来修改unixsocket的权限：sudo...
在Docker环境中使用PECL安装扩展时为什么会报错？如何解决？
Apr 01, 2025 pm 03:06 PM
在Docker环境中使用PECL安装扩展时报错的原因及解决方法在使用Docker环境时，我们常常会遇到一些令人头疼的问�...
php8和php7哪个好
Nov 16, 2023 pm 03:09 PM
PHP8相较于PHP7在性能、新特性和语法改进、类型系统、错误处理和扩展等方面都有一些优势和改进。然而，选择使用哪个版本要根据具体的需求和项目情况来决定。详细介绍：1、性能提升，PHP8引入了Just-in-Time(JIT)编译器，可以提高代码的执行速度；2、新特性和语法改进，PHP8支持命名参数和可选参数的声明，使得函数调用更加灵活;引入了匿名类、属性的类型声明等等。
