What is the Difference Between :focus, :focus-visible, and :focus-within in CSS?

Table of contents

• The :focus pseudo-class
• The problem with :focus
• Interactions using the keyboard
• The :focus-visible pseudo-class
• What about :focus-within?
  • Practical use case for :focus-within
• Further reading

---

As you may know, there are three similar sounding pseudo-classes in CSS, namely :focus, :focus-visible, and :focus-within.

At the first glance, one might get confused about the difference between these and when to use which one. The good news is: these three pseudo-classes are extremely simple to understand and distinguish from one another.

In this article, we shall understand what exactly is :focus, :focus-visible, and :focus-within, and when and how to use each one of these pseudo-classes.

Further reading:
If you need a refresher on pseudo-classes, hop over to the chapter CSS Pseudo Classes, in our CSS course.

---

The :focus pseudo-class

First things first, the :focus pseudo-class applies to an element when it's focused.

This focus can be made using the mouse (when we click on the element), the keyboard (when we navigate to it by pressing Tab), or the underlying program (when we use JavaScript).

Further reading:
You can explore the :focus pseudo-class in detail in CSS Pseudo Classes: :focus.

Furthermore, only focusable elements are allowed to receive focus and, therefore, be the subject of :focus. These are typically interactive elements in HTML — the likes of , , <button>, and so on.</p> <p><strong>? Notice</strong>: Non-interactive elements such as <p>, <h1>, <blockquote>, <code>, etc., aren't focusable and therefore can't be the subject of :focus. It's only if we explicitly make them focusable, by setting the tabindex attribute on them, that we can expect :focus to apply to them.</p> <p>Coming back to :focus, this pseudo-class is used to select and, thereafter, apply styles to elements when they are in the focused state.</p> <p>Perhaps, the most naive example of doing so would be to consider an input field as demonstrated below:<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><label> <span>Name</span> <input type="text" name="name"> </label> </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p>Live Example</p> <p>The moment we click on the input field, it receives focus and, consequently, the browser applies a black outline to it, as illustrated below:</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173805157333247.png" alt="The input field focused" loading="lazy" style="max-width:90%" style="max-width:90%"></p> <p>This helps us immediately see which input are we currently in within a form of many input fields.</p> <p>To better appreciate the benefit of this, imagine the opposite. Suppose we click on an input field and have no special styling applied to the field as we do so.</p> <p><em>What do you think, would it be possible for us to determine which input are we currently in?</em> Well, it clearly won't be impossible to do so but NOT that quick either.</p> <p>The ideal thing in designing user interfaces of any kind is to <em>'make everything as easy as possible.'</em> And in this case, this ideal world can very easily be achieved just by employing the :focus pseudo-class.</p> <p>In essence:</p> <p>The :focus pseudo-class (even the other two focus pseudo-classes) helps us <strong>improve the accessibility</strong> of a webpage.</p> <p>By clearly communicating to the user visually as to where he currently is on the webpage, we make it easy enough for him to interact with the webpage and get his work done without any confusion.</p> <p>In other words, :focus is more important of a pseudo-class than we might think it is.</p> <p>But it's not the only important focus-based pseudo-class; we have <strong>:focus-visible</strong> as well.</p> <hr> <h2> The problem with :focus </h2> <p>In the example above for :focus, we considered a basic, text input field. Let's now shift to a button in order to see a shortcoming of :focus.</p> <p>Consider the following button, with the added :focus rule for it:<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><label> <span>Name</span> <input type="text" name="name"> </label> </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><button>A button</button> </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p>Live Example</p> <p>The moment we click on the button, we get the desired blue outline, as illustrated below:</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173805157468987.png" alt="The button focused" loading="lazy" style="max-width:90%" style="max-width:90%"></p> <p><em>But wait a second? Is this desire of us desirable?</em></p> <p>Said another way: <em>Is it a wise decision to showcase the outline when we click on the button using the mouse?</em> As it turns out, NO, it's not!</p> <p>Let's understand why...</p> <p>When we click on a button — or any interactive element, in general, that is meant to <strong>perform an action</strong>, for e.g. a link — we already know where we are on the webpage. Obviously, because we click consciously on the button, we certainly can't be confused about which element on the webpage currently has focus — we clearly know that it's the button we just clicked that has the focus currently.</p> <p>In this respect, it does NOT make much sense, if at all, to visually emphasize the button to be the currently focused element.</p> <p><em>But why does this make sense for input fields?</em></p> <p>Good question. You're right in your observation that :focus works absolutely fine when we use it on input fields and there's a simple reason for it. When we click on an input field using the mouse, our <strong>job doesn't finish</strong>; we still have to enter data into the field.</p> <p>And because our work isn't done yet, we quickly and clearly need to know which input is currently active.</p> <p>Most importantly notice the important, yet subtle, distinction between input fields and buttons (and other suchlike interactive elements):</p> <ul> <li>An input field doesn't accomplish a task <em>immediately</em> and therefore requires focus to be visualized even when we use the mouse to interact with it.</li> <li>A button accomplishes a task immediately (for e.g. adds an item to a cart) and therefore doesn't pose the need to visually showcase it in its focused state when we interact with it using the mouse.</li> </ul> <p>So, at this point, we know that input fields gel nicely with the :focus pseudo-class but that's not the case with buttons.</p> <p>But keep in mind that this reasoning only applies to when we interact with these elements using the mouse. <em>What happens when we shift to a keyboard?</em></p> <p>Let's find out...</p> <hr> <h2> Interactions using the keyboard </h2> <p>As you may know, it isn't only possible to navigate around a webpage using the mouse; we can use the keyboard for this as well, and <em>equally well</em>.</p> <p>In fact, if a webpage is built this way to only entertain mouse interactions, it's extremely inaccessible.</p> <p>Imagine someone broke their mouse device and now wants to prepare for their exam, and that there's no way to order another one at the moment. The worst case would be if that person wanted to prepare from a website built only around mouse interactions.</p> <p>As CSS developers, we must acknowledge this fact and design websites to be as accessible without a mouse as with it. In this respect, we must make sure to provide necessary visual emphasis on interactive elements when they receive focus.</p> <p><strong>And this now includes buttons as well.</strong></p> <p>Let's state this again.</p> <p>When we're using the mouse to interact with a webpage, creating visual emphasis for buttons (and similar elements) in their focused state isn't necessary; in fact, it's undesirable as we saw above. This is because the user already knows that after clicking on the button, it is the one that comes in focus.</p> <p>But when we're using the keyboard instead, <strong>creating visual emphasis is utmost necessary</strong>. This is because, now, the user isn't aware of which interactive element is in focus. We <em>need</em> to visually showcase this.</p> <p>The problem is that we can't use :focus for this styling concern because... <em>well</em>... it applies to button even when we interact with them using the mouse.</p> <p><em>Now what?</em></p> <p>No need to worry, for we have <strong>:focus-visible</strong> to the rescue!</p> <hr> <h2> The :focus-visible pseudo-class </h2> <p>I stress a lot on the fact that before getting to learn anything in programming, first gaze over its nomenclature (a fancy word for <em>'naming'</em>). Chances are high that the meaning lies in the name itself.</p> <p>Following this, if we analyze the name :focus-visible, it clearly has something to do with <em>'focus'</em> but also something to do with <em>'visible'</em>.</p> <p><em>Can you figure out just by the name what this pseudo-class means?</em></p> <p>Well, :focus-visible applies to an element that is in focus <em>and</em> whose focus needs to be made visible (ideally). Compactly, we could also say that :focus-visible applies to an element that ought to have its <em>focus visible</em>.</p> <p>:focus-visible only shows up when we bring an element in focus using the keyboard, or some other non-mouse interaction (for e.g. using JavaScript).</p> <p>Most importantly — and this is really really important — <strong>:focus-visible does NOT apply to buttons (and suchlike elements) when they receive focus by virtue of mouse interactions</strong>.</p> <p>With this, let's go back to our <button> example above and replace the :focus rule with :focus-visible so that the outline is only presented when the button receives focus via the keyboard:<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><label> <span>Name</span> <input type="text" name="name"> </label> </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p>Live Example</p> <p>Here's what we get when we click on the button (using the mouse):</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173805157579222.png" alt="The button (with a :focus-visible style) focused again" loading="lazy" style="max-width:90%" style="max-width:90%"></p> <p>Nothing.</p> <p>But when we press the Tab key in order to navigate to the button and bring it in focus, we get the same outline as before:</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173805157664076.png" alt="The button focused via the keyboard" loading="lazy" style="max-width:90%" style="max-width:90%"></p> <p>This brings us right at the ultimate conclusion that when styling buttons (or other suchlike elements, for e.g. <a>), we must preferably use :focus-visible instead of :focus (for reasons we saw above).</p> <p>:focus-visible is basically a win-win situation in that (a) we don't apply styles when buttons are clicked, and therefore focused, using the mouse and (b) we do make sure that our webpage remains accessible when using the keyboard with necessary focus styles on buttons.</p> <p><em>:focus-visible is a hero! (But I don't know the movie's name!)</em></p> <hr> <h2> What about :focus-within? </h2> <p>Obviously, we couldn't end this article without going over the less useful <strong>:focus-within</strong> pseudo-class. Let's do that now.</p> <p>:focus-within, as the name suggests (<em>remember to read names carefully</em>), applies to an element that has <em>focus within it</em>.</p> <p>In other words, any element that contains a descendant element that matches :focus, or itself matches :focus, is a candidate for :focus-within.</p> <p>Following is an example:<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><button>A button</button> </pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div> <p>We have a button contained inside a <div>. Our goal is to style the <div> specially when its button is in focus. The following CSS accomplishes this:<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">button:focus { outline: 3px solid blue; } </pre><div class="contentsignin">Copy after login</div></div> <p>Live Example</p> <p>The moment the button receives focus, the <div> gets a pink background color.</p> <p><em>Pretty basic.</em></p> <p><strong>? Notice</strong>: Keep in mind that :focus-within behaves exactly like :focus in that it also shows up on mouse interactions on buttons, for example. It does NOT exhibit a behavior similar to :focus-visible.</p> <p>Now you might be looking for a more practical example of :focus-within and that's precisely what I have up next for you.</p> <p>As stated earlier, :focus-within isn't that commonly used in CSS but some cases are such that they can be solved pretty elegantly using :focus-within. Read on to learn about such a case.</p> <h3> Practical use case for :focus-within </h3> <p>Suppose we have an accessibility bar on a website that only shows up when using keyboard navigation. Initially, it's hidden but only visually; that is, it's possible to tab to either of the buttons inside this bar.</p> <p><strong>? Notice</strong>: <em>'Hidden only visually'</em> means that the element doesn't have display: none or visibility: hidden set on it to otherwise actually hide it. For instance, opacity: 0 hides an element only visually.</p> <p>Now, the moment any of the buttons in this accessibility bar comes into focus, it's required to showcase this bar to the user.</p> <p><em>But how to select the accessibility bar when either of its buttons has focus?</em> Well, supposing that the bar can be selected by the class selector .a11y-bar (<em>'a11y'</em> is a short form for <em>'accessibility'</em>), the desired selector would be .a11y-bar:focus-within.</p> <p>.a11y-bar:focus-within selects the .a11y-bar whenever focus resides within it, which is exactly what we need.</p> <p><em>Good job!</em></p> <p>The link below demonstrates this example:</p> <p>Live Example</p> <hr> <h2> Further reading </h2> <p>Despite the fact that we've covered almost everything that we need to know about :focus, :focus-visible, and :focus-within, there still is value in reading further from some resources as mentioned below:</p> <ul> <li>Using CSS :focus-visible to provide keyboard focus indication — WCAG 2.1 Techniques</li> <li>Understanding Success Criterion 2.4.7: Focus Visible | WAI | W3C</li> <li>9.3. The Input Focus Pseudo-class: :focus — Selectors Level 4 | W3C</li> <li>9.4. The Focus-Indicated Pseudo-class:: :focus-visible — Selectors Level 4 | W3C</li> <li>9.5. The Focus Container Pseudo-class: :focus-within — Selectors Level 4 | W3C</li> </ul> <hr> <h2> Learn CSS today </h2> <p>If you're a newbie in CSS and want to learn the basics well, consider the CSS course on Codeguage.</p> <p>The above is the detailed content of What is the Difference Between :focus, :focus-visible, and :focus-within in CSS?. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div style="height: 25px;"> <div style="display: inline-flex;float: right; color:#333333;">source：dev.to</div> </div> <div class="wzconOtherwz"> <a href="https://www.php.cn/faq/1796761860.html" title="Aligning elements in CSS"> <span>Previous article：Aligning elements in CSS</span> </a> <a href="https://www.php.cn/faq/1796762054.html" title="what is cssmin.js"> <span>Next article：what is cssmin.js</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> </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/176411.html" target="_blank" title="function_exists() cannot determine the custom function" class="wdcdcTitle">function_exists() cannot determine the custom function</a> <a href="https://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>3</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2609</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/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="https://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>11</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>2734</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/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="https://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>2323</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/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="https://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>2183</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/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="https://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>2285</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/csszdivdhy"><img src="https://img.php.cn/upload/subject/202407/22/2024072211494531801.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The meaning of div in css" /> </a> <a target="_blank" href="https://www.php.cn/faq/csszdivdhy" class="title-a-spanl" title="The meaning of div in css"><span>The meaning of div in css</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/xnbph"><img src="https://img.php.cn/upload/subject/202407/22/2024072212320880113.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Virtual currency trading platform APP ranking" /> </a> <a target="_blank" href="https://www.php.cn/faq/xnbph" class="title-a-spanl" title="Virtual currency trading platform APP ranking"><span>Virtual currency trading platform APP ranking</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/vbajc"><img src="https://img.php.cn/upload/subject/202407/22/2024072214430517311.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="vba tutorial" /> </a> <a target="_blank" href="https://www.php.cn/faq/vbajc" class="title-a-spanl" title="vba tutorial"><span>vba tutorial</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/wordpressseo"><img src="https://img.php.cn/upload/subject/202407/22/2024072214065484058.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="wordpress seo" /> </a> <a target="_blank" href="https://www.php.cn/faq/wordpressseo" class="title-a-spanl" title="wordpress seo"><span>wordpress seo</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/bdgjcyhrj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214082364592.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Baidu keyword optimization software" /> </a> <a target="_blank" href="https://www.php.cn/faq/bdgjcyhrj" class="title-a-spanl" title="Baidu keyword optimization software"><span>Baidu keyword optimization software</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/dnkjcxywzmkbl"><img src="https://img.php.cn/upload/subject/202407/22/2024072213352720419.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What should I do if English letters appear when I turn on the computer and the computer cannot be turned on?" /> </a> <a target="_blank" href="https://www.php.cn/faq/dnkjcxywzmkbl" class="title-a-spanl" title="What should I do if English letters appear when I turn on the computer and the computer cannot be turned on?"><span>What should I do if English letters appear when I turn on the computer and the computer cannot be turned on?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/htmlzembqdzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072213321954675.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The role of em tag in html" /> </a> <a target="_blank" href="https://www.php.cn/faq/htmlzembqdzy" class="title-a-spanl" title="The role of em tag in html"><span>The role of em tag in html</span> </a> </li> <li class="ul-li"> <a target="_blank" href="https://www.php.cn/faq/linuxxtngbbhy"><img src="https://img.php.cn/upload/subject/202407/22/2024072212103087183.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Which version of linux system is easy to use?" /> </a> <a target="_blank" href="https://www.php.cn/faq/linuxxtngbbhy" class="title-a-spanl" title="Which version of linux system is easy to use?"><span>Which version of linux system is easy to use?</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="How to set css to exceed the display ellipses" href="https://www.php.cn/faq/482865.html">How to set css to exceed the display ellipses</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to set font size in css" href="https://www.php.cn/faq/469426.html">How to set font size in css</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to use hover in css" href="https://www.php.cn/faq/417948.html">How to use hover in css</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to set character spacing in css" href="https://www.php.cn/faq/482889.html">How to set character spacing in css</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What are the new features of css3" href="https://www.php.cn/faq/415878.html">What are the new features of css3</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>1430235 <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>4282459 <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>2600974 <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>512255 <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>870446 <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 >1430235 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 >2600974 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 >512255 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 >216499 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 >906093 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 >8575 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 >6845 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 >5691 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 >762 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 >29122 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 src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1738191609"></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> <!-- Matomo --> <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> <!-- End Matomo Code --> </body> </html>