html 5 common interview questions-HTML Tutorial-php.cn

1. Common block-level elements Inline element p - the most commonly used block-level element dl - block-level element used with dt-dd form - interactive form h1 -h6- title hr - horizontal separator line ol – Ordered list p - paragraph ul - unordered list fieldset - form field set colgroup-col - form column grouping element table-tr-td table and row-cell pre - formatted text a – hyperlink (anchor) br - Line break i - italic em - emphasis img - picture input - input box label - form label span - commonly used inline container, defining text blocks strong - bold emphasis sub - subscript sup - superscript textarea - multi-line text input box u - Underline select - Project selection 2. Several conditions for realizing three points of text text-overflowAttribute is only: whether to display an omission mark when the text overflows, and does not haveOthers Definition of style attributes. To achieve the effect of producing an ellipse when overflowing, you need to define:
1. Container width: width: value; (px, %, both are acceptable)
2. Mandatory text Display in one line: white-space：nowrap;
3. Overflow content is hidden: overflow: hidden;
4. Overflow text displays ellipses: text-overflow: ellipsis;
Note: It must be a single line of text to set the overflow of this article! ! !

IE6+; chrome1.0+; safari3.1+ (firefox, opera are not supported yet)

3. Several conditions for vertical centering

To set an element to be vertically centered in a container, you must change the default display attribute value to inline-block;
and add the sibling element (ruler) (sibling element [ruler] style Set to vertical-align:middle;width:0;height:100%;display:inline-block;).

Three conditions:
1: The container (parent element) must be added text-align:center;
2: The current element must be converted into an inline block element (display:inline-block;) Then add vertical-align:middle;
3: Add the sibling element span after the current element (without carriage return); and perform vertical-align on span: middle;width:0;height:100%;display:inline-block

4. Replacement elements and non-replacement elements

Replacement elements and non-replacement elements

a) Replacement elements: The browser determines the specific display content of the element based on its tags and attributes. For example: the browser will read the image information and display it based on the value of the src attribute of the tag, but if you view the (x)html code, you cannot see the actual content of the image; the type of the tag Attributes determine whether to display input boxes, radio buttons, etc. (x), ,

, <select> in html are all replacement elements. These elements often have no actual content, that is, they are empty elements. <br><br>The replacement element generates a box in its display, which is why some inline elements (img, input) can set the width and height. <br><br>b) Non-replaceable elements (non-replacement elements): (x) Most elements of html are non-replaceable elements, that is, their content is directly displayed to the user (such as a browser). <br><br>5. What is a sprite map? What are the advantages? <br><br>Image integration, integrate small single background images into one large background image. <br><br>Advantages of image integration: 1) Reduce the number of requests to the server through image integration, thereby improving the page loading speed. 2) Reduce the size of pictures by integrating them. <br><br>6. What is <a href="http://www.php.cn/code/5005.html" target="_blank">css cascading</a> style sheet? <a href="http://www.php.cn/code/6066.html" target="_blank">Priority</a>How is the algorithm calculated? <br><br>a. The priority order of importance and source from low to high is: <br>1) Browser default style <br>2) <a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>/id..... The weight of the selector<br>3) Inline style<br>4) Inline or external (writing order)<br>5)!important highest<br><br><br>7. The difference between display:none and <a href="http://www.php.cn/wiki/929.html" target="_blank">visibility</a>:hidden<br><br>The former: hidden but does not take up space The latter: hidden but takes up space<br><br>8, <a href="http://www.php.cn/code/6337.html" target="_blank">Clear float</a>Several ways<br><br>hack1: Add the declaration overflow:hidden to the parent element;<br><br>hack2: Add height to the parent element<br><br>hack3: Add space below the floating element p, and add a declaration to the element: p{<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>:both; height:0; overflow:hidden;}<br><br>hack4: Universal clearing float method p<a href="http://www.php.cn/wiki/978.html" target="_blank">:after</a>{content:“.”;clear:both;display:block;height:0;overflow:hidden; visibility:hidden;}<br><br>9. Which attributes can be <a href="http://www.php.cn/code/6064.html" target="_blank">inherited</a>? <br><br>1) Text related: <a href="http://www.php.cn/wiki/804.html" target="_blank">font-family</a>, <a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a>, <a href="http://www.php.cn/wiki/826.html" target="_blank">font-style</a>, <a href="http://www.php.cn/wiki/862.html" target="_blank">font-variant</a> ,<a href="http://www.php.cn/wiki/858.html" target="_blank">font-weight</a>,font,<a href="http://www.php.cn/wiki/865.html" target="_blank">letter-spacing</a>,<a href="http://www.php.cn/wiki/864.html" target="_blank">line-height</a>,text-align,<a href="http://www.php.cn/wiki/867.html" target="_blank">text-indent</a>,<a href="http://www.php.cn/wiki/863.html" target="_blank"> text-transform</a>, <a href="http://www.php.cn/wiki/866.html" target="_blank">word-spacing</a><br>2) List related: <a href="http://www.php.cn/wiki/954.html" target="_blank">list-style</a>-image, <a href="http://www.php.cn/wiki/955.html" target="_blank">list-style-position</a>, <a href="http://www.php.cn/wiki/956.html" target="_blank">list-style-type</a>, list-style<br>3) Color related: color<br>4) Transparency (child elements will inherit the opacity of the ancestor element, but cannot be changed) <br>Note: font-size What is inherited is the size of the parent element, not the proportion. line-height When the parent element is a percentage or px value, the child element is the same as the parent element. When the parent element is normal or a number, the line-height of the child element is the font size of the child element multiplied by the number. <br><br>10. Positioning method<br><br>position attribute value: <a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>, relative, absolute, fixed<br>1) static<br>static is the default value, and the element is located In the document flow, it is displayed normally, ignoring the <a href="http://www.php.cn/wiki/904.html" target="_blank">top</a>, <a href="http://www.php.cn/wiki/906.html" target="_blank">bottom</a>, <a href="http://www.php.cn/wiki/907.html" target="_blank">left</a>, and <a href="http://www.php.cn/wiki/905.html" target="_blank">right</a> attributes of the element. <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>The attribute is always 0.<br>2) relative<br>relative positioning, retaining the position and size occupied by the element in the document flow, determined by the left/right/top/bottom attributes Relative moving distance, the original position is retained<br>3) absolute<br><a href="http://www.php.cn/code/6074.html" target="_blank">Absolute positioning</a>, separate the <a href="http://www.php.cn/wiki/60.html" target="_blank">object</a> from the document flow, use left/right/top/bottom The other attributes are positioned absolutely relative to the closest parent element with positioning settings; if not, it is based on the body object<br>4) fixed<br>fixed is similar to absolute, but it is relative to the upper left corner of the window. Will not follow document scrolling. But if it is in a multi-frame page, it is relative to the upper left corner of the frame, not the upper left corner of the browser. <br><br>11. What is the difference between link and @import? <br><br>1. The difference between ancestors. Link belongs to the X<a href="http://www.php.cn/code/427.html" target="_blank">HTML tag</a>, and @import is completely a method provided by CSS. <br><br>2. In addition to loading CSS, the link tag can also do many other things, such as defining <a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a>, defining rel connection attributes, etc. @import can only load CSS<br><br>3. The difference in loading order. When a page is loaded (that is, when viewed by a viewer), the CSS referenced by link<a href="http://www.php.cn/wiki/231.html" target="_blank"></a> will be loaded at the same time, while the CSS referenced by @import will wait until the page is completely downloaded before being loaded. So sometimes when browsing the page where @import loads CSS, there will be no style (it just flickers) <br><br>4. Difference in compatibility. Since @import was proposed by CSS2.1, old browsers do not support it. @import can only be recognized by IE5 or above, but the link tag does not have this problem. <br><br>5. Differences when using dom to control the style. When<a href="http://www.php.cn/code/7565.html" target="_blank">using javascript</a> to control the dom to change the style, you can only use the link tag, because @import is not controllable by the dom<br><br><br>12. What are the attribute values of positioning? Is each worth it? <br><br>The role of each attribute value: <br><br>static: default value. An element whose position is set to static displays normally, always at the position given by the document flow (static elements ignore any top, bottom, left, or right declarations). <br><br>absolute: relative to the absolute positioning of the parent element, s floats out of the layout flow. It does not occupy space. It is what we call a layer. Its position is relative to the nearest positioned parent element. Position, you can directly specify the "left", "top", "right" and "bottom" attributes. If the parent is not positioned, html (root element) will be used. (Stacking order z-index: value) <br><br>relative: It is an offset positioning relative to the default position. It can be moved to a position relative to its normal position by setting the left, top, right, and bottom values. (The movement occurs relative to its own starting position, [will not disrupt the normal layout flow] <br><br>fixed: Absolute positioning relative to the browser is positioned relative to the specified coordinates of the browser window . The position of this element can be specified by the "left", "top", "right" and "bottom" attributes. The element will stay in that position regardless of whether the window is scrolled or not. <br><br>13. Write html5. <a href="http://www.php.cn/php/php-tp-append.html" target="_blank">Added 15 new labels for </a><br><br><a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a>er nav footer <a href="http://www.php.cn/wiki/646.html" target="_blank">main</a> aside article section figure datalist video audio fieldest legend label caption<br><br>14. 1. What is BFC? How is it generated? <br><br>1. Block-level formatting context<br>2. Adaptive two-column layout, clearing internal floats, and preventing vertical <a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>Overlap (put in two BFCs) <br>3. Root element, <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> attribute is not none, position is absolute or fixed, display is inline-block, table-cell, table-caption , flex, inline-flex, overflow are not visible<br><br><br>15. The difference between .px, em, rem, pt<br><br>1) px is actually pixel, use px to set the font When the size is large, it is relatively stable and accurate<br> However, there is a problem with this method. When the user browses the web page we created in the browser, if the browser is zoomed, our web<a href="http://www.php.cn/code/7955.html" target="_blank"> Page layout </a> is broken. Therefore, it was proposed to use "em" to define the font of the web page. <br>2) em scales the font size based on the baseline <br>em sets the font size relative to its parent element, so there will be a problem. To set any element, you may need to know its parent element. The size<br>3) rem is displayed relative to the font size of the root element<br>rem is relative to the root element <html>, which means that we only need to determine a reference value in the root element<br> 4) The size of pt is equal to 1/72<br> of 1 inch: it is a unit of measurement for text<br>This measurement method comes from the printing-design background and is most suitable for media, but it is also widely used Monitor<br><br>16. What are the methods to achieve vertical + horizontal centering? <br><br>1.p{width:200px;height:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin :auto;}<br><br>2, p{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px; }<br><br>17. Progressive enhancement and graceful degradation<br><br>Progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then perform effects and interactions for advanced browsers Wait for improvements and additional functions to achieve a better user experience. <br><br>Graceful degradation: Build complete functions from the beginning, and then make them compatible with lower version browsers<br><br><br>18. What are the css selectors? <br><br>1) Wildcard selector *<br>2) Type selector/element selector a<br>3) Attribute selector input[type="button"]4) Containing selector p .code a<br>5) Sub-object selector                                                                                                                                                                                                                                                           ##5 <br>Pseudo-class<br> and pseudo-object selectors p<br>:first-letter<br> a<a href="http://www.php.cn/code/6014.html" target="_blank">:hover</a><a href="http://www.php.cn/wiki/970.html" target="_blank">10) Adjacent selector li+li</a><a href="http://www.php.cn/wiki/966.html" target="_blank"> 19. The difference between animation and transition</a>The same point: they both change the attribute value of the element over time. <br><br>The difference: transition needs to trigger an <a href="http://www.php.cn/php/php-tp-incident.html" target="_blank"> event </a> (hover event or click event, etc.) before it can change its <br><br>css properties over time; animation can also be used without triggering any events. Explicitly change the element's CSS attribute value over time to achieve an <a href="http://www.php.cn/code/9595.html" target="_blank">animation</a> effect. CSS3 animation requires clear animation attribute values. <br><br>20. What are the standard <a href="http://www.php.cn/code/6444.html" target="_blank">box model</a> and the weird box model. The difference between the two, how to implement the weird box model, and the standard sum model<br><br>Standard box model: content+border+<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a> <br>Weird box model: content<br><br>a When calculating the width of the box, add border and padding and another one without adding <br><br> Weird box model implementation: box-sizing:border-box<br> Standard box model: box-sizing:content-box<br> <br><br>21. How to center an element up, down, left, and right within the parent element<br><br>1.<br>css: <br>.box{display:flex;width:800px;height:<a href="http://www.php.cn/code/4221.html" target="_blank">300</a>px;just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-content:center}<br>.box p{align-self:center}<br><br>html:<br><p class= "box"><br>  <p></p><br></p><br><br>2.<br>css:<br>.box{display:flex;width: 800px;height:800px;justify-content:center;align-items:center;}<br>html:<br><p class="box"><br> <p></p><br></p><br><br>22. What are the commonly used formats for video and audio?<br>For <a href="http://www.php.cn/code/6707.html" target="_blank">video</a>: video/ogg video/mp4 video/webm for<a href="http://www.php.cn/code/6093.html" target="_blank"> Audio</a>: audio/ogg audio/mpeg<br><br>23. Briefly explain the attributes and attribute values of the <a href="http://www.php.cn/code/10723.html" target="_blank">flexible box model</a> (write at least 6 attributes)<br><br>display:flex;<br>flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>:<br>justify-content:<br>align-items:<br>align-self:<br>align-content:<br>flex -wrap:<br><br>23. Briefly introduce the usage of linear gradient, radial gradient and repeated gradient<br><br>Linear gradient: linear-gradient()<br>Radial gradient: radial-gradient ()<br> Repeating linear gradient: repeating-linear-gradient()<br> Repeating radial gradient: repeating-radial-gradient()<br><br>24. Briefly introduce the usage of animation<br><br>animation consists of two parts: animation: animation name animation execution time animation type animation delay time animation repetition number animation direction; @<a href="http://www.php.cn/wiki/1051.html" target="_blank">key</a>frames animation name<br><br>25, the main properties of css3D And attribute value<br>1. Depth of field: perspactive:number; If you want the object to be seen larger, then set the value smaller. If you want to see the object smaller, set the value larger<br> <br>2. 3D stage: transform-style:preserve-3d;<br><br>3. translateZ() rotateZ() scaleZ()<br><br>26. The main attributes in 2D<br><br>transform:translate() rotate() skew() scale()<br>transform-origin:<br><br>27. Briefly introduce the attributes and attribute values of transition animation<br><br>transition :Attribute name (you can use <a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a>) animation execution time animation type animation delay time<br><br>28, new <a href="http://www.php.cn/code/6021.html" target="_blank">background attribute in css3</a><br><br><a href="http://www.php.cn/code/865.html" target="_blank">background-origin</a>:Background origin<br><a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>:Background clipping<br><a href="http://www.php.cn/code/872.html" target="_blank">background-size</a>:<a href="http://www.php.cn/code/8294.html" target="_blank">Background image## The size of </a>#The following are the three values of background-size<br><br>length<br>specifies the size of the background image. The first value is width, the second value is height. <br><br>Percentage(%)<br>Set the background image size as a percentage<br><br>cover<br>Expand the background image to a large enough size so that the background image completely covers the background area<br> <br><br><br>29. Write the core of the five major browsers and their representative works<br><br>*Trident: IE, Maxthon, Tencent, Theworld, 360 Browser <br><br>*Gecko:: The representative work Mozilla Firefox is an open source project <br><br>*Webkit: The representative work Safari and Chrome are an open source project. <br><br>*Presto: Representative work Opera, Presto is a browser layout engine developed by Opera Software. It is also recognized as the fastest rendering engine in the world. <br><br>*Blink: Browser layout engine developed by Google and Opera Software, released in April 2013. <br><br>30. Write down several common bugs and solutions in IE6 (at least 4) <br><br>1) The picture has a border BUG Solution: Add border:0; or border:0 to the picture none;<br><br>2. Double floating direction (double margin) Solution: display: inline<br><br>3. Default height (IE6, IE7) Solution: Add declaration to element: font-size :0; Option 2: Add a statement to the element: overflow:hidden;<br><br>4. The default sizes of button elements are different. Option: Use a tag to simulate<br><br>31. IE’s <a href="http://www.php.cn/code/120.html" target="_blank"> filter </a>What? <br><br>1, _ Underline attribute filter <br>2, \9: IE version recognition; other browsers do not recognize syntax: selector {attribute: attribute value\9;}<br>3, \ 0 : Recognized by IE8 and above; not recognized by other browsers Syntax: selector {attribute: attribute value\0;}<br><br>32. Element height collapse solutions (at least 4 types)<br>hack1: Add a declaration to the parent element overflow:hidden;<br><br>hack2: Add a height to the parent element<br><br>hack3: Add an empty p below the floating element, and add a declaration to the element: p{clear:both ; height:0; overflow:hidden;}<br><br>hack4: universal clear floating method p:after{content:“.”;clear:both;display:block;height:0;overflow:hidden; visibility: hidden;}</article><ul class=" list-paddingleft-2"></ul><p>The above is the detailed content of html 5 common interview questions. For more information, please follow other related articles on the PHP Chinese website!</p>                </div>
            </div>
            <div style="display: flex;">
                                <div class="wzconBq" style="display: inline-flex;">
                    <span>Related labels：</span>
                    <div class="wzcbqd">
                        <a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/search?word=htmlcss" target="_blank">Html/css</a>                    </div>
                </div>
                
                
            </div>
            <div class="wzconOtherwz">
                                    <a href="https://www.php.cn/faq/359949.html" title="css multi-line ellipsis compatibility writing method">
                        <span>Previous article：css multi-line ellipsis compatibility writing method</span>
                    </a>
                                    <a href="https://www.php.cn/faq/359951.html"  title="Best font size settings for mobile">
                        <span>Next article：Best font size settings for mobile</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>
            <ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
            <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="https://www.php.cn/faq/1796629438.html">The Keys to Coding: Unlocking the Power of C for Beginners</a>
                            </div>
                            <div>2024-10-13 11:44:01</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/faq/1796629203.html">Connect Your Website to Databases with PHP and MySQL</a>
                            </div>
                            <div>2024-10-13 09:56:31</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/faq/1796627843.html">Problem-Solving with Python: Unlock Powerful Solutions as a Beginner Coder</a>
                            </div>
                            <div>2024-10-11 20:58:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/faq/1796627712.html">Python Power, Simplified: A Beginner-Friendly Approach to Programming</a>
                            </div>
                            <div>2024-10-11 16:53:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/faq/1796627515.html">PHP and Social Media: Integrate Your Website with the World</a>
                            </div>
                            <div>2024-10-11 11:54:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/faq/1796627348.html">Dynamic Image Galleries with PHP: Showcase Your Work Online</a>
                            </div>
                            <div>2024-10-10 16:21:01</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/faq/1796627317.html">Build APIs and Web Services with PHP</a>
                            </div>
                            <div>2024-10-10 15:18:02</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/faq/1796627273.html">Demystifying Java: A Clear and Easy Path for New Programmers</a>
                            </div>
                            <div>2024-10-10 13:34:01</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/faq/1796627270.html">Create Games and Graphics with C: A Fun and Practical Introduction</a>
                            </div>
                            <div>2024-10-10 13:26:26</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/faq/1796627154.html">How to play Cheng Yaojin in Glory of Kings?</a>
                            </div>
                            <div>2024-10-10 11:38:42</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="https://www.php.cn/wenda/.html"  target="_blank" title="How to correctly assign paths linking HTML files and CSS files?" class="wdcdcTitle">How to correctly assign paths linking HTML files and CSS files?</a>
                            <a href="https://www.php.cn/wenda/.html" class="wdcdcCons"></a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 1970-01-01 08:00:00</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>0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/wenda/.html"  target="_blank" title="Select/extract nodes of html/text from HTML using CSS selectors" class="wdcdcTitle">Select/extract nodes of html/text from HTML using CSS selectors</a>
                            <a href="https://www.php.cn/wenda/.html" class="wdcdcCons"></a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 1970-01-01 08:00:00</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>0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/wenda/.html"  target="_blank" title="New Title: Compressed HTML Matrix Layout Design Using Pure CSS and HTML" class="wdcdcTitle">New Title: Compressed HTML Matrix Layout Design Using Pure CSS and HTML</a>
                            <a href="https://www.php.cn/wenda/.html" class="wdcdcCons"></a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 1970-01-01 08:00:00</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>0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/wenda/.html"  target="_blank" title="css and HTML styles voting management system" class="wdcdcTitle">css and HTML styles voting management system</a>
                            <a href="https://www.php.cn/wenda/.html" class="wdcdcCons"></a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 1970-01-01 08:00:00</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>0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/wenda/.html"  target="_blank" title="Looking for reliable vim html css js beauty plug-in" class="wdcdcTitle">Looking for reliable vim html css js beauty plug-in</a>
                            <a href="https://www.php.cn/wenda/.html" class="wdcdcCons"></a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> From 1970-01-01 08:00:00</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>0</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="https://www.php.cn/faq/zt" target="_blank">More>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/faq/btbetfssm"><img src="https://img.php.cn/upload/subject/202407/22/2024072213271250592.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What is a Bitcoin ETF?" /> </a>
                            <a target="_blank" href="https://www.php.cn/faq/btbetfssm" class="title-a-spanl" title="What is a Bitcoin ETF?"><span>What is a Bitcoin ETF?</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/faq/cyydsrhsjs"><img src="https://img.php.cn/upload/subject/202407/22/2024072214003727593.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Introduction to input functions in c language" /> </a>
                            <a target="_blank" href="https://www.php.cn/faq/cyydsrhsjs" class="title-a-spanl" title="Introduction to input functions in c language"><span>Introduction to input functions in c language</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/faq/dnhpqkzdyyssm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212330634000.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What is the reason why the computer screen is black but the computer is on?" /> </a>
                            <a target="_blank" href="https://www.php.cn/faq/dnhpqkzdyyssm" class="title-a-spanl" title="What is the reason why the computer screen is black but the computer is on?"><span>What is the reason why the computer screen is black but the computer is on?</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/faq/win10xzrjwfaz"><img src="https://img.php.cn/upload/subject/202407/22/2024072212173269456.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Solution to the problem that win10 download software cannot be installed" /> </a>
                            <a target="_blank" href="https://www.php.cn/faq/win10xzrjwfaz" class="title-a-spanl" title="Solution to the problem that win10 download software cannot be installed"><span>Solution to the problem that win10 download software cannot be installed</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/faq/sjhwsjdqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072214013096405.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between random and pseudo-random" /> </a>
                            <a target="_blank" href="https://www.php.cn/faq/sjhwsjdqb" class="title-a-spanl" title="The difference between random and pseudo-random"><span>The difference between random and pseudo-random</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/faq/captionsxdzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072213441026025.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The role of the caption attribute" /> </a>
                            <a target="_blank" href="https://www.php.cn/faq/captionsxdzy" class="title-a-spanl" title="The role of the caption attribute"><span>The role of the caption attribute</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/faq/consolelogyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072213433956778.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Usage of console.log" /> </a>
                            <a target="_blank" href="https://www.php.cn/faq/consolelogyf" class="title-a-spanl" title="Usage of console.log"><span>Usage of console.log</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/faq/wjfwqrjynx"><img src="https://img.php.cn/upload/subject/202407/22/2024072213552960150.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What are the file server software?" /> </a>
                            <a target="_blank" href="https://www.php.cn/faq/wjfwqrjynx" class="title-a-spanl" title="What are the file server software?"><span>What are the file server software?</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div>
    </div>

<div class="phpwzright">
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
        <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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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>1432540 <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="https://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="https://www.php.cn/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a>
                                    <div class="wzrthreerb">
                                        <div>4287825 <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="https://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="https://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a>
                                    <div class="wzrthreerb">
                                        <div>2624297 <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="https://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="https://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a>
                                    <div class="wzrthreerb">
                                        <div>513931 <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="https://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="https://www.php.cn/course/2.html">PHP zero-based introductory tutorial</a>
                                    <div class="wzrthreerb">
                                        <div>872889 <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="https://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="https://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 >1432540 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="https://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="https://www.php.cn/course/286.html">JAVA Beginner's Video Tutorial</a>
                                <div class="wzrthreerb">
                                    <div >2624297 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="https://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="https://www.php.cn/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a>
                                <div class="wzrthreerb">
                                    <div >513931 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="https://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="https://www.php.cn/course/901.html">Quick introduction to web front-end development</a>
                                <div class="wzrthreerb">
                                    <div >216714 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="https://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="https://www.php.cn/course/234.html">Master PS video tutorials from scratch</a>
                                <div class="wzrthreerb">
                                    <div >911413 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="https://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="https://www.php.cn/course/1648.html">[Web front-end] Node.js quick start</a>
                                <div class="wzrthreerb">
                                    <div >8927 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="https://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="https://www.php.cn/course/1647.html">Complete collection of foreign web development full-stack courses</a>
                                <div class="wzrthreerb">
                                    <div >7192 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="https://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="https://www.php.cn/course/1646.html">Go language practical GraphQL</a>
                                <div class="wzrthreerb">
                                    <div >6096 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="https://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="https://www.php.cn/course/1645.html">550W fan master learns JavaScript from scratch step by step</a>
                                <div class="wzrthreerb">
                                    <div >788 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="https://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="https://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 >30428 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="https://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="https://www.php.cn/toolset/js-special-effects/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="https://www.php.cn/toolset/js-special-effects/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="https://www.php.cn/toolset/js-special-effects/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="https://www.php.cn/toolset/js-special-effects/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="https://www.php.cn/toolset/js-special-effects/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="https://www.php.cn/toolset/js-special-effects/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="https://www.php.cn/toolset/js-special-effects/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="https://www.php.cn/toolset/js-special-effects/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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-materials/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="https://www.php.cn/toolset/website-materials/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="https://www.php.cn/toolset/website-materials/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="https://www.php.cn/toolset/website-materials/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="https://www.php.cn/toolset/website-materials/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="https://www.php.cn/toolset/website-materials/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="https://www.php.cn/toolset/website-materials/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="https://www.php.cn/toolset/website-materials/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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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="https://www.php.cn/toolset/website-source-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>
<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Public welfare online PHP training，Help PHP learners grow quickly！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/about/us.html">About us</a>
            <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a>
            <a href="https://www.php.cn/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>

<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://tongji.php.cn/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '9']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

</body>
</html>