PHP開發(fā)之留言板頁面布局
在上章節(jié)我們已經(jīng)講到了發(fā)布留言和展示留言是在用一個(gè)頁面,所以你可以運(yùn)用你所學(xué)到的HTML和css知識(shí)進(jìn)行簡(jiǎn)單的頁面布局,本教程留言板所運(yùn)用到的頁面布局代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <body> <div id="left"> <img src="images/reg.jpg"> </div> <div id="center"> <h1>留言內(nèi)容</h1> </div> <div id="right" > <h2>留言板</h2> <div > <a href="">首頁</a> | <button>留言</button> <a href="" class="right">管理員登錄</a> <form method="post" action="ressage_post.php" style="display:none;" onsubmit="return foo();" name="myform" "> <div class="form"> <p> 姓名:<input type="text" name="name"> </p> <p> 郵箱:<input type="email" name="email"> </p> <p> 留言內(nèi)容:<br/> <textarea cols="30" rows="7" name="content"></textarea> </p> <p> 驗(yàn)證碼:<input type="text" name="vcode"><img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand"> </p> <p> <button class="button">提交留言</button> </p> </div> </form> </div> </body> </html>
上面的代碼我們將頁面分成了三部分,第一個(gè)<div?id="left">里面放置了一張圖片。圖片如下
第二個(gè)<div?id="center">里面是放置我們所發(fā)布展示的留言
第三個(gè)<div?id="right"?>我們是在里面放置了<form>表單,用于提交我們的留言
上面的代碼我們沒有用任何的css樣式,所以我們的頁面看起來很不好看,在下章節(jié)我們就會(huì)給大家展示我們所運(yùn)用到的頁面布局樣式