Web网页——留言板功能

本文描述如何在网页上实现一个简单的留言板功能，仅支持文字留言。

开发环境：dreamweaverCC  html +jscirpt + php

前置条件：1、一个简单的网站已经搭建完毕，支持用户登录网站。

                  2、用户已登录网站。

实现步骤：

一、新建留言板网页

1、新建网页：whiteboard.html 

留言板（js-div-whiteboard)分为三个部分：

留言列表：（js-div-whiteboard-messages）、无留言提示：（js-div-whiteboard-empty-hint ）、提交新留言：（js-div-whiteboard-input），三个div自上而下垂直排列。

html:

<div class = "js-div-whiteboard ">
        <div class = "js-div-whiteboard-messages"> 
        </div>
        <div class = "js-div-whiteboard-empty-hint">
        </div>        
        <div class = "js-div-whiteboard-input style-margin-top">
        </div>
    </div>

2、留言列表 js-div-whiteboard

留言列表分为 菜单（js-div-whiteboard-menu）和 留言内容（js-ul-whiteboard-message-list）两部分。

菜单：上一页 、下一页。

留言内容：作者10% + 留言80% + 日期10%， 三项内容水平排列，宽度为10%-80%-10%。 每条留言之间有水平线分割。

以上两项内容自上而下垂直排列。

html

 <div class = "js-div-whiteboard-messages">
            <div class="js-div-whiteboard-menu">
                 <span>&nbsp;&nbsp;</span>
                  <span class = "js-whiteboard-up-page ">上一页</span>
                  <span>&nbsp;&nbsp;</span>
                  <span class = "js-whiteboard-down-page ">下一页</span>
                  <hr class = "style-hr-full">
            </div>        
            <ul class="js-ul-whiteboard-message-list style-li-notice-text style-ul-user-menu">
            <li class = "style-fontsize-15">
                <span class = "style-li-whiteboard-user style-fontsize-15-center">user1</span>
                <span class = "style-li-whiteboard-message">吃瓜群众三号。</span>
                <span class = "style-li-whiteboard-date style-fontsize-15-center">01-02</span>
            </li>
            <hr class = "style-hr-full">
            <li>
                <span class = "style-li-whiteboard-user">user2</span>
                <span class = "style-li-whiteboard-message">吃瓜群众二号。</span>
                <span class = "style-li-whiteboard-date">01-02</span>
            </li>
            <hr class = "style-hr-full">
            </ul>
        </div>

3、无留言提示：（js-div-whiteboard-empty-hint ）

 <div class = "js-div-whiteboard-empty-hint">
         <span class = "style-li-whiteboard-message"> 留言板还是空的哦！</span>
 </div>

4、提交新留言：（js-div-whiteboard-input）

包含 textarea (js-whiteboard-textarea-input) 和 button(js-button-whiteboard-submit)两部分，上下垂直排列。

html

<div class = "js-div-whiteboard-input style-margin-top">
            <textarea class = "js-whiteboard-textarea-input" rows="5" cols="100" maxlength = "400" placeholder="说点什么吧……" style = "resize: none"></textarea><br/><br/>
            <button class = " js-button-whiteboard-submit" > 提 交  </button>  
</div>

5、最后添加一些css设置，页面结果

html：

<div class = "js-div-whiteboard ">
        <div class = "js-d