基于Bootstrap+jQuery.validate实现表单验证-tutorial js-php.cn

这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。

用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解：

1.正则表达式的基本了解

其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍的效果吧。

2.ajax异步请求

在验证用户名是否存在、用户登录时账号或者密码错误时给出相应的提示。

3.一些方便的验证库，比如jQuery.validate

正因为如此普遍的需求和一定的复杂性，bootstrap表单和jQuery.validate表单校验等一些优秀的类库专为人们解决UI、表单校验问题。

下面就是我用bootstrap+jQuery.validate做的界面：

基于Bootstrap+jQuery.validate实现表单验证

一、bootstrap3基本表单和水平表单

1、基本表单

基本的表单结构是 Bootstrap 自带的，下面列出了创建基本表单的步骤：

向父元素

添加 role="form"。
把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。
向所有的文本元素、

和 <select> 添加 class .form-control。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><form role="form">
 <div class="form-group">
  <label for="name">名称</label>
  <input type="text" class="form-control" id="name"
   placeholder="请输入名称">
 </div>
</form></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>效果如下：</p><p><img src="https://img.php.cn//upload/image/410/411/830/1483436029277469.png" title="1483436029277469.png" alt="2016526112626166.png"/></p><p>2、水平表单</p><p>在了解水平表单之间，我们应该对bootstrap的网格系统有所了解。</p><p>Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。</p><p>响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列,也就是说它是以百分比定义宽度的。</p><p><img src="https://img.php.cn//upload/image/801/770/144/1483436043189734.png" title="基于Bootstrap+jQuery.validate实现表单验证" alt="基于Bootstrap+jQuery.validate实现表单验证"    style="max-width:90%"  style="max-width:90%"/></p><p>水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：</p><p>步骤1：向父 <form> 元素添加 class .form-horizontal。<br/>步骤2：把标签和控件放在一个带有 class .form-group 的 <div> 中。<br/>步骤3：向标签添加 class .control-label。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><form class="form-horizontal" role="form">
 <div class="form-group">
  <label for="firstname" class="col-sm-2 control-label">名字</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="firstname"
   placeholder="请输入名字">
  </div>
 </div>
</form></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>效果如下：</p><p><img src="https://img.php.cn//upload/image/162/439/534/1483436073388976.png" title="基于Bootstrap+jQuery.validate实现表单验证" alt="基于Bootstrap+jQuery.validate实现表单验证"    style="max-width:90%"  style="max-width:90%"/></p><p>二、jQuery.validate 自定义校验方法</p><p>1、自定义校验方法</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">// 手机号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
 var length = value.length;
 return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。");</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>   </p><p></p><p>2、调用自定义校验</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">rules : {
 phone : {
   required : true,
   isPhone : true
  }
}</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>   </p><p></p><p>3、自定义错误显示</p><p><img src="https://img.php.cn//upload/image/785/207/696/1483436089832451.jpg" title="基于Bootstrap+jQuery.validate实现表单验证" alt="基于Bootstrap+jQuery.validate实现表单验证"    style="max-width:90%"  style="max-width:90%"/></p><p>三、register.html</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
  
<link type="text/css" href="jslib/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
  
<script src="jslib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/form.js" type="text/javascript"></script>
<script src="jslib/jQuery.validate/jquery.validate.js" type="text/javascript"></script>
<script src="jslib/bootstrap-3.3.5/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
#register-form{
 border: 1px solid rgb(197, 197, 197);
 width: 1000px;
 margin: auto;
 border-image: none;
 padding: 30px;
 border-radius: 3px;
}
</style>
  
</head>
<body>
 <h1 class="text-center text-danger">用户注册</h1><br>
 <form id="register-form" role="form" class="form-horizontal" method="get">
  <div class="form-group">
   <label class="col-sm-2 control-label" for="firstname">用户名：</label>
   <div class="col-sm-5">
    <input class="form-control" id="firstname" name="firstname" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="password">密码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="password" name="password" type="password" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="confirm_password">确认密码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="confirm_password" name="confirm_password" type="password" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="email">E-Mail：</label>
   <div class="col-sm-5">
    <input class="form-control" id="email" name="email" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="phone">手机号码：</label>
   <div class="col-sm-5">
    <input class="form-control" id="phone" name="phone" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="tel">固定电话：</label>
   <div class="col-sm-5">
    <input class="form-control" id="tel" name="tel" />
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="address">家庭住址：</label>
   <div class="col-sm-5">
    <input class="form-control" id="address" name="address" />
   </div>
  </div>
  <div class="form-group">
   <div class="col-md-offset-2 col-md-10">
    <button type="submit" class="btn btn-primary btn-sm">注册</button>
    <button type="reset" class="btn btn-primary btn-sm">重置</button>
   </div>
  </div>
 </form>
</body>
</html></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>四、form.js</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">$(document).ready(function() {
 // 手机号码验证
 jQuery.validator.addMethod("isPhone", function(value, element) {
  var length = value.length;
  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
 }, "请正确填写您的手机号码。");
  
 // 电话号码验证
 jQuery.validator.addMethod("isTel", function(value, element) {
  var tel = /^(\d{3,4}-)?\d{7,8}$/g; // 区号－3、4位 号码－7、8位
  return this.optional(element) || (tel.test(value));
 }, "请正确填写您的电话号码。");
 // 匹配密码，以字母开头，长度在6-12之间，必须包含数字和特殊字符。
 jQuery.validator.addMethod("isPwd", function(value, element) {
  var str = value;
  if (str.length < 6 || str.length > 18)
   return false;
  if (!/^[a-zA-Z]/.test(str))
   return false;
  if (!/[0-9]/.test(str))
   return fasle;
  return this.optional(element) || /[^A-Za-z0-9]/.test(str);
 }, "以字母开头，长度在6-12之间，必须包含数字和特殊字符。");
  
 $("#register-form").validate({
  errorElement : &#39;span&#39;,
  errorClass : &#39;help-block&#39;,
  
  rules : {
   firstname : "required",
   email : {
    required : true,
    email : true
   },
   password : {
    required : true,
    isPwd : true
   },
   confirm_password : {
    required : true,
    isPwd : true,
    equalTo : "#password"
   },
   phone : {
    required : true,
    isPhone : true
   },
   tel : {
    isTel : true
   },
   address : {
    minlength : 10
   }
  },
  messages : {
   firstname : "请输入姓名",
   email : {
    required : "请输入Email地址",
    email : "请输入正确的email地址"
   },
   password : {
    required : "请输入密码",
    minlength : jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password : {
    required : "请输入确认密码",
    minlength : "确认密码不能小于5个字符",
    equalTo : "两次输入密码不一致不一致"
   },
   phone : {
    required : "请输入手机号码"
   },
   tel : {
    required : "请输入座机号码"
   },
   address : {
    required : "请输入家庭地址",
    minlength : jQuery.format("家庭地址不能少于{0}个字符")
   }
  },
  //自定义错误消息放到哪里
  errorPlacement : function(error, element) {
   element.next().remove();//删除显示图标
   element.after(&#39;<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>&#39;);
   element.closest(&#39;.form-group&#39;).append(error);//显示错误消息提示
  },
  //给未通过验证的元素进行处理
  highlight : function(element) {
   $(element).closest(&#39;.form-group&#39;).addClass(&#39;has-error has-feedback&#39;);
  },
  //验证通过的处理
  success : function(label) {
   var el=label.closest(&#39;.form-group&#39;).find("input");
   el.next().remove();//与errorPlacement相似
   el.after(&#39;<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>&#39;);
   label.closest(&#39;.form-group&#39;).removeClass(&#39;has-error&#39;).addClass("has-feedback has-success");
   label.remove();
  },
  
 });
});</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>以上就是Bootstrap+jQuery.validate实现表单验证相关知识介绍，希望大家可以熟练掌握，设计自己的表单验证。</p>
<p>更多基于Bootstrap+jQuery.validate实现表单验证相关文章请关注PHP中文网！</p>                </div>
            </div>
            <div style="height: 25px;">
                                <div class="wzconBq" style="display: inline-flex;">
                    <span>Label berkaitan：</span>
                    <div class="wzcbqd">
                        <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ms/search?word=bootstrapjqueryvalidate表单验证" target="_blank">Bootstrap jQuery.validate 表单验证</a>                    </div>
                </div>
                                <div style="display: inline-flex;float: right; color:#333333;">sumber：php.cn</div>
                            </div>
            <div class="wzconOtherwz">
                                    <a href="http://www.php.cn/ms/faq/347699.html" title="Vue.js每天必学之组件与组件间的通信">
                        <span>Artikel sebelumnya：Vue.js每天必学之组件与组件间的通信</span>
                    </a>
                                    <a href="http://www.php.cn/ms/faq/347707.html"  title="jQuery插件fullPage.js实现全屏滚动效果">
                        <span>Artikel seterusnya：jQuery插件fullPage.js实现全屏滚动效果</span>
                    </a>
                            </div>
            <div class="wzconShengming">
       
                <div class="bzsmdiv">Kenyataan Laman Web ini</div>
                <div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div>
            </div>
           <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">Artikel terbaru oleh pengarang</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/354750.html">html设置加粗、倾斜、下划线、删除线等字体效果示例介绍</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/338018.html">实现一个 Java 版的 Redis</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/353509.html">最简单的微信小程序Demo</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/356272.html">python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/354839.html"> 微信小程序：如何实现tabs选项卡效果示例</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/354423.html">Python构造自定义方法来美化字典结构输出</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/350853.html">HTML5:使用Canvas实时处理Video</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/346502.html">Asp.net使用SignalR实现发送图片</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/354842.html">微信小程序开发教程-App()和Page()函数概述</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ms/faq/356574.html">详解python redis使用方法</a>
                            </div>
                            <div>1970-01-01 08:00:00</div>
                        </li>
                                    </ul>
            </div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">Isu terkini</div>
                <div class="wdsyContent">
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ms/wenda/176021.html"  target="_blank" title="Apakah penyelesaian untuk membentuk isu pengesahan dalam React JSX?" class="wdcdcTitle">Apakah penyelesaian untuk membentuk isu pengesahan dalam React JSX?</a>
                            <a href="http://www.php.cn/ms/wenda/176021.html" class="wdcdcCons">Saya cuba membuat borang pengesahan dalam React tetapi saya menghadapi banyak masalah seja...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-04-03 11:53:49</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>315</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ms/wenda/175569.html"  target="_blank" title="Pramuat teks ke dalam medan borang menggunakan rentetan pertanyaan URL" class="wdcdcTitle">Pramuat teks ke dalam medan borang menggunakan rentetan pertanyaan URL</a>
                            <a href="http://www.php.cn/ms/wenda/175569.html" class="wdcdcCons">Saya ingin menjana URL untuk halaman web ini yang pra-populasi dua elemen borang CeDiploma...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-03-30 19:21:10</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>271</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/ms/wenda/175530.html"  target="_blank" title="Pengesahan e-mel dengan Javascript tidak berfungsi walaupun alamat e-mel yang sah" class="wdcdcTitle">Pengesahan e-mel dengan Javascript tidak berfungsi walaupun alamat e-mel yang sah</a>
                            <a href="http://www.php.cn/ms/wenda/175530.html" class="wdcdcCons">Saya membuat dua borang menggunakan html dan javascript, satu untuk "log masuk" ...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-03-30 14:49:34</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>333</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                    </div>
            </div>
            <div class="wzconZt" >
                <div class="wzczt-title">
                    <div>Topik-topik yang berkaitan</div>
                    <a href="http://www.php.cn/ms/faq/zt" target="_blank">Lagi>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/damwbjc"><img src="https://img.php.cn/upload/subject/202407/22/2024072212323599166.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Tutorial membuat syiling bertulis" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/damwbjc" class="title-a-spanl" title="Tutorial membuat syiling bertulis"><span>Tutorial membuat syiling bertulis</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/betweenhsdyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072213373457694.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Penggunaan antara fungsi" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/betweenhsdyf" class="title-a-spanl" title="Penggunaan antara fungsi"><span>Penggunaan antara fungsi</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/htmlztysrhszt"><img src="https://img.php.cn/upload/subject/202407/22/2024072212112123969.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Bagaimana untuk menetapkan ketelusan warna fon html" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/htmlztysrhszt" class="title-a-spanl" title="Bagaimana untuk menetapkan ketelusan warna fon html"><span>Bagaimana untuk menetapkan ketelusan warna fon html</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/redisdsjlxynx"><img src="https://img.php.cn/upload/subject/202407/22/2024072212134419645.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Apakah 8 jenis data redis" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/redisdsjlxynx" class="title-a-spanl" title="Apakah 8 jenis data redis"><span>Apakah 8 jenis data redis</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/mchsyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072214062189653.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="penggunaan fungsi colormap matlab" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/mchsyf" class="title-a-spanl" title="penggunaan fungsi colormap matlab"><span>penggunaan fungsi colormap matlab</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/otcjydysdq"><img src="https://img.php.cn/upload/subject/202407/22/2024072213265891161.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Kelebihan dagangan OTC" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/otcjydysdq" class="title-a-spanl" title="Kelebihan dagangan OTC"><span>Kelebihan dagangan OTC</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/wsmdnhlp"><img src="https://img.php.cn/upload/subject/202407/22/2024072214363616557.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Mengapa komputer mempunyai skrin biru?" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/wsmdnhlp" class="title-a-spanl" title="Mengapa komputer mempunyai skrin biru?"><span>Mengapa komputer mempunyai skrin biru?</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ms/faq/wxfwhhgzhqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214222983140.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Perbezaan antara akaun perkhidmatan WeChat dan akaun rasmi" /> </a>
                            <a target="_blank" href="http://www.php.cn/ms/faq/wxfwhhgzhqb" class="title-a-spanl" title="Perbezaan antara akaun perkhidmatan WeChat dan akaun rasmi"><span>Perbezaan antara akaun perkhidmatan WeChat dan akaun rasmi</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="phpwzright">
        <div class="wzrOne">
            <div class="wzroTitle">Cadangan popular</div>
            <div class="wzroList">
                <ul>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="apa maksud js" href="http://www.php.cn/ms/faq/482163.html">apa maksud js</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="js怎么将字符串转为数组？" href="http://www.php.cn/ms/faq/461802.html">js怎么将字符串转为数组？</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="javascript如何刷新页面" href="http://www.php.cn/ms/faq/473330.html">javascript如何刷新页面</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="js数组怎么删除某一项" href="http://www.php.cn/ms/faq/475790.html">js数组怎么删除某一项</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="sqrt函数怎么使用" href="http://www.php.cn/ms/faq/415276.html">sqrt函数怎么使用</a>
                                </div>
                            </li>
                                    </ul>
            </div>
        </div>
        <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
        <div class="wzrThree">
            <div class="wzrthree-title">
                <div>Tutorial Popular</div>
                <a target="_blank" href="http://www.php.cn/ms/course.html">Lagi>
                </a>
            </div>
            <div class="wzrthreelist swiper2">
                <div class="wzrthreeTab  swiper-wrapper">
                    <div class="check tabdiv swiper-slide" data-id="one">Tutorial berkaitan <div></div></div>
                    <div class="tabdiv swiper-slide" data-id="two">Cadangan popular<div></div></div>
                    <div class="tabdiv swiper-slide" data-id="three">Kursus terkini<div></div></div>
                </div>
                <ul class="one">
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/812.html" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" href="http://www.php.cn/ms/course/812.html">Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)</a>
                                    <div class="wzrthreerb">
                                        <div>1417492 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/74.html" title="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu" href="http://www.php.cn/ms/course/74.html">Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu</a>
                                    <div class="wzrthreerb">
                                        <div>4258673 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="74">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/286.html" title="Tutorial Video Permulaan JAVA" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutorial Video Permulaan JAVA"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial Video Permulaan JAVA" href="http://www.php.cn/ms/course/286.html">Tutorial Video Permulaan JAVA</a>
                                    <div class="wzrthreerb">
                                        <div>2484086 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/504.html" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" href="http://www.php.cn/ms/course/504.html">Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python</a>
                                    <div class="wzrthreerb">
                                        <div>504164 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/ms/course/2.html" title="Tutorial pengenalan berasaskan sifar PHP" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="Tutorial pengenalan berasaskan sifar PHP"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial pengenalan berasaskan sifar PHP" href="http://www.php.cn/ms/course/2.html">Tutorial pengenalan berasaskan sifar PHP</a>
                                    <div class="wzrthreerb">
                                        <div>858796 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="2">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                    </ul>
                <ul class="two" style="display: none;">
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/812.html" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" href="http://www.php.cn/ms/course/812.html">Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)</a>
                                <div class="wzrthreerb">
                                    <div >1417492 kali belajar</div>
                                                                                <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/286.html" title="Tutorial Video Permulaan JAVA" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutorial Video Permulaan JAVA"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Tutorial Video Permulaan JAVA" href="http://www.php.cn/ms/course/286.html">Tutorial Video Permulaan JAVA</a>
                                <div class="wzrthreerb">
                                    <div >2484086 kali belajar</div>
                                                                                <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/504.html" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" href="http://www.php.cn/ms/course/504.html">Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python</a>
                                <div class="wzrthreerb">
                                    <div >504164 kali belajar</div>
                                                                                <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/901.html" title="Pengenalan pantas kepada pembangunan bahagian hadapan web" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Pengenalan pantas kepada pembangunan bahagian hadapan web"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Pengenalan pantas kepada pembangunan bahagian hadapan web" href="http://www.php.cn/ms/course/901.html">Pengenalan pantas kepada pembangunan bahagian hadapan web</a>
                                <div class="wzrthreerb">
                                    <div >215346 kali belajar</div>
                                                                                <div class="courseICollection" data-id="901">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/234.html" title="Kuasai tutorial video PS dari awal" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Kuasai tutorial video PS dari awal"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Kuasai tutorial video PS dari awal" href="http://www.php.cn/ms/course/234.html">Kuasai tutorial video PS dari awal</a>
                                <div class="wzrthreerb">
                                    <div >878913 kali belajar</div>
                                                                                <div class="courseICollection" data-id="234">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
                <ul class="three" style="display: none;">
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1648.html" title="[Web front-end] Permulaan pantas Node.js" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Permulaan pantas Node.js"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="[Web front-end] Permulaan pantas Node.js" href="http://www.php.cn/ms/course/1648.html">[Web front-end] Permulaan pantas Node.js</a>
                                <div class="wzrthreerb">
                                    <div >6541 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1648">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1647.html" title="Koleksi lengkap kursus timbunan penuh pembangunan web asing" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Koleksi lengkap kursus timbunan penuh pembangunan web asing"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Koleksi lengkap kursus timbunan penuh pembangunan web asing" href="http://www.php.cn/ms/course/1647.html">Koleksi lengkap kursus timbunan penuh pembangunan web asing</a>
                                <div class="wzrthreerb">
                                    <div >5109 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1647">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1646.html" title="Gunakan GraphQL praktikal bahasa" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Gunakan GraphQL praktikal bahasa"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Gunakan GraphQL praktikal bahasa" href="http://www.php.cn/ms/course/1646.html">Gunakan GraphQL praktikal bahasa</a>
                                <div class="wzrthreerb">
                                    <div >4282 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1646">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1645.html" title="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah" href="http://www.php.cn/ms/course/1645.html">Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah</a>
                                <div class="wzrthreerb">
                                    <div >635 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1645">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/ms/course/1644.html" title="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam" href="http://www.php.cn/ms/course/1644.html">Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam</a>
                                <div class="wzrthreerb">
                                    <div >21809 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1644">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper2', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrthreeTab>div').click(function(e){
                    $('.wzrthreeTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrthreelist>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>

<div class="wzrFour">
            <div class="wzrfour-title">
                <div>Muat turun terkini</div>
                <a href="http://www.php.cn/ms/xiazai">Lagi>
                </a>
            </div>
                        <script>
                $(document).ready(function(){
                    var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
                        speed:1000,
                        autoplay:{
                            delay:3500,
                            disableOnInteraction: false,
                        },
                        pagination:{
                            el:'.sjyx_banSwiperwz .swiper-pagination',
                            clickable :false,
                        },
                        loop:true
                    })
                })
            </script>
            <div class="wzrfourList swiper3">
                <div class="wzrfourlTab swiper-wrapper">
                    <div class="check swiper-slide" data-id="onef">kesan web <div></div></div>
                    <div class="swiper-slide" data-id="twof">Kod sumber laman web<div></div></div>
                    <div class="swiper-slide" data-id="threef">Bahan laman web<div></div></div>
                    <div class="swiper-slide" data-id="fourf">Templat hujung hadapan<div></div></div>
                </div>
                <ul class="onef">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="kod hubungan borang mesej perusahaan jQuery" href="http://www.php.cn/ms/toolset/js-special-effects/8071">[butang borang] kod hubungan borang mesej perusahaan jQuery</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Kesan main balik kotak muzik MP3 HTML5" href="http://www.php.cn/ms/toolset/js-special-effects/8070">[Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 kesan khas menu navigasi animasi zarah sejuk" href="http://www.php.cn/ms/toolset/js-special-effects/8069">[Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery bentuk visual seret dan lepas kod penyuntingan" href="http://www.php.cn/ms/toolset/js-special-effects/8068">[butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Kod pemain muzik Kugou tiruan VUE.JS" href="http://www.php.cn/ms/toolset/js-special-effects/8067">[Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Permainan kotak menolak html5 klasik" href="http://www.php.cn/ms/toolset/js-special-effects/8066">[kesan khas html5] Permainan kotak menolak html5 klasik</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="menatal jQuery untuk menambah atau mengurangkan kesan imej" href="http://www.php.cn/ms/toolset/js-special-effects/8065">[Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Kesan zum hover kulit album peribadi CSS3" href="http://www.php.cn/ms/toolset/js-special-effects/8064">[Kesan album foto] Kesan zum hover kulit album peribadi CSS3</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="twof" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8328" title="Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah" target="_blank">[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8327" title="Templat halaman panduan resume peribadi berwarna segar" target="_blank">[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8326" title="Templat Web Resume Kerja Kreatif Pereka" target="_blank">[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8325" title="Templat laman web syarikat pembinaan kejuruteraan moden" target="_blank">[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8324" title="Templat HTML5 responsif untuk institusi perkhidmatan pendidikan" target="_blank">[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8323" title="Templat laman web pusat membeli-belah kedai e-buku dalam talian" target="_blank">[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8322" title="Teknologi IT menyelesaikan templat tapak web syarikat Internet" target="_blank">[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8321" title="Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu" target="_blank">[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="threef" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3078"  target="_blank"  title="Bahan vektor elemen musim panas yang comel (EPS+PNG)">[bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3077"  target="_blank"  title="Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)">[bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3076"  target="_blank"  title="Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)">[gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3075"  target="_blank"  title="Bahan vektor topi pengijazahan emas (EPS+PNG)">[bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3074"  target="_blank"  title="Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)">[bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3073"  target="_blank"  title="Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza">[bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3072"  target="_blank"  title="Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)">[gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-materials/3071"  target="_blank"  title="Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)">[bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="fourf" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8328"  target="_blank" title="Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah">[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8327"  target="_blank" title="Templat halaman panduan resume peribadi berwarna segar">[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8326"  target="_blank" title="Templat Web Resume Kerja Kreatif Pereka">[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8325"  target="_blank" title="Templat laman web syarikat pembinaan kejuruteraan moden">[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8324"  target="_blank" title="Templat HTML5 responsif untuk institusi perkhidmatan pendidikan">[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8323"  target="_blank" title="Templat laman web pusat membeli-belah kedai e-buku dalam talian">[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8322"  target="_blank" title="Teknologi IT menyelesaikan templat tapak web syarikat Internet">[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/ms/toolset/website-source-code/8321"  target="_blank" title="Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu">[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu</a>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper3', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrfourlTab>div').click(function(e){
                    $('.wzrfourlTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrfourList>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>
    </div>
</div>
<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
        </div>
        <div class="footermid">
            <a href="http://www.php.cn/ms/about/us.html">Tentang kita</a>
            <a href="http://www.php.cn/ms/about/disclaimer.html">Penafian</a>
            <a href="http://www.php.cn/ms/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>