搜尋
首頁後端開發PHP7PHP7留言板開發的準備
PHP7留言板開發的準備Dec 24, 2020 am 09:19 AM
php7

PHP7教學欄位介紹準備的留言板開發

PHP7留言板開發的準備

#推薦(免費):PHP7
課程重點:

應老友要求製作了此次教程,希望能為他帶來幫助!也希望提供有需要入坑的朋友點「動力」(其實沒那麼難)。
本教程適合PHP入門學習的同學;
這裡用面向過程開發,容易理解;面向過程是一種基礎的命令式編程,初學者比較容易掌握,這裡不再闡述其他概念性的東西;
以下是本課所涉及到的也是需要掌握的技術點:
p CSS,PHP MYSQL

頁面效果:

PHP7留言板開發的準備

留言板首頁

PHP7留言板開發的準備

留言板清單頁

#開發工具:
  • 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(首頁):

nbsp;html>

    
        <meta>
        <title>留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link>
    
    
        <!-- 工作区,呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p>
            </p><p>
                </p><h3 id="留言板">留言板</h3>
                <h5 id="FEEDBACK">FEEDBACK</h5>
            
            <p>
                </p>
                    

                                                                       

                                                          
                          

HTML(列表):

nbsp;html>

    
        <meta>
        <title>列表_留言板_科科分享</title>
        <!-- 2.新建css样式文件并根据效果图编写css代码 -->
        <link>
    
    
        <!-- 工作区,呈现给用户看的 -->
        <!-- 1.开始搭建脚手架 -->
        <p>
            </p><p>
                </p><h3 id="留言板">留言板</h3>
                <h5 id="LIST">LIST</h5>
            
            <p>
                </p>
                        
  • 姓名:xxx 联系方式:13800013800 内容:xxxxxxxxxxx
  •                     
  • 姓名:xxx 联系方式:13800013800 内容:xxxxxxxxxxx
  •                     
  • 姓名:xxx 联系方式:13800013800 内容:xxxxxxxxxxx
  •                     
  • 姓名:xxx 联系方式:13800013800 内容:xxxxxxxxxxx
  •                     
  • 姓名:xxx 联系方式:13800013800 内容:xxxxxxxxxxx
  •                     
  • 姓名:xxx 联系方式:13800013800 内容:xxxxxxxxxxx
  •                 
                          

至此步驟一p CSS頁面設計就完成了。

實踐,實踐,實踐!重要的事情說三遍。

如有錯誤或不明白的地方,不要吝嗇評論區哦,歡迎塗鴉! ~

以上是PHP7留言板開發的準備的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:简书。如有侵權,請聯絡admin@php.cn刪除
php7检测tcp端口不好用怎么解决php7检测tcp端口不好用怎么解决Mar 22, 2023 am 09:30 AM

在php5中,我们可以使用fsockopen()函数来检测TCP端口。这个函数可以用来打开一个网络连接和进行一些网络通信。但是在php7中,fsockopen()函数可能会遇到一些问题,例如无法打开端口、无法连接到服务器等。为了解决这个问题,我们可以使用socket_create()函数和socket_connect()函数来检测TCP端口。

php7.0怎么安装mongo扩展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安装了插件还是显示未安装怎么办php7.0安装了插件还是显示未安装怎么办Apr 02, 2024 pm 07:39 PM

解决 PHP 7.0 中插件未显示已安装问题的方法:检查插件配置并启用插件。重新启动 PHP 以应用配置更改。检查插件文件权限,确保其正确。安装丢失的依赖项,以确保插件正常运行。如果其他步骤均失败,则重建 PHP。其他可能原因包括插件版本不兼容、加载错误版本或 PHP 配置问题。

php8和php7哪个好php8和php7哪个好Nov 16, 2023 pm 03:09 PM

PHP8相较于PHP7在性能、新特性和语法改进、类型系统、错误处理和扩展等方面都有一些优势和改进。然而,选择使用哪个版本要根据具体的需求和项目情况来决定。详细介绍:1、性能提升,PHP8引入了Just-in-Time(JIT)编译器,可以提高代码的执行速度;2、新特性和语法改进,PHP8支持命名参数和可选参数的声明,使得函数调用更加灵活;引入了匿名类、属性的类型声明等等。

PHP 服务器环境常见问题指南:快速解决常见难题PHP 服务器环境常见问题指南:快速解决常见难题Apr 09, 2024 pm 01:33 PM

PHP服务器环境常见的解决方法包括:确保已安装正确的PHP版本和已复制相关文件到模块目录。临时或永久禁用SELinux。检查并配置PHP.ini,确保已添加必要的扩展和进行正确设置。启动或重启PHP-FPM服务。检查DNS设置是否存在解析问题。

php7.0怎么安装部署php7.0怎么安装部署Nov 30, 2022 am 09:56 AM

php7.0安装部署的方法:1、到PHP官网下载与本机系统对应的安装版本;2、将下载的zip文件解压到指定目录;3、打开命令行窗口,在“E:\php7”目录下运行“php -v”命令即可。

php7怎么下载与安装(教程分享)php7怎么下载与安装(教程分享)Mar 23, 2023 pm 02:11 PM

随着互联网技术的发展,计算机编程语言也随之不断发展和更新。PHP作为一种广泛应用于Web开发领域的编程语言,在多年的发展中经历了多个版本的更新,而最新版的PHP7又在性能和稳定性上有了巨大提升。为了能更好地应用PHP编程语言,这篇文章将介绍PHP7的下载和安装教程,供初学者参考。

php7和php5语法有什么区别php7和php5语法有什么区别Jul 10, 2023 pm 03:25 PM

php7和php5语法区别有:1、PHP7引入了严格的类型声明,而PHP5变量的类型是隐式的;2、PHP7引入了对标量类型声明的支持,而PHP5并没有;3、PHP7引入了NULL合并运算符,而PHP5检查一个变量是否存在并且不为null,需要使用条件语句;4、PHP7添加了新的比较运算符“<=>”,而PHP5并没有;5、PHP7引入新特性匿名类,而PHP5并没有。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!