PHP développe un livre d'or simple encapsulant du code js et css

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() 方法切换元素的可见状态。
//        如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
      $("#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() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
            var id=$(this).attr("href");  //attr() 方法设置或返回被选元素的属性值。
            var reply_form=$("#reply_form").html();
            $(this).parent().parent().children(".m").append(reply_form);  //append() 方法在被选元素的结尾插入指定内容。
            $(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 之间的一个随机数。
      $("#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个字符以内");return false;}
      l=$("#message").val().trim().length;
      if(l==0) {alert("留言内容不能为空");return false;}
      if(l>300) {alert("留言内容要300字符以内");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>