PHPで開発されたメッセージボードのページレイアウト
前の章で、メッセージの投稿とメッセージの表示に 1 つのページが使用されることを説明しました。そのため、これまでに學習した HTML と CSS の知識を使用して、このメッセージ ボードで使用されるページ レイアウト コードを簡単に作成できます。チュートリアルは次のとおりです
<!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> 驗證碼：<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>
上記のコードでは、ページを 3 つの部分に分割し、最初の <div id="left"> に畫像を配置します。畫像は次のとおりです
2 番目の <div id="center"> には投稿して表示したメッセージが含まれています
3 番目の <div id="right" > は <form> 內(nèi)に配置しました。メッセージを送信するために使用されるフォーム
上記のコードでは CSS スタイルを使用していないため、ページは非常に見苦しくなります。次の章で、ページ レイアウト スタイルを使用したものを示します
。
