PHP開発投稿コメント機能チュートリアルHTMLページ

私たちの HTML ページの構造は、主にコメントリストの読み取り <div id="comments"> とコメントを投稿するための

フォーム <div id="post"> で構成されています。コードは次のとおりです。

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

CSS スタイルを追加します
CSS を使用して、コメントが正常に投稿された後のプロンプトメッセージのスタイルを制御することに注意してください。

りー

次のセクション

新しいファイル

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

提出するリセットコード

自動運転

全画面表示