PHP开发之留言板页面布局
在上章节我们已经讲到了发布留言和展示留言是在用一个页面，所以你可以运用你所学到的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>留言内容</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>
上面的代码我们将页面分成了三部分，第一个<div id="left">里面放置了一张图片。图片如下
第二个<div id="center">里面是放置我们所发布展示的留言
第三个<div id="right" >我们是在里面放置了<form>表单，用于提交我们的留言
上面的代码我们没有用任何的css样式，所以我们的页面看起来很不好看，在下章节我们就会给大家展示我们所运用到的页面布局样式
新建文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<body>
<div id="left">
<img src="https://img.php.cn//upload/image/460/147/285/1477727203382106.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>
预览
Clear
- 课程推荐
- 课件下载
课件暂不提供下载，工作人员正在整理中，后期请多关注该课程~ 