A detailed introduction to the HTML5 Placeholder attribute

Placeholder (A detailed introduction to the HTML5 Placeholder attribute) is a new HTML attribute in HTML5, which is used to provide prompt information for the expected value of the input field. It has been widely supported by mainstream browsers and is very simple to use:

This attribute is applicable to </code>multi-line text box and <code>type</code>attribute value is text, password, search, tel, url or email, etc. <code><input> ;</code>. <p></p><p> <img src="https://img.php.cn/upload/article/000/000/194/66eda5290ea819ebfa483cfd04ac08b5-0.png" alt="A detailed introduction to the HTML5 Placeholder attribute"> <p></p> <h3>Custom style</h3><p>If you want to change the default rendering style of A detailed introduction to the HTML5 Placeholder attribute, you should use the <code>::A detailed introduction to the HTML5 Placeholder attribute</code>pseudo-element selector, but There is currently no browser support, so it can only be defined separately according to the different implementation methods of different browsers: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute { /* Chrome/Safari/Opera */ color: green;}::-moz-A detailed introduction to the HTML5 Placeholder attribute { /* Firefox 19+ */ color: green;}:-ms-input-A detailed introduction to the HTML5 Placeholder attribute { /* IE 10+ 注意这里只有一个冒号 */ color: green;}</pre> <div class="contentsignin"> Copy after login </div> </div><p> Why should the styles be defined separately? If they are combined together like the following: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute,::-moz-A detailed introduction to the HTML5 Placeholder attribute { color: green;}</pre> <div class="contentsignin"> Copy after login </div> </div><p> You should not write selectors for different browsers together, as this will cause the entire rule set to be ignored due to unrecognized selectors (except of course for browsers with strong error handling capabilities like IE 7) , but this has nothing to do with IE 7). <p></p> <h3>Changes in Firefox definition methods</h3><p>If you need to be compatible with older versions of Firefox browsers, you also need to add the following style rule with only one colon: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">:-moz-A detailed introduction to the HTML5 Placeholder attribute { /* Firefox 4 - 18 */ color: green;}</pre> <div class="contentsignin"> Copy after login </div> </div><p>Because from Firefox 19 The pseudo-class definition method that starts with a colon <code>:-moz-A detailed introduction to the HTML5 Placeholder attribute</code>is abandoned and switched to the pseudo-element definition method with two colons. At the same time, it also adds a default <code>opacity: 0.54</code>opacity style, which can be overridden if necessary, otherwise the text is translucent: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">::-moz-A detailed introduction to the HTML5 Placeholder attribute { color: green; opacity: 1;}</pre> <div class="contentsignin"> Copy after login </div> </div> <h3>pseudo-class and Pseudo-element</h3><p>What is the difference between pseudo-class and pseudo-element? Pseudo-class can be understood as adding a class to an element, such as <code>:first-child</code>Pseudo-class, select the first child element: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">p:first-child { font-size: 16px;}</pre> <div class="contentsignin"> Copy after login </div> </div><p> can also be understood as the current state of the element , you can also achieve similar effects by adding a real class: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">p.first-child { font-size: 16px;}</pre> <div class="contentsignin"> Copy after login </div> </div><p>Whether it is a pseudo class or a real class, the style is added directly to the <code><p></code>element . <p></p><p>The pseudo element can be understood as adding a virtual element. For example, the <code>p:before</code>pseudo element can be understood like the following pseudocode: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;"><before>p:before</before><p>paragraph</p></pre> <div class="contentsignin"> Copy after login </div> </div><p>Here <code><p></code>element and <code>p:before</code>can be understood as two different elements. If you are confused, it doesn’t matter. After all, this is not the focus of this article. For more information about pseudo-elements and pseudo-classes, please refer to Pseudo-classes - CSS | MDN and Pseudo-elements - CSS | MDN <p></p> <h3>About pseudo-classes Problems caused by selectors</h3><p>Because IE browser uses pseudo-class <code>:-ms-input-A detailed introduction to the HTML5 Placeholder attribute</code>selector to define the style of A detailed introduction to the HTML5 Placeholder attribute. In fact, the style is applied to the text input box Yes, if there are other more specific style rules for the selector of the text input box, this style will be overwritten. Refer to the following code: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">input:-ms-input-A detailed introduction to the HTML5 Placeholder attribute { /* 0, 0, 1, 1 */ color: green;}#username { /* 0, 1, 0, 0 */ color: blue;}</pre> <div class="contentsignin"> Copy after login </div> </div><p>The numbers in the comments are used to represent the selector. specificity. <p></p><p> Among the above two style rules, the use of ID selectors is more specific, so when testing in IE 10/11, you will see that the A detailed introduction to the HTML5 Placeholder attribute is displayed in blue, which is a bit different from what you expected. Older versions of Firefox that also use pseudo-class selectors will also have this problem. Therefore, you need to pay special attention when writing styles. If you are really unsure, don't forget that there are <code>!important</code>rules that can be used. Other browsers that use pseudo-element selectors with two colons will not have this problem, for example: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">input::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute { /* 0, 0, 0, 2 */ color: green;}#username { /* 0, 1, 0, 0 */ color: blue;}</pre> <div class="contentsignin"> Copy after login </div> </div><p>The above two style rules will not affect each other. Use Chrome to test that the color of the A detailed introduction to the HTML5 Placeholder attribute is green. <p></p><p> Regarding the particularity of selectors, you can refer to my work The Particularity and Importance of CSS Selectors. <p></p> <h3>Keep the behavior consistent</h3><p>Although the style can be customized, there are still some differences in behavior. In Chrome and Firefox, the A detailed introduction to the HTML5 Placeholder attribute will disappear only when content is entered in the text input box and cleared. It will be displayed again when the content is entered; in IE, the A detailed introduction to the HTML5 Placeholder attribute disappears when the text input box gains focus, and will redisplay when it loses focus and no content is entered. If you want to achieve the effect of disappearing after getting focus in browsers such as Chrome and Firefox, you can use the <code>:focus</code>pseudo-class selector to set the text color of the A detailed introduction to the HTML5 Placeholder attribute to transparent: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">:focus::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute { color: transparent;}</pre> <div class="contentsignin"> Copy after login </div> </div><p>When When the text input box gets focus, the color of the A detailed introduction to the HTML5 Placeholder attribute is set to transparent, and it feels like it disappears. <p></p> <h3>JavaScript</h3><p>To obtain or modify the content of A detailed introduction to the HTML5 Placeholder attribute, just directly obtain or modify the value of the <code>A detailed introduction to the HTML5 Placeholder attribute</code>attribute of the corresponding text input box: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input').attr('A detailed introduction to the HTML5 Placeholder attribute', 'Please enter your name');</pre> <div class="contentsignin"> Copy after login </div> </div><p>So easy , my mother no longer has to worry about me writing code. However, it is estimated that it is difficult to directly operate pseudo-element objects through JavaScript like ordinary DOM elements. Currently, you can use the <code>window.getComputedStyle()</code>method to get its style attributes. The second parameter of this method is A pseudo element: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">window.getComputedStyle(document.getElementById('username'), '::-moz-A detailed introduction to the HTML5 Placeholder attribute').getPropertyValue('color'); // "rgb(0, 255, 0)"</pre> <div class="contentsignin"> Copy after login </div> </div><p> If you want to modify the style of the A detailed introduction to the HTML5 Placeholder attribute pseudo element through JavaScript, a better way is to predefine several different styles: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">.style-1::-moz-A detailed introduction to the HTML5 Placeholder attribute { color: green;}.style-2::-moz-A detailed introduction to the HTML5 Placeholder attribute { color: red;}</pre> <div class="contentsignin"> Copy after login </div> </div><p>然后通过切换文本输入框的 <code>class</code>属性来实现修改样式的目的： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input').addClass('style-2').removeClass('style-1');</pre> <div class="contentsignin"> Copy after login </div> </div><p>另外也可以通过直接添加样式规则来实现。 <p></p> <h3>Polyfill</h3><p>对于不支持该属性的浏览器，会简单地忽略掉。原则上，A detailed introduction to the HTML5 Placeholder attribute 仅仅是用来对期望的输入起个提示的作用，对于不支持的浏览器在可用性上不受任何影响。如果需要兼容，那么应该使用特性检测的方式，针对不支持的浏览器使用 Polyfill，对于支持的浏览器来说，原生的当然是最好。 <p></p><p>判断浏览器是否支持 <code><input></code>元素的 <code>A detailed introduction to the HTML5 Placeholder attribute</code>属性，可以引入 Modernizr 库来判断： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">if (!Modernizr.input.A detailed introduction to the HTML5 Placeholder attribute) { // 做点什么事}</pre> <div class="contentsignin"> Copy after login </div> </div><p>也可以自己写判断，简单易行的办法就是生成一个 <code><input></code>元素对象，并判断该元素对象是否具有 <code>A detailed introduction to the HTML5 Placeholder attribute</code>属性： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'A detailed introduction to the HTML5 Placeholder attribute' in document.createElement('input')</pre> <div class="contentsignin"> Copy after login </div> </div><p>同理，对于 <code><textarea></code>元素也是一样： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">'A detailed introduction to the HTML5 Placeholder attribute' in document.createElement('textarea')</pre> <div class="contentsignin"> Copy after login </div> </div><p>另外，Opera Mini 明明不支持 A detailed introduction to the HTML5 Placeholder attribute 属性，却装成自己很懂的样子。这时候可以使用客户端检测技术来将之排除掉，Opera Mini 的 window 对象包含一个 operamini 对象： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">({}).toString.call(window.operamini) === '[object OperaMini]'</pre> <div class="contentsignin"> Copy after login </div> </div><p>结合起来就是这样： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">if (!('A detailed introduction to the HTML5 Placeholder attribute' in document.createElement('input')) || ({}).toString.call(window.operamini) === '[object OperaMini]') { // 做点什么事}</pre> <div class="contentsignin"> Copy after login </div> </div><p>在编写 Polyfill 的时候应该尽量与原生功能保持一致，我这里选择向 IE 的方式看齐，即当文本输入框获取或失去焦点的时候处理 A detailed introduction to the HTML5 Placeholder attribute 是否显示，将文本输入框的 <code>value</code>值设置为 <code>A detailed introduction to the HTML5 Placeholder attribute</code>的值来模拟显示 A detailed introduction to the HTML5 Placeholder attribute 的状态。再添加上事件处理程序，当文本输入框获取焦点时如果 <code>value</code>的值为 A detailed introduction to the HTML5 Placeholder attribute 则清空文本输入框；当文本输入框失去焦点时如果 <code>value</code>值为空则将 A detailed introduction to the HTML5 Placeholder attribute 的内容赋给它，同时当 A detailed introduction to the HTML5 Placeholder attribute 显示的时候应该给文本输入框添加一个 <code>class="A detailed introduction to the HTML5 Placeholder attribute"</code>用来设置样式以区别是显示的 A detailed introduction to the HTML5 Placeholder attribute 和还是显示的普通 value： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">// 做点什么事$('input[A detailed introduction to the HTML5 Placeholder attribute]').on('focus', function() { var $this = $(this); if (this.value === $this.attr('A detailed introduction to the HTML5 Placeholder attribute') && $this.hasClass('A detailed introduction to the HTML5 Placeholder attribute')) { this.value = ''; $this.removeClass('A detailed introduction to the HTML5 Placeholder attribute'); }}).on('blur', function() { var $this = $(this); if (this.value === '') { $this.addClass('A detailed introduction to the HTML5 Placeholder attribute'); this.value = $this.attr('A detailed introduction to the HTML5 Placeholder attribute'); }});</pre> <div class="contentsignin"> Copy after login </div> </div><p>这只是一个简单的模拟实现，实际上还有很多需要处理的情况。 <p></p> <h4>处理密码输入框</h4><p>如果需要处理 A detailed introduction to the HTML5 Placeholder attribute 的是个密码输入框，它的 <code>value</code>值会显示为圆点之类的字符，呈现几个莫名其妙的圆点来作为 A detailed introduction to the HTML5 Placeholder attribute 提示恐怕不妥，因此需要特殊对待一下，将密码输入框拷贝一份出来然后修改其 <code>type</code>属性为 'text' 来替代显示 A detailed introduction to the HTML5 Placeholder attribute，并把原本的密码输入框隐藏： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$('input[A detailed introduction to the HTML5 Placeholder attribute]').on('blur', function() { var $this = $(this); var $replacement; if (this.value === '') { // 失去焦点时值为空则显示 A detailed introduction to the HTML5 Placeholder attribute if (this.type === 'password') { $replacement = $this.clone().attr('type', 'text'); $replacement.data('A detailed introduction to the HTML5 Placeholder attribute-password', $this); // 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框 $replacement.on('focus', function() { $(this).data('A detailed introduction to the HTML5 Placeholder attribute-password').show().focus(); $(this).remove(); }); $this.after($replacement).hide(); $this = $replacement; } $this.addClass('A detailed introduction to the HTML5 Placeholder attribute'); $this[0].value = $this.attr('A detailed introduction to the HTML5 Placeholder attribute'); }});</pre> <div class="contentsignin"> Copy after login </div> </div><p>对于 IE 8 来说它不支持修改 input 元素的 type 属性，使用 jQuery 的 .attr() 方法来修改的话只会默默地失败。此时，可以新建一个文本输入框，然后把密码输入框上的属性赋给这个新建的文本输入框： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">try { $replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下会报错} catch(e) { $replacement = $('<input>').attr({ 'type': 'text', 'class': this.className // 还可以赋予 id, name 等属性 });}</pre> <div class="contentsignin"> Copy after login </div> </div><p>需要注意的是 id 和 name 属性不要重复了，可以先用一个变量保存下来，再用 .removeAttr() 方法来删除属性。 <p></p> <h4>处理表单提交</h4><p>当表单提交的时候应该将那些正在显示 A detailed introduction to the HTML5 Placeholder attribute 的文本输入框过滤掉，毕竟没有必要将那些没有用的数据提交给服务器，在提交时候将那些文本输入框的 <code>value</code>值设为空，提交之后再恢复成显示 A detailed introduction to the HTML5 Placeholder attribute 的状态： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$(document).on('submit', 'form', function() { var $input = $('.A detailed introduction to the HTML5 Placeholder attribute', this); $input.each(function() { this.value = ''; }); setTimeout(function() { $input.each(function() { this.value = $(this).attr('A detailed introduction to the HTML5 Placeholder attribute'); }); }, 10);});</pre> <div class="contentsignin"> Copy after login </div> </div> <h4>离开页面时</h4><p>当用户离开页面时也需要清空正在显示 A detailed introduction to the HTML5 Placeholder attribute 的文本输入框，防止浏览器记住文本输入框当前的值，这里可以给 window 对象绑定一个 <code>beforeunload</code>事件来处理： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">$(window).on('beforeunload', function() { $('.A detailed introduction to the HTML5 Placeholder attribute').each(function() { this.value = ''; });});</pre> <div class="contentsignin"> Copy after login </div> </div><p>另外还需要考虑的问题： <p></p> <ul class=" list-paddingleft-2"> <li><p>使用代码给一个文本输入框赋值时，应该同时处理 A detailed introduction to the HTML5 Placeholder attribute 的状态。<p></p></li> <li><p>使用代码获取一个正在显示 A detailed introduction to the HTML5 Placeholder attribute 的文本输入框的值的时候应该得到的是一个空字符串。<p></p></li> </ul><p>如此多的问题也就是说无论 Polyfill 写到如何极致，都很难与原生的功能相提并论，因此推荐的方式使用特性检测技术仅针对不支持的浏览器做 Polyfill，而 Polyfill 的功能应尽可能地向原生功能看齐。 <p></p> <h3>总结</h3><p>将所有样式总结起来： <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"> <pre class="brush:html;toolbar:false;">input::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute, textarea::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute { color: #999;}input::-moz-A detailed introduction to the HTML5 Placeholder attribute, textarea::-moz-A detailed introduction to the HTML5 Placeholder attribute { color: #999; opacity: 1;}input:-ms-input-A detailed introduction to the HTML5 Placeholder attribute, textarea:-ms-input-A detailed introduction to the HTML5 Placeholder attribute { color: #999;}.A detailed introduction to the HTML5 Placeholder attribute { color: #999;}input:focus::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute, textarea:focus::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute { color: transparent;}input:focus::-moz-A detailed introduction to the HTML5 Placeholder attribute, textarea:focus::-moz-A detailed introduction to the HTML5 Placeholder attribute { color: transparent;}</pre> <div class="contentsignin"> Copy after login </div> </div><p>Polyfill 可以直接使用这个 jQuery 插件 mathiasbynens/jquery-A detailed introduction to the HTML5 Placeholder attribute，已经相当完善了。 <p></p> <p>The above is the detailed content of A detailed introduction to the HTML5 Placeholder attribute. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Related labels：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=html5，placeholder" target="_blank">HTML5 ，Placeholder</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;"> source：php.cn </div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/faq/357704.html" title=""><span>Previous article：Summary details of html5 common tags</span></a> <a href="//m.sbmmt.com/faq/357707.html" title=""><span>Next article：Use HTML5/CSS3 to quickly create special effects code examples for sticky notes in five steps (pictures and text)</span></a> </div> <div class="wzconShengming"> <div class="bzsmdiv"> Statement of this Website </div> <div> The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn </div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle"> Latest Articles by Author </div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/377601.html">Video material on building your own PHP framework from scratch</a> </div> <div> 2023-03-15 16:54:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/377137.html">Example analysis of how PHPMailer uses QQ mailbox to complete the email sending function</a> </div> <div> 2023-03-15 12:26:02 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/376186.html">Introduction to how to receive emails in IMAP in php</a> </div> <div> 2023-03-14 18:58:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/375194.html">Example of how to quickly implement array deduplication in PHP</a> </div> <div> 2023-03-14 11:30:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/369412.html">Summary of the use of all attributes of the</a> <a>tag in html</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/379971.html">Summary of basic knowledge of PHP (necessary for beginners to get started)</a> </div> <div> 2023-03-16 15:20:01 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/381607.html">Introduction to the use of typeof in JavaScript</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/382066.html">Introduction to the use of confirm() method in JavaScript</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/357705.html">A detailed introduction to the HTML5 Placeholder attribute</a> </div> <div> 1970-01-01 08:00:00 </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/380149.html">How to implement single-select, multiple-select and reverse-select in forms in ReactJS</a> </div> <div> 1970-01-01 08:00:00 </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="//m.sbmmt.com/wenda/173456.html" target="_blank" title="Vue js: Troubleshooting - Reading '$refs' property of undefined" class="wdcdcTitle">Vue js: Troubleshooting - Reading '$refs' property of undefined</a> <a href="//m.sbmmt.com/wenda/173456.html" class="wdcdcCons">Getting the error Cannot read property of undefined (reading '$refs') even though I have a...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2023-11-07 23:34:12</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>305 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/173309.html" target="_blank" title="How to trigger input focus event inside method in Vue.js?" class="wdcdcTitle">How to trigger input focus event inside method in Vue.js?</a> <a href="//m.sbmmt.com/wenda/173309.html" class="wdcdcCons">I have an input that uses the following event: <b-nputclass="input"id="l...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2023-10-29 23:56:42</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>2 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>270 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/173075.html" target="_blank" title="How to set HTML5's required attribute using Javascript?" class="wdcdcTitle">How to set HTML5's required attribute using Javascript?</a> <a href="//m.sbmmt.com/wenda/173075.html" class="wdcdcCons">I'm trying to mark a text input box as required in Javascript. <inputid="edName&qu...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2023-10-13 08:52:25</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"> <b class="wdcdcirpli"></b>2 </div> <div class="wdcdcirwatch flexRow ira"> <b class="wdcdcirwatchi"></b>317 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172445.html" target="_blank" title="Problem with not getting accurate mouse coordinates: using HTML5 canvas when resizing the page" class="wdcdcTitle">Problem with not getting accurate mouse coordinates: using HTML5 canvas when resizing the page</a> <a href="//m.sbmmt.com/wenda/172445.html" class="wdcdcCons">I want to create this pixel effect from a front-end expert. Although I can achieve the ent...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2023-09-12 12:20:33</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>280 </div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172281.html" target="_blank" title="The difference between CSS attribute selectors and pseudo-elements for input tags" class="wdcdcTitle">The difference between CSS attribute selectors and pseudo-elements for input tags</a> <a href="//m.sbmmt.com/wenda/172281.html" class="wdcdcCons">**Inside the CSS file: **input[type="text"]{border:2pxsolidred;}input::placehold...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">From 2023-09-10 15:43:12</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>184 </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="//m.sbmmt.com/faq/zt" target="_blank">More></a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/html5dhzzynxz"><img src="https://img.php.cn/upload/subject/202407/22/2024072213560284279.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What are the production methods of html5 animation production?"></a><a target="_blank" href="//m.sbmmt.com/faq/html5dhzzynxz" class="title-a-spanl" title=""><span>What are the production methods of html5 animation production?</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/htmlyhtmldeqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072212284445490.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="The difference between HTML and HTML5"></a><a target="_blank" href="//m.sbmmt.com/faq/htmlyhtmldeqb" class="title-a-spanl" title=""><span>The difference between HTML and HTML5</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/wjjexebdjjbf"><img src="https://img.php.cn/upload/subject/202407/22/2024072213534810282.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Folder exe virus solution"></a><a target="_blank" href="//m.sbmmt.com/faq/wjjexebdjjbf" class="title-a-spanl" title=""><span>Folder exe virus solution</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/pythonbcdnpzy"><img src="https://img.php.cn/upload/subject/202407/22/2024072212232499616.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="python programming computer configuration requirements"></a><a target="_blank" href="//m.sbmmt.com/faq/pythonbcdnpzy" class="title-a-spanl" title=""><span>python programming computer configuration requirements</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/jsszscmgys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214265880493.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="delete an element from js array"></a><a target="_blank" href="//m.sbmmt.com/faq/jsszscmgys" class="title-a-spanl" title=""><span>delete an element from js array</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/kernelutildll"><img src="https://img.php.cn/upload/subject/202407/22/2024072213303874977.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Kernelutil.dll error repair method"></a><a target="_blank" href="//m.sbmmt.com/faq/kernelutildll" class="title-a-spanl" title=""><span>Kernelutil.dll error repair method</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/pythonzdploth"><img src="https://img.php.cn/upload/subject/202407/22/2024072213482938135.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to use plot function in Python"></a><a target="_blank" href="//m.sbmmt.com/faq/pythonzdploth" class="title-a-spanl" title=""><span>How to use plot function in Python</span></a></li> <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/ypdxnzbjs"><img src="https://img.php.cn/upload/subject/202407/22/2024072213591755478.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Introduction to hard disk performance indicators"></a><a target="_blank" href="//m.sbmmt.com/faq/ypdxnzbjs" class="title-a-spanl" title=""><span>Introduction to hard disk performance indicators</span></a></li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle"> Popular Recommendations </div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="what is h5" href="//m.sbmmt.com/faq/414835.html">what is h5</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="How to create an h5 page if you don't understand code? Recommended H5 page production platform" href="//m.sbmmt.com/faq/417718.html">How to create an h5 page if you don't understand code? Recommended H5 page production platform</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 html5" href="//m.sbmmt.com/faq/473125.html">What are the new features of html5</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What is h5 page production" href="//m.sbmmt.com/faq/468382.html">What is h5 page production</a> </div></li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="What is the difference between h5 and mini program?" href="//m.sbmmt.com/faq/463311.html">What is the difference between h5 and mini program?</a> </div></li> </ul> </div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div> Popular Tutorials </div> <a target="_blank" href="//m.sbmmt.com/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="//m.sbmmt.com/course/812.html" title="" 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="//m.sbmmt.com/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> 1396679 <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="//m.sbmmt.com/course/74.html" title="" 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="//m.sbmmt.com/course/74.html">PHP introductory tutorial one: Learn PHP in one week</a> <div class="wzrthreerb"> <div> 4209535 <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="//m.sbmmt.com/course/286.html" title="" 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="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div> 2364679 <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="//m.sbmmt.com/course/504.html" title="" 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="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div> 493995 <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="//m.sbmmt.com/course/2.html" title="" 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="//m.sbmmt.com/course/2.html">PHP zero-based introductory tutorial</a> <div class="wzrthreerb"> <div> 827549 <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="//m.sbmmt.com/course/812.html" title="" 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="//m.sbmmt.com/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> 1396679 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="//m.sbmmt.com/course/286.html" title="" 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="//m.sbmmt.com/course/286.html">JAVA Beginner's Video Tutorial</a> <div class="wzrthreerb"> <div> 2364679 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="//m.sbmmt.com/course/504.html" title="" 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="//m.sbmmt.com/course/504.html">Little Turtle's zero-based introduction to learning Python video tutorial</a> <div class="wzrthreerb"> <div> 493995 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="//m.sbmmt.com/course/901.html" title="" 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="//m.sbmmt.com/course/901.html">Quick introduction to web front-end development</a> <div class="wzrthreerb"> <div> 213621 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="//m.sbmmt.com/course/234.html" title="" 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="//m.sbmmt.com/course/234.html">Master PS video tutorials from scratch</a> <div class="wzrthreerb"> <div> 845929 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="//m.sbmmt.com/course/1648.html" title="" 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="//m.sbmmt.com/course/1648.html">[Web front-end] Node.js quick start</a> <div class="wzrthreerb"> <div> 3390 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="//m.sbmmt.com/course/1647.html" title="" 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="//m.sbmmt.com/course/1647.html">Complete collection of foreign web development full-stack courses</a> <div class="wzrthreerb"> <div> 2716 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="//m.sbmmt.com/course/1646.html" title="" 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="//m.sbmmt.com/course/1646.html">Go language practical GraphQL</a> <div class="wzrthreerb"> <div> 2146 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="//m.sbmmt.com/course/1645.html" title="" 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="//m.sbmmt.com/course/1645.html">550W fan master learns JavaScript from scratch step by step</a> <div class="wzrthreerb"> <div> 481 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="//m.sbmmt.com/course/1644.html" title="" 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="//m.sbmmt.com/course/1644.html">Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours</a> <div class="wzrthreerb"> <div> 11711 times of learning </div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div></li> </ul> </div> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div> Latest Downloads </div> <a href="//m.sbmmt.com/xiazai">More></a> </div> <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="[form button] jQuery enterprise message form contact code" href="//m.sbmmt.com/xiazai/js/8071">[form button] jQuery enterprise message form contact code</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Player special effects] HTML5 MP3 music box playback effects" href="//m.sbmmt.com/xiazai/js/8070">[Player special effects] HTML5 MP3 music box playback effects</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Menu navigation] HTML5 cool particle animation navigation menu special effects" href="//m.sbmmt.com/xiazai/js/8069">[Menu navigation] HTML5 cool particle animation navigation menu special effects</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[form button] jQuery visual form drag and drop editing code" href="//m.sbmmt.com/xiazai/js/8068">[form button] jQuery visual form drag and drop editing code</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Player special effects] VUE.JS imitation Kugou music player code" href="//m.sbmmt.com/xiazai/js/8067">[Player special effects] VUE.JS imitation Kugou music player code</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[html5 special effects] Classic html5 pushing box game" href="//m.sbmmt.com/xiazai/js/8066">[html5 special effects] Classic html5 pushing box game</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Picture special effects] jQuery scrolling to add or reduce image effects" href="//m.sbmmt.com/xiazai/js/8065">[Picture special effects] jQuery scrolling to add or reduce image effects</a> </div></li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="[Photo album effects] CSS3 personal album cover hover zoom effect" href="//m.sbmmt.com/xiazai/js/8064">[Photo album effects] CSS3 personal album cover hover zoom effect</a> </div></li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8328" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8327" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8326" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8325" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8324" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8323" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8322" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8321" title="[Front-end template] 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="//m.sbmmt.com/xiazai/sucai/3078" target="_blank" title="[PNG material] 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="//m.sbmmt.com/xiazai/sucai/3077" target="_blank" title="[PNG material] 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="//m.sbmmt.com/xiazai/sucai/3076" target="_blank" title="[banner picture] 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="//m.sbmmt.com/xiazai/sucai/3075" target="_blank" title="[PNG material] 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="//m.sbmmt.com/xiazai/sucai/3074" target="_blank" title="[PNG material] 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="//m.sbmmt.com/xiazai/sucai/3073" target="_blank" title="[PNG material] 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="//m.sbmmt.com/xiazai/sucai/3072" target="_blank" title="[banner picture] 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="//m.sbmmt.com/xiazai/sucai/3071" target="_blank" title="[PNG material] 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="//m.sbmmt.com/xiazai/code/8328" target="_blank" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8327" target="_blank" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8326" target="_blank" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8325" target="_blank" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8324" target="_blank" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8323" target="_blank" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8322" target="_blank" title="[Front-end template] 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="//m.sbmmt.com/xiazai/code/8321" target="_blank" title="[Front-end template] Purple style foreign exchange trading service website template">[Front-end template] Purple style foreign exchange trading service website template</a> </div></li> </ul> </div> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/about/us.html" rel="nofollow" target="_blank" title="About us" class="cBlack">About us</a> <a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="Disclaimer" class="cBlack">Disclaimer</a> <a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1"> php.cn：Public welfare online PHP training，Help PHP learners grow quickly！ </dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel="stylesheet" id="_main-css" href="//m.sbmmt.com/static/css/viewer.min.css?2" type="text/css" media="all"> </body> </html>