html5静态网页留言板代码 网页设计留言板代码

<section id="contactUs" class="page-section secPad">
    <div class="container">
        <!--下面是留言样式 -->
        <div class="row">
            <div class="headingMessage">
                <!-- Heading -->
                <h2>请在这里给我写留言便签条</h2>
                <p>Thank you for visiting out my blog. If you would like to leave a message, please fill out the form below.</p>
            </div>
        </div>        <div class="row mrgn30">
            <div class="col-sm-12 col-md-8">
                <!--NOTE: Update your email Id in "contact_me.php" file in order to receive emails from your contact form-->
                <form name="sentMessage" id="contactForm"  novalidate>
                    <h3>给我留言</h3>
                    <div class="control-group">
                        <div class="controls">
                            <input type="text" class="form-control"
                                   placeholder="NickName" id="name" required
                                   data-validation-required-message="Please enter your name"
                                   minlength="2"     maxlength="10"
                                   data-validation-minlength-message="Min 2 characters"/>
                            <p class="help-block"></p>
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                            <textarea rows="10" cols="100" class="form-control"
                                      placeholder="Message" id="message" required
                                      data-validation-required-message="Please enter your message" minlength="5"
                                      data-validation-minlength-message="Min 5 characters"
                                      maxlength="999" style="resize:none"></textarea>
                        </div>
                    </div>
                    <div id="success"> </div> <!-- For success/fail messages -->
                    <button type="submit" class="btn btn-primary pull-right">Send</button><br />
                </form>
            </div>
        </div>
        <!--下面是留言样式 -->
        <div class="ylcon">
            <p class="tit">
                所有留言
            </p>
            <div id="messDivId">
                <div class="story">
                    <div class="opbtn"></div>
                    <p class="story_t">怜星</p>
                    <p class="story_time">2015/07/12 20:48</p>
                    <p class="story_m">我的留言测试！</p>
                </div>
                <div class="story">
                    <div class="opbtn"></div>
                    <p class="story_t">怜星</p>
                    <p class="story_time">2015/07/12 20:48</p>
                    <p class="story_m">我的留言测试！！</p>
                </div>
                <div class="story">
                    <div class="opbtn"></div>
                    <p class="story_t">怜星</p>
                    <p class="story_time">2015/07/12 20:48</p>
                    <p class="story_m">我的留言测试！！</p>
                    <p class="story_hf">我的留言测试！</p>
                </div>
            </div>
        </div>    </div>
    <!--/.container-->
</section> 
 
.headingMessage{
    margin-left:80px;
    margin-top:30px;
}
.ylcon{
    margin-left:70px;
    margin-top:30px;
    width: 900px;
}.ylcon{width:100%;min-width:320px;}
.tit{height:26px;line-height:26px;padding:0px 15px;position:relative;font-size:15px;color:#aaa;border-bottom:1px solid rgba(0, 0, 0, 0.15);}
.story{border-bottom:1px dashed #cecece;padding:0 15px 3px;position:relative;}
.story_t{font-size:1.2em;color:rgba(0,0,0,1);padding-top:5px;padding-bottom:2px;}
.story_m{color:rgba(110,110,110,1);line-height:21px;word-break:break-all;word-wrap:break-word;overflow:hidden;font-size:1.2em;padding:2px 0;}
.story_time{color:rgba(154,154,154,1);padding:2px 0;}
.story_hf{background:rgb(245,245,245);font-size:1.2em;border:1px solid rgba(204,204,204,0.2);border-radius:2px;color:rgba(110,110,110,1);padding:4px;margin-bottom:5px;}
.opbtn{position:absolute;top: 0;right: 0;}