masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

PHP pembangunan post komen fungsi halaman HTML tutorial

Struktur halaman HTML kami terutamanya terdiri daripada membaca senarai ulasan<div id="comments"> dan

borang untuk menyiarkan ulasan<div id="post">

Kodnya adalah seperti berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表评论</title>
</head>
<body>
<div class="demo">
    <div id="comments">
        <h3>评论列表</h3>
    </div>
    <div id="post">
        <h3>发表评论</h3>
        <p>昵称：</p>
        <p><input type="text" class="input" id="user" /></p>
        <p>评论内容：</p>
        <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p>
        <p><input type="submit" value="发表" id="add" /></p>
        <div id="message"></div>
    </div>
</div>
</body>
</html>

Tambah gaya css kami

Gunakan CSS untuk mengawal penampilan halaman, Ambil perhatian bahawa #message digunakan untuk mengawal gaya mesej gesaan selepas komen berjaya disiarkan. 

<style type="text/css">
    .demo{
        width:500px;
        margin:  0 auto;
    }
    h3{
        font-size:18px
    }
    #comments{
        margin:10px auto
    }
    #post{
        margin-top:10px
    }
    #comments p,#post p{
        line-height:30px
    }
    #comments p span{
        margin:4px; color:#999
    }
    #message{
        position:relative;
        display:none;
        width:100px;
        padding:4px;
        margin-top:-100px;
        margin-left:30px;
        background: #ff0000;
        color: #c286ff;
        z-index:1001
    }
</style>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>发表评论</title> <style type="text/css"> .demo{ width:500px; margin: 0 auto; } h3{ font-size:18px } #comments{ margin:10px auto } #post{ margin-top:10px } #comments p,#post p{ line-height:30px } #comments p span{ margin:4px; color:#999 } #message{ position:relative; display:none; width:100px; padding:4px; margin-top:-100px; margin-left:30px; background: #ff0000; color: #c286ff; z-index:1001 } </style> </head> <body> <div class="demo"> <div id="comments"> <h3>评论列表</h3> </div> <div id="post"> <h3>发表评论</h3> <p>昵称：</p> <p><input type="text" class="input" id="user" /></p> <p>评论内容：</p> <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p> <p><input type="submit" value="发表" id="add" /></p> <div id="message"></div> </div> </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)  492970 permainan