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를 사용하여 페이지 모양을 제어하세요. #message는 댓글이 성공적으로 게시된 후 프롬프트 메시지의 스타일을 제어하는 데 사용됩니다.

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

지속적인 학습

새로운 파일

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

제출하다 코드 재설정

자동운전