In the previous chapter, we have already mentioned that posting messages and displaying messages use one page, so you can use the HTML and CSS knowledge you have learned to make a simple page layout. The page layout used in the message board in this tutorial The code is as follows
<!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>留言内容</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> 留言内容：<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>
In the above code, we divide the page into three parts, and a picture is placed in the first <div id="left">. The picture is as follows
The second<div id="center"> contains the messages we publish and display
The third< div id="right" >We placed the <form> form inside to submit our message
We did not use any css styles for the above code, so Our page looks very ugly. In the next chapter we will show you the page layout style we used
