php真的挺好玩的！
先写出前台页面index.php：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 label{ 8 width: 60px; 9 display: inline-block; 10 text-align: right; 11 margin: 0 10px 0 0; 12 } 13 @media screen and (min-width: 360px) and (max-width: 767px) { 14 .content-div{ 15 width: 90%; 16 margin: 5% auto; 17 } 18 .form-ele{ 19 width: 50%; 20 margin: auto; 21 } 22 .content-div h2.head-title{ 23 text-align: center; 24 } 25 .form-ele p input[type="text"]{ 26 width: 80%; 27 } 28 .f-messages{ 29 width: 80%; 30 resize: none; 31 height: 100px; 32 padding: 10px; 33 box-sizing: border-box; 34 } 35 .submit-btn{ 36 width: 90px; 37 height: 35px; 38 background: rgba(0,233,2,0.4); 39 border: none; 40 color: block; 41 font-size: 1.2em; 42 cursor: pointer; 43 -webkit-transition:background 0.5s; 44 -ms-transition:background 0.5s; 45 -o-transition:background 0.5s; 46 transition:background 0.5s; 47 } 48 .submit-btn:hover{ 49 background: rgba(0,233,2,0.7); 50 } 51 } 52 @media screen and (min-width: 768px) and (max-width: 1199px){ 53 .content-div{ 54 width: 90%; 55 margin: 5% auto; 56 } 57 .form-ele{ 58 width: 50%; 59 margin: auto; 60 } 61 .content-div h2.head-title{ 62 text-align: center; 63 } 64 .form-ele p input[type="text"]{ 65 width: 70%; 66 } 67 .f-messages{ 68 width: 80%; 69 resize: none; 70 height: 100px; 71 padding: 10px; 72 box-sizing: border-box; 73 } 74 .submit-btn{ 75 width: 90px; 76 height: 35px; 77 background: rgba(0,233,2,0.4); 78 border: none; 79 color: block; 80 font-size: 1.2em; 81 cursor: pointer; 82 -webkit-transition:background 0.5s; 83 -ms-transition:background 0.5s; 84 -o-transition:background 0.5s; 85 transition:background 0.5s; 86 } 87 .submit-btn:hover{ 88 background: rgba(0,233,2,0.7); 89 } 90 } 91 @media screen and (min-width: 1200px) and (max-width: 1365px) { 92 .content-div{ 93 width: 90%; 94 margin: 5% auto; 95 } 96 .form-ele{ 97 width: 50%; 98 margin: auto; 99 } 100 .content-div h2.head-title{ 101 text-align: center; 102 } 103 .form-ele p input[type="text"]{ 104 width: 80%; 105 } 106 .f-messages{ 107 width: 80%; 108 resize: none; 109 height: 100px; 110 padding: 10px; 111 box-sizing: border-box; 112 } 113 .submit-btn{ 114 width: 90px; 115 height: 35px; 116 background: rgba(0,233,2,0.4); 117 border: none; 118 color: block; 119 font-size: 1.2em; 120 cursor: pointer; 121 -webkit-transition:background 0.5s; 122 -ms-transition:background 0.5s; 123 -o-transition:background 0.5s; 124 transition:background 0.5s; 125 } 126 .submit-btn:hover{ 127 background: rgba(0,233,2,0.7); 128 } 129 } 130 @media screen and (min-width: 1366px) and (max-width: 1920px) { 131 .content-div{ 132 width: 90%; 133 margin: 5% auto; 134 } 135 .form-ele{ 136 width: 50%; 137 margin: auto; 138 } 139 .content-div h2.head-title{ 140 text-align: center; 141 } 142 .form-ele p input[type="text"]{ 143 width: 80%; 144 } 145 .f-messages{ 146 width: 80%; 147 resize: none; 148 height: 100px; 149 padding: 10px; 150 box-sizing: border-box; 151 } 152 .submit-btn{ 153 width: 90px; 154 height: 35px; 155 background: rgba(0,233,2,0.4); 156 border: none; 157 color: block; 158 font-size: 1.2em; 159 cursor: pointer; 160 -webkit-transition:background 0.5s; 161 -ms-transition:background 0.5s; 162 -o-transition:background 0.5s; 163 transition:background 0.5s; 164 } 165 .submit-btn:hover{ 166 background: rgba(0,233,2,0.7); 167 } 168 } 169 </style> 170 </head> 171 <body> 172 173 <div class="content-div"> 174 <h2 class="head-title">留言</h2> 175 <form action="add.php" method="post" class="form-ele"> 176 <p> 177 <label for="names">姓名:</label><input id="names" type="text" name="names"> 178 </p> 179 <p> 180 <label for="qq">QQ:</label><input id="qq" type="text" name="qq"> 181 </p> 182 <p> 183 <label for="email">email:</label><input id="email" type="text" name="email"> 184 </p> 185 <p> 186 <label for="messages">留言:</label><textarea id="messages" name="messages" class="f-messages"></textarea> 187 </p> 188 <p style="text-align: center;"> 189 <input type="submit" name="sub" value="提交" class="submit-btn"> 190 </p> 191 </form> 192 </div> 193 194 195 </body> 196 </html>