Créez un fichier style.css

Mettez le code CSS dans ce fichier

<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>

Entrez ce code sur la page frontale. Placez tous les fichiers dans le même répertoire pour un appel facile. Si placé Vous devez entrer le chemin dans d'autres dossiers pour l'appeler.

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

Créez un fichier index.js

Mettez le code js dans

<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>

Ajoutez ce code à la page frontale Mettez tous les fichiers dans le même répertoire pour plus de facilité. appelant. Si vous devez entrer le chemin pour l'appeler lorsqu'il est placé dans d'autres dossiers.

<script type="text/javascript" src="index.js"></script>