border-radius How to add rounded borders to elements

php中世界最好的语言
Release: 2018-01-20 09:35:22
Original
2138 people have browsed it

This time I will show you how to addrounded borders to border-radius elements, what are theprecautionsfor adding rounded borders to border-radius elements, the following is the actual combat Let’s take a look at the case.

border-radius:10px; /* All corners are rounded with a radius of 10px*/

border-radius: 5px 4px 3px 2px; /* The four radius values are the upper left Corner, upper right corner, lower right corner and lower left corner, clockwise*/

Don’t think that the value of border-radius can only be in px units. You can also use percentages or ems, but the compatibility is not very good yet. .

Solid upper semicircle:

Method: Set the height (height) to half the width (width), and only set the radius of the upper left corner and upper right corner to be consistent with the height of the element (greater than also OK).

div{   height:50px;/*是width的一半*/   width:100px;   background:#9da;   border-radius:50px 50px 0 0;/*半径至少设置为height的值*/   }
Copy after login

Solid circle:

Method: Set the width (width) and height (height) values to be consistent (that is, a square), and set the four rounded corner values to their values. half.

The following code:

div{   height:100px;/*与width设置一致*/   width:100px;   background:#9da;   border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/   }
Copy after login
    border-radius</www.dztcsd.com/title> <style type="text/css"> div.circle{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ } /*任务部分*/ div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:?; } </style> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head> <body> <div class="circle"> </div> <br/> <!--任务部分--> <div class="semi-circle"> </div> </body> </html></pre>
        <div class="contentsignin">
         Copy after login
        </div>
       </div>
       <p>I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to the php Chinese website<a href="//m.sbmmt.com/java/java-alibaba-qita.html" target="_blank">Other</a>related articles!</p>
       <p>Related reading:</p>
       <p><a href="//m.sbmmt.com/div-tutorial-385181.html" target="_blank">How to use h5’s sse server to send EventSource events</a><br></p>
       <p><a href="//m.sbmmt.com/div-tutorial-385178.html" target="_blank">H5’s local storage and local database details Introducing</a><br></p>
       <p><a href="//m.sbmmt.com/div-tutorial-385175.html" target="_blank">#h5 how to implement the remember password function</a><br></p>
       <p>The above is the detailed content of border-radius How to add rounded borders to elements. 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=border-radius" target="_blank">border-radius</a>
        <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=roundedcorners" target="_blank">rounded corners</a>
        <a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/search?word=addto" target="_blank">Add to</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/385248.html" title=""><span>Previous article:How to Semantize and Optimize HTML</span></a>
      <a href="//m.sbmmt.com/faq/385252.html" title=""><span>Next article:How to add rounded borders to div elements</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/402647.html">Introduction to the latest PHP Programmer Toolbox v1.0 version</a>
        </div>
        <div>
         2018-06-11 11:57:34
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/403921.html">How to deal with vue.js routing failure</a>
        </div>
        <div>
         2018-06-15 15:55:18
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/403914.html">How to use js to parse the database (with code)</a>
        </div>
        <div>
         2018-06-15 15:49:00
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/403911.html">How to use js to bind DOM events in the project</a>
        </div>
        <div>
         2018-06-15 15:46:15
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/403909.html">How to operate JS strings and special characters</a>
        </div>
        <div>
         2018-06-15 15:42:38
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/403907.html">How to use each method within jQuery in a project</a>
        </div>
        <div>
         2018-06-15 15:40:34
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/403904.html">How to use jquery to upload files</a>
        </div>
        <div>
         2018-06-15 15:39:32
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/403902.html">How to use JS prototype and prototype chain</a>
        </div>
        <div>
         2018-06-15 15:37:14
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/403899.html">Angular CLI+Angular 5 practical project demonstration</a>
        </div>
        <div>
         2018-06-15 15:34:21
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots"></span>
         <a target="_blank" href="//m.sbmmt.com/faq/403890.html">Replace node elements using jQuery (code attached)</a>
        </div>
        <div>
         2018-06-15 15:22:51
        </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/173281.html" target="_blank" title="How to get a circular outline on a circular <button> using CSS in Safari" class="wdcdcTitle">How to get a circular outline on a circular <button> using CSS in Safari</a>
         <a href="//m.sbmmt.com/wenda/173281.html" class="wdcdcCons">I'm trying to get a round button with the same color outline, but it doesn't seem possible...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-26 09:54:54</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>604
           </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/173242.html" target="_blank" title="Curl bottom edge of div inwards using CSS" class="wdcdcTitle">Curl bottom edge of div inwards using CSS</a>
         <a href="//m.sbmmt.com/wenda/173242.html" class="wdcdcCons">I want to bend the bottom edge of this rectangular div/background using CSS, so the result...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-23 19:55:32</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>335
           </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/173151.html" target="_blank" title="Fix warning "Standard property 'box-shadow' is also defined for compatibility"" class="wdcdcTitle">Fix warning "Standard property 'box-shadow' is also defined for compatibility"</a>
         <a href="//m.sbmmt.com/wenda/173151.html" class="wdcdcCons">I'm using the scrolling library and VSCode shows the following warning: Standard property ...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-18 00:00:05</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>206
           </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/173006.html" target="_blank" title="CSS Tips: How to Style Checkboxes Using CSS" class="wdcdcTitle">CSS Tips: How to Style Checkboxes Using CSS</a>
         <a href="//m.sbmmt.com/wenda/173006.html" class="wdcdcCons">I'm trying to style a checkbox using: <inputtype="checkbox" style="borde...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-10-08 16:37:48</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>325
           </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/172969.html" target="_blank" title="Keep the overlay image within the image boundaries - restrict it to only stick to the image" class="wdcdcTitle">Keep the overlay image within the image boundaries - restrict it to only stick to the image</a>
         <a href="//m.sbmmt.com/wenda/172969.html" class="wdcdcCons">I'm trying to put an overlay on an image, but this overlay extends to the top menu bar and...</a>
         <div class="wdcdcInfo flexRow">
          <div class="wdcdcileft">
           <span class="wdcdciSpan">From 2023-09-20 22:57:13</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>275
           </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/borderradius"><img src="https://img.php.cn/upload/subject/202407/22/2024072214253420397.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="border-radius"></a><a target="_blank" href="//m.sbmmt.com/faq/borderradius" class="title-a-spanl" title=""><span>border-radius</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/hadoopsdhxzjj"><img src="https://img.php.cn/upload/subject/202407/22/2024072212235877688.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Introduction to the three core components of hadoop"></a><a target="_blank" href="//m.sbmmt.com/faq/hadoopsdhxzjj" class="title-a-spanl" title=""><span>Introduction to the three core components of hadoop</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/wprompt"><img src="https://img.php.cn/upload/subject/202407/22/2024072214331280683.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="window.prompt"></a><a target="_blank" href="//m.sbmmt.com/faq/wprompt" class="title-a-spanl" title=""><span>window.prompt</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/zfcs"><img src="https://img.php.cn/upload/subject/202407/22/2024072213432314183.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Introduction to strings"></a><a target="_blank" href="//m.sbmmt.com/faq/zfcs" class="title-a-spanl" title=""><span>Introduction to strings</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/zmsxdnshc"><img src="https://img.php.cn/upload/subject/202407/22/2024072213515422298.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="How to refresh dns cache"></a><a target="_blank" href="//m.sbmmt.com/faq/zmsxdnshc" class="title-a-spanl" title=""><span>How to refresh dns cache</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/urlssmysa"><img src="https://img.php.cn/upload/subject/202407/22/2024072214315228388.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="What does url mean?"></a><a target="_blank" href="//m.sbmmt.com/faq/urlssmysa" class="title-a-spanl" title=""><span>What does url mean?</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/sublimeyxjsdm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212142293503.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="sublime runs js code"></a><a target="_blank" href="//m.sbmmt.com/faq/sublimeyxjsdm" class="title-a-spanl" title=""><span>sublime runs js code</span></a></li>
        <li class="ul-li"><a target="_blank" href="//m.sbmmt.com/faq/htmlszztysdx"><img src="https://img.php.cn/upload/subject/202407/22/2024072212105552829.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html set font color size"></a><a target="_blank" href="//m.sbmmt.com/faq/htmlszztysdx" class="title-a-spanl" title=""><span>html set font color size</span></a></li>
       </ul>
      </div>
     </div>
    </div>
   </div>
   <div class="phpwzright">
    <div class="wzrOne">
     <div class="wzroTitle">
      Popular Recommendations
     </div>
     <div class="wzroList">
      <ul>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="What does url mean?" href="//m.sbmmt.com/faq/418772.html">What does url mean?</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="What does DOM mean?" href="//m.sbmmt.com/faq/414303.html">What does DOM mean?</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="How to change image size" href="//m.sbmmt.com/faq/414252.html">How to change image size</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="How to make font bold in HTML" href="//m.sbmmt.com/faq/414520.html">How to make font bold in HTML</a>
        </div></li>
       <li>
        <div class="wzczzwzli">
         <span class="layui-badge-dots wzrolr"></span>
         <a style="height: auto;" title="How to set the size of html images" href="//m.sbmmt.com/faq/475145.html">How to set the size of html images</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>
           1394927
           <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>
           4206662
           <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>
           2351105
           <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>
           493334
           <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>
           826354
           <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>
           1394927 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>
           2351105 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>
           493334 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>
           213422 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>
           843335 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>
           3155 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>
           2550 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>
           1991 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>
           465 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>
           10901 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>