communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Page HTML du didacticiel sur la fonction de commentaire de publication de développement PHP

La structure de notre page HTML consiste principalement à lire la liste des commentaires<div id="comments"> et le

formulaire de publication des commentaires<div id="post">

Le code est le suivant

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

Ajoutez notre style CSS

Utilisez CSS pour contrôler l'apparence de la page, Notez que #message est utilisé pour contrôler le style du message d'invite après la publication réussie d'un commentaire. 

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


Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492970 joue