简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

《Java Script DOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose

WBOY
Release： 2016-06-21 08:51:41
Original
1446 people have browsed it

1、文档：DOM中的“D”

"D"代表document(文档)

2、对象：DOM中的“O”

“O”代表object(对象) 对象的分类

  • 用户定义对象(user-defined object)
  • 内建对象(native object)
  • 宿主对象(host object)

window对象window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM（浏览器对象模型）BOM提供了window.open和window.blur等方法。以至于被滥用于各种弹出窗口和下拉菜单

3、模型：DOM中的“M”

“M”代表“Model”（模型）DOM把一份文档表示为一棵树（数学意义上的概念）示例代码

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>    <body>  </html>代码中<html>相当于树根，即根元素。<head>和<body>属于下一个分支，位于同一层次且互不包含，属于兄弟关系。<head>元素有两个子元素<meta>和<title>(属于兄弟关系)<body>元素有三个子元素<p>、<h1>、<ul>(这三个属于兄弟关系。<ul>也是一个父元素，有三个子元素，他们都是<li>元素。
Copy after login

如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确

4、节点

节点（node）属于网络术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。DOM也是同样的情况，文档是由节点构成的集合。

  • 元素节点
  • 文本节点
  • 属性节点

4、1元素节点

DOM的原子是元素节点（element node）诸如、

、之类的元素。标签的名字就是元素的名字。元素也可以包含其他的元素。没有被包含在其他元素的唯一元素是元素，它是我们的节点树的根元素。

4、2文本节点

在上述例子中，

元素包含着文本“don't forget to buy this stuff.”它就是一个文本节点（text node）。

4、3属性节点

属性节点是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，我们可以利用这个属性对包含在元素里的东西做出准确的描述：

<p title="a gentle reminder">Don't forget to buy this stuff.<p>
Copy after login

在DOM中title="a gentle reminder"是一个属性节点（attribute node），在前面的例子中无序清单元素

    有个id属性。有些清单元素
  • 有class属性。

    三者之间的关系.png

    4、4 CSS

    类似javascript脚本，我们也可以将CSS样式嵌在文档部分（style>标签之间）。也可以放在另外的一个文件里。**在HTML文件中引用CSS文件的格式： 

    <link type="text/css" href="file.css" rel="stylesheet">
    Copy after login

    继承（inheritance)是CSS技术中的一项强大功能。1)、 class属性

    <p class="special">This pargraph has the special class<p><h2 class="special">So dose this headline</h2>
    Copy after login

    在样式表里可以为上面的代码进行定义

    special{font-style: italic;}
    Copy after login

    还可以这样定义

    h2.special{text-transform: uppercase;}
    Copy after login

    2)、id属性id属性的用途是给网页里的某个元素加上一个独一无二的标识符：

    <ul id="purchases">
    Copy after login

    样式表定义

    #purchases{border:1px solid white;background-color：#333;color：#ccc;padding:1em;}
    Copy after login
    #purchases li{font-weight:bold;}
    Copy after login

    4、5获取元素

    有3种DOM方法可获取元素节点，分别是通过元素ID、通过标签名和通过类名字来获取

    • getElementById
    • getElementsByTagName
    • getElementsByClassName

    1)getElementById

    此方法将返回一个与那个有着给定id属性值的元素节点对应的对象，在javascript里注意大小写。它是document对象特有的函数，在脚本代码里，函数名的后面必须跟有一对圆括号，这对圆括号包含这函数的参数。document.getElementById(id)在getElementById方法中只有一个参数：你想获得的那个元素的id属性的值，这个id属性必须放在单引号或双引号里。docment.getElementById("purchases")这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的HTLM id属性值是purchases

              Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         alert(typeof docment.getElementById("purchases"));     </script>    <body>  </html>//利用`typeof`操作符进行验证（typeof操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。</pre><div class="contentsignin">Copy after login</div></div>   <p>验证可得是一个对象</p>   <h3>2)getElementsByTagName</h3>   <p>getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。它的参数是标签的名字：decument.getElementByTagName(tag)</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为：3</pre><div class="contentsignin">Copy after login</div></div>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code"><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <title>Shoping List<title>  </head>  <body>     <h1>What to buy</h1>     <p title="a gentle reminder">Don’t forget to buy this stuff.<p>     <ul id="purchases">        <li> A tin of beans<li>        <li class="sale">Cheese<li>        <li class="sale important">Milk<li>        </ul>     <script>         var items=document.getElementByTagName("li");         for (var i=0; i<items.length;i++){         alert(typeof items[i]);         }     </script>    <body>  </html>//代码运行结果显示三个alert对话框，显示的消息都是“object”。</pre><div class="contentsignin">Copy after login</div></div>   <p>getElementsByTagName允许把一个通配符作为它的参数，通配符（*）必须放在引号里</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点</pre><div class="contentsignin">Copy after login</div></div>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果，items数组将只包含id属性值是purshase的元素清单的元素</pre><div class="contentsignin">Copy after login</div></div>   <h3>3)getElementByClassName</h3>   <p>这个方法让我们能够通过class属性中的类名来访问元素，getElementByClassName也只接受一个参数，就是类名：</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">getElementByClassName(class)</pre><div class="contentsignin">Copy after login</div></div>   <p>这个方法的返回值也与getElementsByTagName类似，都是一个具有相同类名的元素的数组。</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">document.getElementsByClassName("sale")</pre><div class="contentsignin">Copy after login</div></div>   <p>利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">alert(document.getElementsByClassName("important sale").length);//对话框显示1，表示只有一个元素匹配。类名的顺序不重要，就算元素还带有更多类名也没有关系。</pre><div class="contentsignin">Copy after login</div></div>   <p>也可以和getElementById组合使用</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">     var shopping=document.getElementById("purchase");     var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。</pre><div class="contentsignin">Copy after login</div></div>   <p>getElementByClassName方法非常有用，但只有较新的浏览器才支持它。所以，需要使用已有的DOM方法来实现自己的getElementsByClassName。</p>   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有的方法return node.getElementsByTagName("*");for (var i=0; i<elems.length;i++){  if(elems[i].ClassName.indexof(classname)!= -1){results[results.length]=elems[i];          }      }return results；    }}</pre><div class="contentsignin">Copy after login</div></div>   <h4>5 获取和设置属性</h4>   <ul>       <li>
<strong>getAttribute方法</strong>(获取元素的属性)</li>    <li>
<strong>setAttribute方法</strong>(更改属性节点值)5、1getAttributegetAttribute是一个函数，它只有一个参数(你所要查询的属性的名称)</li>   </ul>                   </div>
            </div>
            <div style="height: 25px;">
                                <div class="wzconBq" style="display: inline-flex;">
                    <span>Related labels：</span>
                    <div class="wzcbqd">
                        <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/search?word=《javascriptdom编程艺术》读书笔记--dom" target="_blank">《Java Script DOM编程艺术》读书笔记--DOM</a>                    </div>
                </div>
                                <div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div>
                            </div>
            <div class="wzconOtherwz">
                                    <a href="http://www.php.cn/faq/235368.html" title="Viewport 单位: vw, vh, vmin, vmax_html/css_WEB-ITnose">
                        <span>Previous article：Viewport 单位: vw, vh, vmin, vmax_html/css_WEB-ITnose</span>
                    </a>
                                    <a href="http://www.php.cn/faq/235376.html"  title="Bootstrap使用心得之文本_html/css_WEB-ITnose">
                        <span>Next article：Bootstrap使用心得之文本_html/css_WEB-ITnose</span>
                    </a>
                            </div>
            <div class="wzconShengming">
       
                <div class="bzsmdiv">Statement of this Website</div>
                <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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">Latest Articles by Author</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796639331.html">What is a NullPointerException, and how do I fix it?</a>
                            </div>
                            <div>2024-10-22 09:46:29</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796629482.html">From Novice to Coder: Your Journey Begins with C Fundamentals</a>
                            </div>
                            <div>2024-10-13 13:53:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796628545.html">Unlocking Web Development with PHP: A Beginner's Guide</a>
                            </div>
                            <div>2024-10-12 12:15:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796627928.html">Demystifying C: A Clear and Simple Path for New Programmers</a>
                            </div>
                            <div>2024-10-11 22:47:31</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796627806.html">Unlock Your Coding Potential: C Programming for Absolute Beginners</a>
                            </div>
                            <div>2024-10-11 19:36:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796627670.html">Unleash Your Inner Programmer: C for Absolute Beginners</a>
                            </div>
                            <div>2024-10-11 15:50:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796627643.html">Automate Your Life with C: Scripts and Tools for Beginners</a>
                            </div>
                            <div>2024-10-11 15:07:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796627620.html">PHP Made Easy: Your First Steps in Web Development</a>
                            </div>
                            <div>2024-10-11 14:21:21</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796627574.html">Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity</a>
                            </div>
                            <div>2024-10-11 12:59:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/faq/1796627539.html">The Key to Coding: Unlocking the Power of Python for Beginners</a>
                            </div>
                            <div>2024-10-11 12:17:31</div>
                        </li>
                                    </ul>
            </div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">Latest Issues</div>
                <div class="wdsyContent">
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/wenda/176411.html"  target="_blank" title="function_exists() cannot determine the custom function" class="wdcdcTitle">function_exists() cannot determine the custom function</a>
                            <a href="http://www.php.cn/wenda/176411.html" class="wdcdcCons">Function test () {return true;} if (function_exists ('test')) {echo "test is function...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 2024-04-29 11:01:01</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>2</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1814</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/wenda/176410.html"  target="_blank" title="How to display the mobile version of Google Chrome" class="wdcdcTitle">How to display the mobile version of Google Chrome</a>
                            <a href="http://www.php.cn/wenda/176410.html" class="wdcdcCons">Hello teacher, how can I change Google Chrome into a mobile version?</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 2024-04-23 00:22:19</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>10</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1966</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/wenda/176407.html"  target="_blank" title="The child window operates the parent window, but the output does not respond." class="wdcdcTitle">The child window operates the parent window, but the output does not respond.</a>
                            <a href="http://www.php.cn/wenda/176407.html" class="wdcdcCons">The first two sentences are executable, but the last sentence cannot be implemented.</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 2024-04-19 15:37:47</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>1662</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/wenda/176406.html"  target="_blank" title="There is no output in the parent window" class="wdcdcTitle">There is no output in the parent window</a>
                            <a href="http://www.php.cn/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('I am the output of the child ...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 2024-04-18 23:52: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>1566</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/wenda/176405.html"  target="_blank" title="Where is the courseware about CSS mind mapping?" class="wdcdcTitle">Where is the courseware about CSS mind mapping?</a>
                            <a href="http://www.php.cn/wenda/176405.html" class="wdcdcCons">Courseware</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 2024-04-16 10:10:18</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>0</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1593</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                    </div>
            </div>
            <div class="wzconZt" >
                <div class="wzczt-title">
                    <div>Related Topics</div>
                    <a href="http://www.php.cn/faq/zt" target="_blank">More>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/faq/xkqddzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072212121952898.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The role of graphics card driver" /> </a>
                            <a target="_blank" href="http://www.php.cn/faq/xkqddzy" class="title-a-spanl" title="The role of graphics card driver"><span>The role of graphics card driver</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/faq/ngptnmdrbb"><img src="https://img.php.cn/upload/subject/202407/22/2024072213251099186.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Which platform can I buy Ripple coins on?" /> </a>
                            <a target="_blank" href="http://www.php.cn/faq/ngptnmdrbb" class="title-a-spanl" title="Which platform can I buy Ripple coins on?"><span>Which platform can I buy Ripple coins on?</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/faq/daijkjj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214400131064.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Standby shortcut key" /> </a>
                            <a target="_blank" href="http://www.php.cn/faq/daijkjj" class="title-a-spanl" title="Standby shortcut key"><span>Standby shortcut key</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/faq/pythonsjc"><img src="https://img.php.cn/upload/subject/202407/22/2024072214231079799.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="python timestamp" /> </a>
                            <a target="_blank" href="http://www.php.cn/faq/pythonsjc" class="title-a-spanl" title="python timestamp"><span>python timestamp</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/faq/bagsbkycqcym"><img src="https://img.php.cn/upload/subject/202407/22/2024072213232714109.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Can BAGS coins be held for a long time?" /> </a>
                            <a target="_blank" href="http://www.php.cn/faq/bagsbkycqcym" class="title-a-spanl" title="Can BAGS coins be held for a long time?"><span>Can BAGS coins be held for a long time?</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/faq/jsdmzmy"><img src="https://img.php.cn/upload/subject/202407/22/2024072214022986683.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to use js code" /> </a>
                            <a target="_blank" href="http://www.php.cn/faq/jsdmzmy" class="title-a-spanl" title="How to use js code"><span>How to use js code</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/faq/lpdm"><img src="https://img.php.cn/upload/subject/202407/22/2024072214363468857.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Blue screen code 0x000009c" /> </a>
                            <a target="_blank" href="http://www.php.cn/faq/lpdm" class="title-a-spanl" title="Blue screen code 0x000009c"><span>Blue screen code 0x000009c</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/faq/pythondoct"><img src="https://img.php.cn/upload/subject/202407/22/2024072213491972260.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to use dict function in Python" /> </a>
                            <a target="_blank" href="http://www.php.cn/faq/pythondoct" class="title-a-spanl" title="How to use dict function in Python"><span>How to use dict function in Python</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="phpwzright">
        <div class="wzrOne">
            <div class="wzroTitle">Popular Recommendations</div>
            <div class="wzroList">
                <ul>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="What does url mean?" href="http://www.php.cn/faq/418772.html">What does url mean?</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="What does DOM mean?" href="http://www.php.cn/faq/414303.html">What does DOM mean?</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="How to change image size" href="http://www.php.cn/faq/414252.html">How to change image size</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="How to make font bold in HTML" href="http://www.php.cn/faq/414520.html">How to make font bold in HTML</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="How to set the size of html images" href="http://www.php.cn/faq/475145.html">How to set the size of html images</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>Popular Tutorials</div>
                <a target="_blank" href="http://www.php.cn/course.html">More>
                </a>
            </div>
            <div class="wzrthreelist swiper2">
                <div class="wzrthreeTab  swiper-wrapper">
                    <div class="check tabdiv swiper-slide" data-id="one">Related Tutorials <div></div></div>
                    <div class="tabdiv swiper-slide" data-id="two">Popular Recommendations<div></div></div>
                    <div class="tabdiv swiper-slide" data-id="three">Latest courses<div></div></div>
                </div>
                <ul class="one">
                                                <li>
                                <a target="_blank" href="http://www.php.cn/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="http://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a>
                                    <div class="wzrthreerb">
                                        <div>1417424 <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/course/74.html" title="PHP introductory tutorial one: Learn PHP in one week" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP introductory tutorial one: Learn PHP in one week"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="PHP introductory tutorial one: Learn PHP in one week" href="http://www.php.cn/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a>
                                    <div class="wzrthreerb">
                                        <div>4258566 <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/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="JAVA Beginner's Video Tutorial" href="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a>
                                    <div class="wzrthreerb">
                                        <div>2480958 <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/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a>
                                    <div class="wzrthreerb">
                                        <div>504131 <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/course/2.html" title="PHP zero-based introductory tutorial" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP zero-based introductory tutorial"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="PHP zero-based introductory tutorial" href="http://www.php.cn/course/2.html">PHP zero-based introductory tutorial</a>
                                    <div class="wzrthreerb">
                                        <div>844459 <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/course/812.html" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)" href="http://www.php.cn/course/812.html">The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)</a>
                                <div class="wzrthreerb">
                                    <div >1417424 times of learning</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/course/286.html" title="JAVA Beginner's Video Tutorial" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA Beginner's Video Tutorial"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="JAVA Beginner's Video Tutorial" href="http://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a>
                                <div class="wzrthreerb">
                                    <div >2480958 times of learning</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/course/504.html" title="Little Turtle's zero-based introduction to learning Python video tutorial" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle's zero-based introduction to learning Python video tutorial"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Little Turtle's zero-based introduction to learning Python video tutorial" href="http://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a>
                                <div class="wzrthreerb">
                                    <div >504131 times of learning</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/course/901.html" title="Quick introduction to web front-end development" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Quick introduction to web front-end development"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Quick introduction to web front-end development" href="http://www.php.cn/course/901.html">Quick introduction to web front-end development</a>
                                <div class="wzrthreerb">
                                    <div >215337 times of learning</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/course/234.html" title="Master PS video tutorials from scratch" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Master PS video tutorials from scratch"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Master PS video tutorials from scratch" href="http://www.php.cn/course/234.html">Master PS video tutorials from scratch</a>
                                <div class="wzrthreerb">
                                    <div >878302 times of learning</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/course/1648.html" title="[Web front-end] Node.js quick start" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Node.js quick start"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="[Web front-end] Node.js quick start" href="http://www.php.cn/course/1648.html">[Web front-end] Node.js quick start</a>
                                <div class="wzrthreerb">
                                    <div >6487 times of learning</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/course/1647.html" title="Complete collection of foreign web development full-stack courses" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Complete collection of foreign web development full-stack courses"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Complete collection of foreign web development full-stack courses" href="http://www.php.cn/course/1647.html">Complete collection of foreign web development full-stack courses</a>
                                <div class="wzrthreerb">
                                    <div >5094 times of learning</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/course/1646.html" title="Go language practical GraphQL" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go language practical GraphQL"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Go language practical GraphQL" href="http://www.php.cn/course/1646.html">Go language practical GraphQL</a>
                                <div class="wzrthreerb">
                                    <div >4276 times of learning</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/course/1645.html" title="550W fan master learns JavaScript from scratch step by step" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W fan master learns JavaScript from scratch step by step"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="550W fan master learns JavaScript from scratch step by step" href="http://www.php.cn/course/1645.html">550W fan master learns JavaScript from scratch step by step</a>
                                <div class="wzrthreerb">
                                    <div >635 times of learning</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/course/1644.html" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours" href="http://www.php.cn/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a>
                                <div class="wzrthreerb">
                                    <div >21766 times of learning</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>Latest Downloads</div>
                <a href="http://www.php.cn/xiazai">More>
                </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">Web Effects <div></div></div>
                    <div class="swiper-slide" data-id="twof">Website Source Code<div></div></div>
                    <div class="swiper-slide" data-id="threef">Website Materials<div></div></div>
                    <div class="swiper-slide" data-id="fourf">Front End Template<div></div></div>
                </div>
                <ul class="onef">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery enterprise message form contact code" href="http://www.php.cn/xiazai/js/8071">[form button] jQuery enterprise message form contact code</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 MP3 music box playback effects" href="http://www.php.cn/xiazai/js/8070">[Player special effects] HTML5 MP3 music box playback effects</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 cool particle animation navigation menu special effects" href="http://www.php.cn/xiazai/js/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery visual form drag and drop editing code" href="http://www.php.cn/xiazai/js/8068">[form button] jQuery visual form drag and drop editing code</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="VUE.JS imitation Kugou music player code" href="http://www.php.cn/xiazai/js/8067">[Player special effects] VUE.JS imitation Kugou music player code</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Classic html5 pushing box game" href="http://www.php.cn/xiazai/js/8066">[html5 special effects] Classic html5 pushing box game</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery scrolling to add or reduce image effects" href="http://www.php.cn/xiazai/js/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="CSS3 personal album cover hover zoom effect" href="http://www.php.cn/xiazai/js/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</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/xiazai/code/8328" title="Home Decor Cleaning and Repair Service Company Website Template" target="_blank">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8327" title="Fresh color personal resume guide page template" target="_blank">[Front-end template] Fresh color personal resume guide page template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8326" title="Designer Creative Job Resume Web Template" target="_blank">[Front-end template] Designer Creative Job Resume Web Template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8325" title="Modern engineering construction company website template" target="_blank">[Front-end template] Modern engineering construction company website template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8324" title="Responsive HTML5 template for educational service institutions" target="_blank">[Front-end template] Responsive HTML5 template for educational service institutions</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8323" title="Online e-book store mall website template" target="_blank">[Front-end template] Online e-book store mall website template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8322" title="IT technology solves Internet company website template" target="_blank">[Front-end template] IT technology solves Internet company website template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8321" title="Purple style foreign exchange trading service website template" target="_blank">[Front-end template] Purple style foreign exchange trading service website template</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/xiazai/sucai/3078"  target="_blank"  title="Cute summer elements vector material (EPS PNG)">[PNG material] Cute summer elements vector material (EPS PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/sucai/3077"  target="_blank"  title="Four red 2023 graduation badges vector material (AI EPS PNG)">[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/sucai/3076"  target="_blank"  title="Singing bird and cart filled with flowers design spring banner vector material (AI EPS)">[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/sucai/3075"  target="_blank"  title="Golden graduation cap vector material (EPS PNG)">[PNG material] Golden graduation cap vector material (EPS PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/sucai/3074"  target="_blank"  title="Black and white style mountain icon vector material (EPS PNG)">[PNG material] Black and white style mountain icon vector material (EPS PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/sucai/3073"  target="_blank"  title="Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses">[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/sucai/3072"  target="_blank"  title="Flat style Arbor Day banner vector material (AI+EPS)">[banner picture] Flat style Arbor Day banner vector material (AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/sucai/3071"  target="_blank"  title="Nine comic-style exploding chat bubbles vector material (EPS+PNG)">[PNG material] Nine comic-style exploding chat bubbles vector material (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/xiazai/code/8328"  target="_blank" title="Home Decor Cleaning and Repair Service Company Website Template">[Front-end template] Home Decor Cleaning and Repair Service Company Website Template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8327"  target="_blank" title="Fresh color personal resume guide page template">[Front-end template] Fresh color personal resume guide page template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8326"  target="_blank" title="Designer Creative Job Resume Web Template">[Front-end template] Designer Creative Job Resume Web Template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8325"  target="_blank" title="Modern engineering construction company website template">[Front-end template] Modern engineering construction company website template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8324"  target="_blank" title="Responsive HTML5 template for educational service institutions">[Front-end template] Responsive HTML5 template for educational service institutions</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8323"  target="_blank" title="Online e-book store mall website template">[Front-end template] Online e-book store mall website template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8322"  target="_blank" title="IT technology solves Internet company website template">[Front-end template] IT technology solves Internet company website template</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/xiazai/code/8321"  target="_blank" title="Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</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>
<div class="phpFoot">
    <div class="phpFootIn">
        <div class="phpFootCont">
            <div class="phpFootLeft">
                <dl>
                    <dt>
                        <a href="http://www.php.cn/about/xieyi.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a>
                        <a href="http://www.php.cn/about/yinsi.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a>
                        <a href="http://www.php.cn/update/article_0_1.html"   target="_blank" title="Sitemap" class="cBlack">Sitemap</a>
                        <div class="clear"></div>
                    </dt>
                    <dd class="cont1">php.cn：Public welfare online PHP training，Help PHP learners grow quickly！</dd>
                </dl>
              
            </div>
        </div>
    </div>
    </div>

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

<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1731406132"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/>
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
</body>
</html>