Buat fail style.css

Masukkan kod css ke dalam fail ini

<style>
*{
   margin:0;
   padding:0;
   list-style-type:none;
   font-size:13px;
   font-family:'Helvetica Neue',Helvetica,Arial,Sans-serif;
}
body {
   background-color: #54B1EB;
}
 
#all_wrap {
   width: 958px;
   margin: 0 auto;
   margin-top:30px;
   background-color:#CCCCCC;
}

#header h1 {
   font-size: 36px;
   line-height:70px;
}

#header {
   margin: 0 auto;
   width: 916px;
}

#content {
   margin: 0 auto;
   width: 916px;
   border: 1px solid #3683D8;
}
.item {
   margin: 0 auto;
   width: 896px;
   border-bottom-width: 1px;
   border-bottom-style: dashed;
   border-bottom-color: #900;
   clear:both;
}
.a {
   float: left;
   width:60px;
   margin-top:5px;
}

/*留言列表*/
.n,.t,.m{
   line-height:30px;
}
.n {
   float: left;
   color:#00F;
   padding-right:5px;
}
.t{
   color:#666;
}
.o {
   float: right;
}
.m{
   padding-left:60px;
   padding-right:30px;
   word-break:break-all;
}

/*新留言表單*/
.form_line{
   clear:both;
   margin-top:10px;
}
.form_box {
   margin: 0 auto;
   width: 890px;
}
.form_text {
   float: left;
   width: 80px;
   text-align:right;
}
#form_select_avater label {
   width: 60px;
   display: block;
   float: left;
   text-align: center;
   cursor: pointer;
}
.form_input textarea {
   width: 500px;
   height: 70px;
}

#submit_0{
   width:100px;
   height:30px;
   }

#footer{
margin: 0 auto;
   width: 896px;
   }
.footer_message {
   line-height: 40px;
   
}
.pagination {
   text-align: center;
   margin:10px auto 10px auto;
}
.pagination a {
   display: inline-block;
   border: 1px solid #00F;
   padding-right: 8px;
   padding-left: 8px;
   padding-top: 2px;
   padding-bottom: 2px;
   text-decoration: none;
   color: #900;
   margin-right: 4px;
}

.pagination a:hover{
   border-color:#F0F;
   color:#000;
   }
.login_button {
   float: right;
}
#submit_1 {
   width: 60px;
}
.login_form form label {
   float: left;
   display: block;
   width: 220px;
}
.login_form {
   padding-top: 20px;
}
.login_form form {
   display: block;
   border: 1px dashed #F0F;
   width:520px;
   padding-top:10px;
   padding-bottom:10px;
   padding-left:3px;
}
.welcome_info {
   color: #900;
   float: right;
}
.r {
   color: #F00;
}

.retime{
   color:#666;
   }

.login_button a{
   text-decoration:none;
   }
#login_form{
   
   display:none;}
</style>

Masukkan kod ini pada halaman hujung hadapan Letakkan semua fail dalam direktori yang sama untuk memudahkan panggilan. Jika diletakkan Anda perlu memasukkan laluan dalam folder lain untuk memanggilnya.

<link rel="stylesheet" type="text/css" href="style.css"/>

Buat fail index.js

Letakkan kod js ke dalam

<script type="text/javascript">
$(document).ready(function() {
      random_checked_avatar();
      $("#submit_0").click(validate_input);
//      toggle() 方法切換元素的可見狀態(tài)。
//        如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。
      $("#login_show_button").toggle(function(){
         $("#login_form").show(100);
         return false;
      },function(){
         $("#login_form").hide(100);
         return false;
      });

      $(".reply_button").click(function(){
         if($(this).parent().parent().children(".m").children(".reply_form_wrap").size()==0){
            //parent() 獲得當(dāng)前匹配元素集合中每個元素的父元素，使用選擇器進(jìn)行篩選是可選的。
            var id=$(this).attr("href");  //attr() 方法設(shè)置或返回被選元素的屬性值。
            var reply_form=$("#reply_form").html();
            $(this).parent().parent().children(".m").append(reply_form);  //append() 方法在被選元素的結(jié)尾插入指定內(nèi)容。
            $(this).parent().parent().children(".m").children(".reply_form_wrap").show(200);
            $(this).parent().parent().children(".m").children(".reply_form_wrap").children("form")
                  .children("input[name='id']").val(id);
         }
         return false;
      });
   });

   function random_checked_avatar(){
      var r=Math.random()*2; //返回介于 0 ~ 2 之間的一個隨機(jī)數(shù)。
      $("#form_select_avater input:radio").eq(r).attr("checked","checked");
   }
   function validate_input(){
      var l=$("#nickname").val().trim().length;
      if(l==0) {alert("昵稱不能為空");return false;};
      if(l>6) {alert("昵稱要6個字符以內(nèi)");return false;}
      l=$("#message").val().trim().length;
      if(l==0) {alert("留言內(nèi)容不能為空");return false;}
      if(l>300) {alert("留言內(nèi)容要300字符以內(nèi)");return false;}
      return true;
   }
</script>

Tambahkan kod tersebut pada halaman hujung hadapan Letakkan semua fail dalam direktori yang sama untuk memudahkan panggilan. Jika Anda perlu memasukkan laluan untuk memanggilnya apabila diletakkan dalam folder lain.