简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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)  492166 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！