課程要點：
應老友要求制作了此次教程，希望能給他帶來幫助！也希望給有需要入坑的朋友提供點“動力”（其實沒那么難）。
本教程適合PHP入門學習的同學；
這里用面向過程開發，容易理解；面向過程是一種基礎的命令式編程，初學者比較容易掌握，這里不再闡述其他概念性的東西；
下面是本課所涉及到的也是需要掌握的技術點：
DIV+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/
教程安排：
分成三步驟完成講解，由淺入深。
- 步驟一：頁面設計DIV+CSS
- 步驟二：功能實現PHP+MYSQL
- 步驟三：代碼優化
今天主要講解步驟一。
相信一開始拿到設計稿的時候，如果是自己做過的東西，會很快進入狀態直接敲代碼，但要是遇到生疏的版面，或者比較復雜的設計稿的時候，會手忙腳亂，不知道如何下手。嗯，是這樣的，因為剛開始我也是這樣過來的。
接下來說說我的方法：
-
1、開始搭建腳手架
a、顧名思義，跟我們見到的建房子一樣起初的基礎框架，灌注混凝土，再慢慢砌磚而成。寫DIV+CSS也一樣，先根據設計稿設計基礎框架，分清楚它是上下左右結構，再框架里面細分板塊，當然搭建的時候順便每個div標簽定義一個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插件等。
感覺話說多了，我們直接開始擼吧！
代碼區：
DIV+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.開始搭建腳手架 -->
<div class="container_box">
<div class="up">
<h3 class="title">留言板</h3>
<h5 class="subtitle">FEEDBACK</h5>
</div>
<div class="down">
<form action="" method="post">
<div class="input">
<input type="text" class="fl" name="name" placeholder="輸入您的姓名" />
<input type="text" class="fr" name="tel" placeholder="輸入您的聯系方式" />
</div>
<textarea class="content" cols="30" rows="10" name="nr"></textarea>
<input type="submit" value="提交您的留言" class="sub" />
</form>
</div>
</div>
</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.開始搭建腳手架 -->
<div class="container_box">
<div class="up">
<h3 class="title">留言板</h3>
<h5 class="subtitle">LIST</h5>
</div>
<div 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>
</div>
</div>
</body>
</html
至此步驟一DIV+CSS頁面設計就完成了。
實踐，實踐，實踐！重要的事情說三遍。
如有錯誤或者不明白的地方，不要吝嗇評論區哦，歡迎涂鴉！~
