HTML5实现留言和回复的页面样式

需求分析

本需求是实现留言和回复的页面样式。页面需要实现从服务器端下载留言，向服务器端发送留言和回复等基本功能。用户能够方便地留言和回复，留言和回复的内容应当能够实时地展示在页面上。

HTML结构设计

在设计HTML结构时，我们可以将页面分为两部分：留言板和留言框。其中，留言板用于展示已有的留言和回复，留言框则用于用户输入新的留言或回复。

<div id="留言板">
    <h3>留言板</h3>
    <ul id="留言列表">
        <li>
            <div class="留言信息">
                <span class="留言人">张三</span>
                <span class="留言时间">2022-09-26 16:32:41</span>
            </div>
            <div class="留言内容">
                <p>这是一条留言的内容。</p>
            </div>
            <ul class="回复列表">
                <li>
                    <div class="回复信息">
                        <span class="回复人">李四</span>
                        <span class="回复时间">2022-09-26 16:33:23</span>
                    </div>
                    <div class="回复内容">
                        <p>这是一条回复的内容。</p>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div id="留言框">
    <h3>留言框</h3>
    <form>
        <input type="text" id="留言人" placeholder="请输入您的姓名">
        <textarea id="留言内容" placeholder="请输入您的留言"></textarea>
        <button id="留言提交">提交留言</button>
    </form>
</div>

JavaScript代码实现

JavaScript代码的主要任务是与服务器端进行交互，实现页面的各种功能，包括留言的展示、留言的提交、回复的展示等。

// 从服务器端下载留言
function downloadMessage() {
    $.ajax({
        url: "downloadMessage.php",
        type: "GET",
        dataType: "json",
        success: function(data) {
            for (var i = 0; i < data.length; i++) {
                var message = data[i];
                var li = <li></li>;
                var header = <div class="留言信息"></div>;
                var name = <span class="留言人"></span>;
                var time = <span class="留言时间"></span>;
                var content = <div class="留言内容"><p></p></div>;
                var replyList = <ul class="回复列表"></ul>;
                li.appendTo("#留言列表");
                header.appendTo(li);
                name.text(message.name).appendTo(header);
                time.text(message.time).appendTo(header);
                content.appendTo(li);
                content.find("p").text(message.content);
                replyList.appendTo(li);
                for (var j = 0; j < message.reply.length; j++) {
                    var reply = message.reply[j];
                    var replyLi = <li></li>;
                    var replyHeader = <div class="回复信息"></div>;
                    var replyName = <span class="回复人"></span>;
                    var replyTime = <span class="回复时间"></span>;
                    var replyContent = <div class="回复内容"><p></p></div>;
                    replyLi.appendTo(replyList);
                    replyHeader.appendTo(replyLi);
                    replyName.text(reply.name).appendTo(replyHeader);
                    replyTime.text(reply.time).appendTo(replyHeader);
                    replyContent.appendTo(replyLi);
                    replyContent.find("p").text(reply.content);
                }
            }
        }
    });
}

// 向服务器提交留言
function submitMessage() {
    var name = $("#留言人").val();
    var content = $("#留言内容").val();
    $.ajax({
        url: "submitMessage.php",
        type: "POST",
        data: {"name": name, "content": content},
        success: function() {
            location.reload();
        }
    });
}

// 向服务器提交回复
function submitReply() {
    var name = $(this).closest("li").find(".留言人").text();
    var content = $(this).closest(".回复表单").find("textarea").val();
    $.ajax({
        url: "submitReply.php",
        type: "POST",
        data: {"name": name, "content": content},
        success: function() {
            location.reload();
        }
    });
}

$(function() {
    downloadMessage();
    $("#留言提交").click(function() {
        submitMessage();
        return false;
    });
    $(document).on("click", ".回复按钮", function() {
        $(this).after("<div class='回复表单'><textarea></textarea><button class='回复提交'>提交回复</button></div>");
        $(this).parent().find(".回复表单").find(".回复提交").click(submitReply);
    });
});

CSS样式设计

CSS的主要作用是美化页面，优化用户体验。对于留言板和留言框，在CSS设计时需要注重排版和颜色、字体的搭配，保证整个页面的风格统一、简洁美观。

#留言板 {
    width: 800px;
    margin: 20px auto;
}
#留言板 h3 {
    font-size: 24px;
    text-align: center;
}
#留言列表 {
    list-style: none;
    padding: 0;
}
.留言信息 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.留言人 {
    font-weight: bold;
    color: #333;
    margin-right: 10px;
}
.留言时间 {
    color: #999;
}
.留言内容 p {
    margin: 0;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
}
.回复列表 {
    margin-left: 20px;
    list-style: none;
}

#留言框 {
    width: 800px;
    margin: 20px auto;
}
#留言框 h3 {
    font-size: 24px;
    text-align: center;
}
#留言框 form {
    display: flex;
    flex-direction: column;
}
#留言框 input[type="text"], #留言框 textarea {
    font-size: 16px;
    padding: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
}
#留言框 textarea {
    height: 100px;
}
#留言框 button {
    font-size: 16px;
    padding: 10px;
    background-color: #4169E1;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.回复表单 textarea {
    margin-bottom: 10px;
}