How to create a dynamic text editor using HTML, CSS, and jQuery-JS Tutorial-php.cn

How to create a dynamic text editor using HTML, CSS, and jQuery

How to create a dynamic text editor using HTML, CSS and jQuery

In the current digital era, text editors are indispensable in our daily life and work One of the few tools. Whether we are writing articles, coding or taking notes, a useful text editor can greatly improve our efficiency and comfort. This article will introduce how to use HTML, CSS and jQuery to create a dynamic text editor, and provide some specific code examples for your reference.

HTML Structure

First, we need to create a basic HTML structure. The following is a simple HTML frame that can be used as a container for a text editor:

   动态文本编辑器

Copy after login

In this HTML structure, we use a

element as a container for the text editor Container, which contains a

</code>element for user input text. At the same time, we set an id as "editor" for this<code><div></code>element for subsequent CSS styling and jQuery operations.</p>
       <ol start="2">
        <li>CSS Style</li>
       </ol>
       <p>Next, we need to add some CSS styles to beautify our text editor. The following is a basic CSS style example:</p>
       <div class="code" style="position:relative; padding:0px; margin:0px;">
        <pre class="brush:css;toolbar:false;">#editor { width: 800px; height: 400px; margin: 0 auto; padding: 10px; border: 1px solid #ccc; background-color: #fff; } textarea { width: 100%; height: 100%; padding: 5px; font-size: 14px; border: none; outline: none; resize: none; }</pre>
        <div class="contentsignin">
         Copy after login
        </div>
       </div>
       <p>In this CSS style, we set some basic styles for the text editor container and input box, including width, height, border, background color, etc. You can also customize it according to your needs.</p>
       <ol start="3">
        <li>jQuery Operation</li>
       </ol>
       <p>Finally, we need to use jQuery to achieve some dynamic effects and functions. The following is a simple jQuery operation example:</p>
       <div class="code" style="position:relative; padding:0px; margin:0px;">
        <pre class="brush:javascript;toolbar:false;">$(document).ready(function() { // 当文本输入框中的内容发生变化时 $('#textArea').on('input', function() { var text = $(this).val(); // 获取文本输入框的内容 $('#editor').prepend('<p>' + text + '</p>'); // 在编辑器中添加一行文本 }); });</pre>
        <div class="contentsignin">
         Copy after login
        </div>
       </div>
       <p>In this jQuery operation, we use<code>$(document).ready()</code>to ensure that the page is loaded before executing our operation . When the content in the text input box changes, we use the<code>$('#textArea').on('input', function() { ... })</code>function to listen to the input event of the input box . In the event handler function, we obtain the content of the input box through<code>$(this).val()</code>, and use<code>$('#editor').prepend('<p>' text '</p>')</code>Add the content of the input box as a line of text to the editor.</p>
       <p>With the above HTML structure, CSS styles and jQuery operations, we can create a simple dynamic text editor. When the user enters content in the input box, the input content will be added to the text editor in real time.</p>
       <p>Of course, the above example is just a basic implementation. You can extend and modify it according to your own needs, and add more functions and styles, such as saving text, inserting pictures, etc.</p>
       <p>Summary</p>
       <p>This article introduces how to use HTML, CSS and jQuery to create a dynamic text editor, and provides some specific code examples for your reference. I hope this article will help you understand and use HTML, CSS and jQuery, and help you create a powerful and beautiful text editor.</p>
       <p>The above is the detailed content of How to create a dynamic text editor using HTML, CSS, and jQuery. 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=css" target="_blank">css</a>
        <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=jquery" target="_blank">jquery</a>
        <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=html" target="_blank">html</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/622187.html" title=""><span>Previous article：How to create a custom scrollbar using HTML, CSS and jQuery</span></a>
      <a href="//m.sbmmt.com/faq/622189.html" title=""><span>Next article：HTML, CSS, and jQuery: Build a beautiful tab navigation</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/1796602406.html">Flexbox button with tyles and variations</a>
        </div>
        <div>
         2024-09-06 16:31:02
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796602403.html">ReactJs vs Angular</a>
        </div>
        <div>
         2024-09-06 16:30:29
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796602399.html">Day / Days of Code: Iterating with Methods</a>
        </div>
        <div>
         2024-09-06 16:30:02
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796602398.html">Which platforms can download the Bitstamp exchange app?</a>
        </div>
        <div>
         2024-09-06 16:03:17
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796602397.html">What is the Chinese name of Poloniex exchange?</a>
        </div>
        <div>
         2024-09-06 16:02:25
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796602393.html">WMDV.COM: A Game Changer in the Crypto Industry</a>
        </div>
        <div>
         2024-09-06 15:59:17
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796602389.html">Synthetix Prepares to Launch Its App Chain, SNAXchain, on Optimism Superchain</a>
        </div>
        <div>
         2024-09-06 15:57:17
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796602388.html">Week in Solana: MagicEden Says $ME Too, Tron Steals Meme Coin Traders</a>
        </div>
        <div>
         2024-09-06 15:56:17
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796602386.html">Elon Musk And Tesla Triumph In Dogecoin (DOGE) Lawsuit, as ETFSwap (ETFS) Emerges to Redefine Digital Finance</a>
        </div>
        <div>
         2024-09-06 15:55:17
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/1796602385.html">What level of exchange does Poloniex belong to?</a>
        </div>
        <div>
         2024-09-06 15:55:01
        </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/173434.html" target="_blank" title="Steps to install jQuery in Nuxt.js" class="wdcdcTitle">Steps to install jQuery in Nuxt.js</a>
         <a href="//m.sbmmt.com/wenda/173434.html" class="wdcdcCons">Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-11-06 16:41:50</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>225
           </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/173359.html" target="_blank" title="jQuery getting wrong value when getting data attribute" class="wdcdcTitle">jQuery getting wrong value when getting data attribute</a>
         <a href="//m.sbmmt.com/wenda/173359.html" class="wdcdcCons">I have a div with data attribute <divclass='p1'data-location='1'></div> I have...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-11-01 23:01: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>1
           </div>
           <div class="wdcdcirwatch flexRow ira">
            <b class="wdcdcirwatchi"></b>209
           </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/173278.html" target="_blank" title="Support jQuery's Transfer-Encoding:chunked" class="wdcdcTitle">Support jQuery's Transfer-Encoding:chunked</a>
         <a href="//m.sbmmt.com/wenda/173278.html" class="wdcdcCons">I'm a web developer. In my script I use header() to set "Transfer-Encoding:chunked&qu...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-25 23:44:37</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>230
           </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/173204.html" target="_blank" title="How to get the natural dimensions of an image using JavaScript or jQuery?" class="wdcdcTitle">How to get the natural dimensions of an image using JavaScript or jQuery?</a>
         <a href="//m.sbmmt.com/wenda/173204.html" class="wdcdcCons">So far I have this code: varimg=document.getElementById('draggable'); varwidth=img.clientW...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-21 13:53:08</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>275
           </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/173199.html" target="_blank" title="Automatically expand text area" class="wdcdcTitle">Automatically expand text area</a>
         <a href="//m.sbmmt.com/wenda/173199.html" class="wdcdcCons">I'm trying to make a simple auto-expanding text area. This is my code: textarea.onkeyup=fu...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-21 08:49:23</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>225
           </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/htmlbq"><img src="https://img.php.cn/upload/subject/202407/22/2024072214431586789.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html copyright symbol"></a><a target="_blank" href="//m.sbmmt.com/faq/htmlbq" class="title-a-spanl" title=""><span>html copyright symbol</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/cssys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214431291616.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css"></a><a target="_blank" href="//m.sbmmt.com/faq/cssys" class="title-a-spanl" title=""><span>css</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/htmlzxbjq"><img src="https://img.php.cn/upload/subject/202407/22/2024072214403473154.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html online editor"></a><a target="_blank" href="//m.sbmmt.com/faq/htmlzxbjq" class="title-a-spanl" title=""><span>html online editor</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/cssjz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214284035010.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css centered"></a><a target="_blank" href="//m.sbmmt.com/faq/cssjz" class="title-a-spanl" title=""><span>css centered</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/cssrhcrtp"><img src="https://img.php.cn/upload/subject/202407/22/2024072214282555686.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to insert pictures in css"></a><a target="_blank" href="//m.sbmmt.com/faq/cssrhcrtp" class="title-a-spanl" title=""><span>How to insert pictures in css</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/htmlwyzz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214275948120.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html web page production"></a><a target="_blank" href="//m.sbmmt.com/faq/htmlwyzz" class="title-a-spanl" title=""><span>html web page production</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/cssccxsslh"><img src="https://img.php.cn/upload/subject/202407/22/2024072214275251415.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css beyond display..."></a><a target="_blank" href="//m.sbmmt.com/faq/cssccxsslh" class="title-a-spanl" title=""><span>css beyond display...</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/htmlkg"><img src="https://img.php.cn/upload/subject/202407/22/2024072214273274014.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html space"></a><a target="_blank" href="//m.sbmmt.com/faq/htmlkg" class="title-a-spanl" title=""><span>html space</span></a></li>
       </ul>
      </div>
     </div>
    </div>
   </div>
   <div class="phpwzright">
    <div class="wzrOne">
     <div class="wzroTitle">
      Popular Recommendations
     </div>
     <div class="wzroList">
      <ul>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="what does js mean" href="//m.sbmmt.com/faq/482163.html">what does js mean</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="How to convert string to array in js?" href="//m.sbmmt.com/faq/461802.html">How to convert string to array in js?</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="How to refresh the page using javascript" href="//m.sbmmt.com/faq/473330.html">How to refresh the page using javascript</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="How to delete an item in js array" href="//m.sbmmt.com/faq/475790.html">How to delete an item in js array</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="How to use sqrt function" href="//m.sbmmt.com/faq/415276.html">How to use sqrt function</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/1140.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/6241ae4d423e2834.png" alt="Common HTML elements and common form controls"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="Common HTML elements and common form controls" href="//m.sbmmt.com/course/1140.html">Common HTML elements and common form controls</a>
         <div class="wzrthreerb">
          <div>
           18868
           <b class="kclbcollectb"></b>
          </div>
          <div class="courseICollection" data-id="1140">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/1146.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/625fac083b8b7878.jpg" alt="Make layout as fast as 5G: CSS Grid grid layout"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="Make layout as fast as 5G: CSS Grid grid layout" href="//m.sbmmt.com/course/1146.html">Make layout as fast as 5G: CSS Grid grid layout</a>
         <div class="wzrthreerb">
          <div>
           27336
           <b class="kclbcollectb"></b>
          </div>
          <div class="courseICollection" data-id="1146">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/1202.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/010/60a76217dce97389.jpg" alt="New Dugu Jiujian: CSS3 must-know content"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="New Dugu Jiujian: CSS3 must-know content" href="//m.sbmmt.com/course/1202.html">New Dugu Jiujian: CSS3 must-know content</a>
         <div class="wzrthreerb">
          <div>
           25490
           <b class="kclbcollectb"></b>
          </div>
          <div class="courseICollection" data-id="1202">
           <b class="nofollow small-nocollect"></b>
          </div>
         </div>
        </div></li>
       <li><a target="_blank" href="//m.sbmmt.com/course/180.html" title="" class="wzrthreelaimg"><img src="https://img.php.cn/upload/course/000/000/068/62552cc4a8984974.png" alt="CSS3 latest video tutorial"></a>
        <div class="wzrthree-right">
         <a target="_blank" title="CSS3 latest video tutorial" href="//m.sbmmt.com/course/180.html">CSS3 latest video tutorial</a>
         <div class="wzrthreerb">
          <div>
           55364
           <b class="kclbcollectb"></b>
          </div>
          <div class="courseICollection" data-id="180">
           <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>
           1397839 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>
           2373601 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>
           494847 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>
           213734 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>
           847978 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>
           3678 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>
           2819 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>
           2317 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>
           493 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>
           12687 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>

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to create a dynamic text editor using HTML, CSS, and jQuery