masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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

reg.jpg

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
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492837 permainan