Susun atur halaman papan mesej dibangunkan dalam PHP

Dalam bab sebelumnya, kami telah menyebut bahawa menyiarkan mesej dan memaparkan mesej menggunakan satu halaman, jadi anda boleh menggunakan pengetahuan HTML dan CSS yang telah anda pelajari untuk membuat reka letak halaman yang mudah tutorial ini Kodnya adalah seperti berikut

<!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>

Dalam kod di atas, kami membahagikan halaman kepada tiga bahagian, dan gambar diletakkan di <div id="left"> pertama. Gambar adalah seperti berikut

Yang kedua<div id="center"> mengandungi mesej yang kami terbitkan dan paparkan

Div id= yang ketiga "betul" >Kami meletakkan <borang> borang di dalam untuk menyerahkan mesej kami

Kami tidak menggunakan sebarang gaya css untuk kod di atas, jadi halaman kami kelihatan sangat hodoh bab seterusnya kami akan menunjukkan kepada anda gaya susun atur halaman yang kami gunakan

Meneruskan pembelajaran

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik