前端留言板代码实例

<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;
900px;
}

.ylcon{100%;min-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;}