PHP開發(fā) 發(fā)表評論功能教學(xué)HTML頁面
我們的HTML頁面結(jié)構(gòu)主要由讀取評論清單<div id="comments">和
發(fā)表評論的表單<div?id="post">構(gòu)成
#程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>發(fā)表評論</title> </head> <body> <div class="demo"> <div id="comments"> <h3>評論列表</h3> </div> <div id="post"> <h3>發(fā)表評論</h3> <p>昵稱：</p> <p><input type="text" class="input" id="user" /></p> <p>評論內(nèi)容：</p> <p><textarea class="input" id="txt" style="width:100%; height:80px"></textarea></p> <p><input type="submit" value="發(fā)表" id="add" /></p> <div id="message"></div> </div> </div> </body> </html>
加上我們的css樣式
用CSS控制頁面外觀，注意其中#message用來控制發(fā)表評論成功後的提示訊息的樣式。
<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>
