Nombor Baris untuk <textarea> menggunakan SVG-tutorial css-php.cn

Rumah > hujung hadapan web > tutorial css > Nombor Baris untuk

menggunakan SVG                </div>
            </div>
        </div>
        <div class="wzContent">
            <div class="wzconTop">
                <h1 class="wzctTitle">Nombor Baris untuk <textarea> menggunakan SVG</h1>
                <div class="wzctPerson">
                    <div class="wzctpleft">
                        <a href="https://www.php.cn/ms/member/465014.html" target="_blank">    <img src="https://img.php.cn/upload/avatar/000/465/014/627b58ba8fa6c600.jpg" /></a>
                        <div class="wzctplright">
                            <div class="wzctpltop">
                                                                    <div class="name">王林</div>
                                                            </div>
                            <div class="wzctpldown">
                                <span style="margin-left:0px; color: #999999;">Lepaskan：                                        2024-08-19 18:33:32</span>
                            </div>
                        </div>
                    </div>
                    <div class="wzctpright">
                        <div class="wzctpr">asal</div>
                        <div class="wzctprll">526 orang telah melayarinya</div>
                    </div>
                </div>
            </div>
            <div class="wzconLine"></div>
            <div class="php-article">
                <div class="article-list-left detail-content-wrap content">
                <ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="3461856641"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
                    <p>Pada hari lain saya sedang mengusahakan JSON Schema Generator, dan mahu memaparkan nombor baris dalam <textarea>. Tiada apa-apa yang mewah dan tidak mempertimbangkan pemecahan talian yang lembut atau apa-apa yang rumit dari jauh.</p>

<p>Saya melakukan beberapa penyelidikan dan menemui pelbagai pendekatan:</p>

<ol>
<li>Menggunakan imej latar belakang (TinyMCE melakukannya, menggunakan PNG)</li>
<li>Menggunakan <ol> senarai pesanan. </li>
</ol>

<p>Saya tidak menyukai mana-mana daripada mereka! Yang pertama tidak kelihatan segar — dan tidak sepadan dengan gaya yang telah saya sediakan untuk elemen <textarea>-saya.</p>

<p>Yang kedua memerlukan sekumpulan JavaScript untuk mengekalkan senarai tertib itu: menambah/mengalih keluar <li>-elemen secara dinamik, menyegerakkan acara tatal dan banyak lagi.</p>

<p>Jadi saya akhirnya mencipta hibrid. </p>

<p>Ia ialah SVG yang dijana secara dinamik, disimpan sebagai <em>Harta Tersuai CSS</em> — dan digunakan sebagai imej latar belakang, mewarisi gaya daripada elemen <textarea>-induknya.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/172406361393154.png" alt="Line Numbers for <textarea> menggunakan SVG"></p>

<p>Jom selami.</p>

<hr>

<h2>
  
  
  JavaScript
</h2>

<p>Pertama, kaedah utama:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">lineNumbers(element, numLines = 50, inline = false)
</pre><div class="contentsignin">Salin selepas log masuk</div></div>

<p>elemen ialah <textarea> elemen untuk digunakan, numLines bilangan baris untuk dipaparkan dan sebaris menunjukkan sama ada untuk menyimpan imej yang dijana pada elemen (true) atau pada document.body (false).</p>

<p>Seterusnya, kami mentakrifkan awalan untuk sifat tersuai:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const prefix = '--linenum-';
</pre><div class="contentsignin">Salin selepas log masuk</div></div>

<p>Sebelum kami meneruskan, kami menyemak sama ada hendak menggunakan semula mana-mana harta sedia ada:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">if (!inline) {
  const styleString = document.body.getAttribute('style') || '';
  const regex = new RegExp(`${prefix}[^:]*`, 'g');
  const match = styleString.match(regex);

if (match) {
    element.style.backgroundImage = `var(${match[0]})`;
    return;
  }
}
</pre><div class="contentsignin">Salin selepas log masuk</div></div>

<p>Seterusnya, kami <strong>mengekstrak</strong> gaya daripada elemen, menjadikan SVG dengan keluarga fon, saiz fon, ketinggian garis dsb. yang sama :<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const bgColor = getComputedStyle(element).borderColor;
const fillColor = getComputedStyle(element).color;
const fontFamily = getComputedStyle(element).fontFamily;
const fontSize = parseFloat(getComputedStyle(element).fontSize);
const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize;
const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2;
const translateY = (fontSize * lineHeight).toFixed(2);
</pre><div class="contentsignin">Salin selepas log masuk</div></div>

<p>Kami memerlukan id rawak untuk harta kami juga:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`;
</pre><div class="contentsignin">Salin selepas log masuk</div></div>

<p>Dan kini tiba masanya untuk memaparkan SVG:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const svg = `<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    svg { background: ${bgColor}; }
    text {
      fill: hsl(from ${fillColor} h s l / 50%);
      font-family: ${fontFamily};
      font-size: ${fontSize}px;
      line-height: ${lineHeight};
      text-anchor: end;
      translate: 0 calc((var(--n) * ${translateY}px) + ${paddingTop}px);
    }
  </style>
  ${Array.from({ length: numLines }, (_, i) => `<text x="90%" style="--n:${i + 1};">${i + 1}</text>`).join("")}
</svg>`;
</pre><div class="contentsignin">Salin selepas log masuk</div></div>

<p><strong>Mari kita pecahkan:</strong></p>

<p>Dalam bahagian <style>-kami hanya menetapkan gaya yang kami ekstrak daripada <textarea> lebih awal. Daripada menggunakan atribut y dan dy untuk elemen <text>-, kami hanya menggunakan --n-property untuk menterjemah elemen teks menggunakan CSS.</p>

<p>Bahagian terakhir mengulang tatasusunan yang dibuat daripada numLines dan menambahkan <teks>-elemen pada SVG utama.</p>

<p>Kita hampir sampai!</p>

<hr>

<p>Untuk menggunakan SVG yang dijana sebagai url()-property, kita perlu <strong>mengekod</strong>nya:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
</pre><div class="contentsignin">Salin selepas log masuk</div></div>

<p>Dan akhirnya, kami menetapkan sifat itu pada sama ada elemen atau badan dokumen:<br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const target = inline ? element : document.body;
target.style.setProperty(id, encodedURI);
element.style.backgroundImage = `var(${id})`;
</pre><div class="contentsignin">Salin selepas log masuk</div></div>

<p><strong>Dan itu sahaja!</strong></p>

<p>Tidak terlalu teruk, dan hanya 610 bait, dikecilkan dan dimampatkan!</p>

<hr>

<p>Anda boleh melihat demo di sini dan muat turun skrip penuh di sini.</p>

<p>Di bawah ialah Codepen yang dipermudahkan, tidak menggunakan logik sifat sebaris:</p>

<hr>

<h2>
  
  
  Kebaikan dan Keburukan
</h2>

<p>Ada kebaikan dan keburukan? Sudah tentu ada! </p>

<p>Secara peribadi — untuk projek semasa saya — saya memerlukan cara yang ringkas dan jelas untuk menambah nombor baris pada pratonton JSON dalam <textarea>, dan kaedah ini sesuai.</p>

<h3>
  
  
  Kebaikan
</h3>

<h4>
  
  
  Manipulasi DOM yang dikurangkan
</h4>

<p>Kaedah ini tidak bergantung pada memanipulasi DOM. Nombor baris dijana sebagai SVG tunggal, disimpan dalam Harta Tersuai CSS.</p>

<h4>
  
  
  Penyegerakan Automatik
</h4>

<p>Memandangkan nombor baris adalah sebahagian daripada imej latar belakang, ia secara automatik menatal dengan kandungan teks, menghapuskan keperluan untuk logik penyegerakan manual.</p>

<h4>
  
  
  Kebolehgunaan Semula Merentas Elemen
</h4>

<p>Dengan menyimpan SVG yang dijana dalam Harta Tersuai CSS, ia boleh digunakan semula merentas berbilang elemen. Ini bermakna jika beberapa elemen memerlukan nombor baris yang sama, mereka semua boleh merujuk sifat tersuai yang sama, mengelakkan penjanaan SVG yang berlebihan.</p>

<h4>
  
  
  Kebolehskalaan
</h4>

<h2>
  
  
  Sifat vektor SVG memastikan nombor baris kekal jelas dan jelas pada sebarang tahap zum.
</h2>

<h3>
  
  
  Keburukan
</h3>

<h4>
  
  
  Kebolehcapaian
</h4>

<p>Senarai tersusun lebih mudah diakses oleh pembaca skrin dan teknologi bantuan, manakala nombor talian berasaskan SVG mungkin diabaikan atau disalah tafsir.</p>

<h4>
  
  
  Kerumitan Penyesuaian
</h4>

<p>Menggayakan dan berinteraksi dengan nombor baris individu dalam senarai tersusun adalah mudah. Sebaliknya, pendekatan SVG menjadikannya lebih sukar untuk menyesuaikan atau menambah interaktiviti pada nombor talian tertentu.</p>

<h4>
  
  
  Keserasian Pelayar
</h4>

<p>Sifat tersuai SVG dan CSS mungkin tidak dipaparkan secara konsisten merentas semua penyemak imbas — pelaksanaan semasa mempunyai masalah dengan Safari, di mana kita perlu memotong (paddingTop / 10) daripada translateY.</p>
<h4>
  
  
  Pengendalian Kandungan Dinamik
</h4>

<p>Senarai tersusun boleh menjadi lebih fleksibel untuk mengendalikan kemas kini kandungan dinamik, seperti menambah atau mengalih keluar baris, manakala pendekatan SVG mungkin memerlukan penjanaan semula dan penggunaan semula keseluruhan imej latar belakang.</p>

<p>Atas ialah kandungan terperinci Nombor Baris untuk <textarea> menggunakan SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p>                </div>
            </div>
            <div style="height: 25px;">
                                <div style="display: inline-flex;float: right; color:#333333;">sumber：dev.to</div>
                            </div>
            <div class="wzconOtherwz">
                                    <a href="https://www.php.cn/ms/faq/1796574374.html" title="Projek Pembangunan Web Pertama Saya: Mempelajari HTML dan CSS">
                        <span>Artikel sebelumnya：Projek Pembangunan Web Pertama Saya: Mempelajari HTML dan CSS</span>
                    </a>
                                    <a href="https://www.php.cn/ms/faq/1796575869.html"  title="Saya Suka Menggerakkannya, Menggerakkannya (Bahagian 2)">
                        <span>Artikel seterusnya：Saya Suka Menggerakkannya, Menggerakkannya (Bahagian 2)</span>
                    </a>
                            </div>
            <div class="wzconShengming">
       
                <div class="bzsmdiv">Kenyataan Laman Web ini</div>
                <div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div>
            </div>
            <ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">Artikel terbaru oleh pengarang</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796629481.html">Cipta Masa Depan: Pengaturcaraan Java untuk Pemula Mutlak</a>
                            </div>
                            <div>2024-10-13 13:32:21</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796628532.html">Anda Tidak Sendiri: Kuasai Python dengan Komuniti Menyokong di Sisi Anda</a>
                            </div>
                            <div>2024-10-12 11:58:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796627821.html">Daripada Novis kepada Coder: Manfaatkan Kuasa Pengaturcaraan Python</a>
                            </div>
                            <div>2024-10-11 20:06:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796627777.html">Think Like a Programmer: Belajar Asas Java</a>
                            </div>
                            <div>2024-10-11 18:59:31</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796627752.html">Java Made Simple: Panduan Pemula untuk Kuasa Pengaturcaraan</a>
                            </div>
                            <div>2024-10-11 18:30:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796627672.html">Bina Blog dengan PHP: Projek Mesra Permulaan</a>
                            </div>
                            <div>2024-10-11 15:51:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796627665.html">Cakap Bahasa Sistem: Belajar C, Satu Baris pada Satu Masa</a>
                            </div>
                            <div>2024-10-11 15:42:10</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796627632.html">Struktur Data dan Algoritma dalam C: Pendekatan Mesra Permulaan</a>
                            </div>
                            <div>2024-10-11 14:41:20</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796627614.html">Pengekodan Tanpa Air Mata: Belajar C dengan Cara Mudah</a>
                            </div>
                            <div>2024-10-11 14:08:31</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ms/faq/1796627604.html">Analisis Data dengan Java: Panduan Pemula untuk Memproses Maklumat</a>
                            </div>
                            <div>2024-10-11 13:42:21</div>
                        </li>
                                    </ul>
            </div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">Isu terkini</div>
                <div class="wdsyContent">
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/ms/wenda/176411.html"  target="_blank" title="function_exists() tidak boleh menentukan fungsi tersuai" class="wdcdcTitle">function_exists() tidak boleh menentukan fungsi tersuai</a>
                            <a href="https://www.php.cn/ms/wenda/176411.html" class="wdcdcCons">Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-04-29 11:01:01</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>3</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>2316</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/ms/wenda/176410.html"  target="_blank" title="Bagaimana untuk memaparkan versi mudah alih Google Chrome" class="wdcdcTitle">Bagaimana untuk memaparkan versi mudah alih Google Chrome</a>
                            <a href="https://www.php.cn/ms/wenda/176410.html" class="wdcdcCons">Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-04-23 00:22:19</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>11</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>2453</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/ms/wenda/176407.html"  target="_blank" title="Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas." class="wdcdcTitle">Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas.</a>
                            <a href="https://www.php.cn/ms/wenda/176407.html" class="wdcdcCons">Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-04-19 15:37:47</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>2067</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/ms/wenda/176406.html"  target="_blank" title="Tiada output dalam tetingkap induk" class="wdcdcTitle">Tiada output dalam tetingkap induk</a>
                            <a href="https://www.php.cn/ms/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-04-18 23:52:34</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1953</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/ms/wenda/176405.html"  target="_blank" title="Di manakah perisian kursus tentang pemetaan minda CSS?" class="wdcdcTitle">Di manakah perisian kursus tentang pemetaan minda CSS?</a>
                            <a href="https://www.php.cn/ms/wenda/176405.html" class="wdcdcCons">Perisian kursus</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> daripada 2024-04-16 10:10:18</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>0</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>2020</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                    </div>
            </div>

<div class="wzconZt" >
                <div class="wzczt-title">
                    <div>Topik-topik yang berkaitan</div>
                    <a href="https://www.php.cn/ms/faq/zt" target="_blank">Lagi>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ms/faq/avalanchessm"><img src="https://img.php.cn/upload/subject/202407/22/2024072213264887916.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Apa itu Avalanche" /> </a>
                            <a target="_blank" href="https://www.php.cn/ms/faq/avalanchessm" class="title-a-spanl" title="Apa itu Avalanche"><span>Apa itu Avalanche</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ms/faq/zipwjjmdpjff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213545779122.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Bagaimana untuk memecahkan penyulitan fail zip" /> </a>
                            <a target="_blank" href="https://www.php.cn/ms/faq/zipwjjmdpjff" class="title-a-spanl" title="Bagaimana untuk memecahkan penyulitan fail zip"><span>Bagaimana untuk memecahkan penyulitan fail zip</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ms/faq/bootmgrismiss"><img src="https://img.php.cn/upload/subject/202407/22/2024072213342422233.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="bootmgr tiada dan tidak boleh boot" /> </a>
                            <a target="_blank" href="https://www.php.cn/ms/faq/bootmgrismiss" class="title-a-spanl" title="bootmgr tiada dan tidak boleh boot"><span>bootmgr tiada dan tidak boleh boot</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ms/faq/sjkldxfff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213454976541.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Kaedah pembaikan kelemahan pangkalan data" /> </a>
                            <a target="_blank" href="https://www.php.cn/ms/faq/sjkldxfff" class="title-a-spanl" title="Kaedah pembaikan kelemahan pangkalan data"><span>Kaedah pembaikan kelemahan pangkalan data</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ms/faq/notnullzjzmy"><img src="https://img.php.cn/upload/subject/202407/22/2024072213501814743.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Cara menggunakan anotasi notnull" /> </a>
                            <a target="_blank" href="https://www.php.cn/ms/faq/notnullzjzmy" class="title-a-spanl" title="Cara menggunakan anotasi notnull"><span>Cara menggunakan anotasi notnull</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ms/faq/dnlszdcqdyy"><img src="https://img.php.cn/upload/subject/202407/22/2024072212262991252.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Mengapa komputer terus dimulakan semula secara automatik" /> </a>
                            <a target="_blank" href="https://www.php.cn/ms/faq/dnlszdcqdyy" class="title-a-spanl" title="Mengapa komputer terus dimulakan semula secara automatik"><span>Mengapa komputer terus dimulakan semula secara automatik</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ms/faq/dyzmkzbhfjl"><img src="https://img.php.cn/upload/subject/202407/22/2024072214150178934.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Cara menonton rekod main balik siaran langsung di Douyin" /> </a>
                            <a target="_blank" href="https://www.php.cn/ms/faq/dyzmkzbhfjl" class="title-a-spanl" title="Cara menonton rekod main balik siaran langsung di Douyin"><span>Cara menonton rekod main balik siaran langsung di Douyin</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ms/faq/yjsjsyngpb"><img src="https://img.php.cn/upload/subject/202407/22/2024072212203155745.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Telefon bimbit OnePlus milik jenama manakah?" /> </a>
                            <a target="_blank" href="https://www.php.cn/ms/faq/yjsjsyngpb" class="title-a-spanl" title="Telefon bimbit OnePlus milik jenama manakah?"><span>Telefon bimbit OnePlus milik jenama manakah?</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div>
    </div>

<div class="phpwzright">
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
        <div class="wzrOne">
            <div class="wzroTitle">Cadangan popular</div>
            <div class="wzroList">
                <ul>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="Bagaimana untuk menetapkan css untuk melebihi elips paparan" href="https://www.php.cn/ms/faq/482865.html">Bagaimana untuk menetapkan css untuk melebihi elips paparan</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="css怎么设置字体大小" href="https://www.php.cn/ms/faq/469426.html">css怎么设置字体大小</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="css中的hover怎么用" href="https://www.php.cn/ms/faq/417948.html">css中的hover怎么用</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="Bagaimana untuk menetapkan jarak aksara dalam css" href="https://www.php.cn/ms/faq/482889.html">Bagaimana untuk menetapkan jarak aksara dalam css</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="css3新特性有哪些" href="https://www.php.cn/ms/faq/415878.html">css3新特性有哪些</a>
                                </div>
                            </li>
                                    </ul>
            </div>
        </div>
        <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
        <div class="wzrThree">
            <div class="wzrthree-title">
                <div>Tutorial Popular</div>
                <a target="_blank" href="https://www.php.cn/ms/course.html">Lagi>
                </a>
            </div>
            <div class="wzrthreelist swiper2">
                <div class="wzrthreeTab  swiper-wrapper">
                    <div class="check tabdiv swiper-slide" data-id="one">Tutorial berkaitan <div></div></div>
                    <div class="tabdiv swiper-slide" data-id="two">Cadangan popular<div></div></div>
                    <div class="tabdiv swiper-slide" data-id="three">Kursus terkini<div></div></div>
                </div>
                <ul class="one">
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ms/course/812.html" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" href="https://www.php.cn/ms/course/812.html">Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)</a>
                                    <div class="wzrthreerb">
                                        <div>1425067 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ms/course/74.html" title="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu" href="https://www.php.cn/ms/course/74.html">Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu</a>
                                    <div class="wzrthreerb">
                                        <div>4271408 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="74">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ms/course/286.html" title="Tutorial Video Permulaan JAVA" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutorial Video Permulaan JAVA"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial Video Permulaan JAVA" href="https://www.php.cn/ms/course/286.html">Tutorial Video Permulaan JAVA</a>
                                    <div class="wzrthreerb">
                                        <div>2552148 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ms/course/504.html" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" href="https://www.php.cn/ms/course/504.html">Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python</a>
                                    <div class="wzrthreerb">
                                        <div>508495 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ms/course/2.html" title="Tutorial pengenalan berasaskan sifar PHP" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="Tutorial pengenalan berasaskan sifar PHP"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutorial pengenalan berasaskan sifar PHP" href="https://www.php.cn/ms/course/2.html">Tutorial pengenalan berasaskan sifar PHP</a>
                                    <div class="wzrthreerb">
                                        <div>864095 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="2">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                    </ul>
                <ul class="two" style="display: none;">
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/812.html" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)" href="https://www.php.cn/ms/course/812.html">Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)</a>
                                <div class="wzrthreerb">
                                    <div >1425067 kali belajar</div>
                                                                                <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/286.html" title="Tutorial Video Permulaan JAVA" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutorial Video Permulaan JAVA"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Tutorial Video Permulaan JAVA" href="https://www.php.cn/ms/course/286.html">Tutorial Video Permulaan JAVA</a>
                                <div class="wzrthreerb">
                                    <div >2552148 kali belajar</div>
                                                                                <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/504.html" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python" href="https://www.php.cn/ms/course/504.html">Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python</a>
                                <div class="wzrthreerb">
                                    <div >508495 kali belajar</div>
                                                                                <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/901.html" title="Pengenalan pantas kepada pembangunan bahagian hadapan web" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Pengenalan pantas kepada pembangunan bahagian hadapan web"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Pengenalan pantas kepada pembangunan bahagian hadapan web" href="https://www.php.cn/ms/course/901.html">Pengenalan pantas kepada pembangunan bahagian hadapan web</a>
                                <div class="wzrthreerb">
                                    <div >216032 kali belajar</div>
                                                                                <div class="courseICollection" data-id="901">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/234.html" title="Kuasai tutorial video PS dari awal" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Kuasai tutorial video PS dari awal"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Kuasai tutorial video PS dari awal" href="https://www.php.cn/ms/course/234.html">Kuasai tutorial video PS dari awal</a>
                                <div class="wzrthreerb">
                                    <div >893728 kali belajar</div>
                                                                                <div class="courseICollection" data-id="234">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
                <ul class="three" style="display: none;">
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/1648.html" title="[Web front-end] Permulaan pantas Node.js" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Permulaan pantas Node.js"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="[Web front-end] Permulaan pantas Node.js" href="https://www.php.cn/ms/course/1648.html">[Web front-end] Permulaan pantas Node.js</a>
                                <div class="wzrthreerb">
                                    <div >7772 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1648">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/1647.html" title="Koleksi lengkap kursus timbunan penuh pembangunan web asing" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Koleksi lengkap kursus timbunan penuh pembangunan web asing"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Koleksi lengkap kursus timbunan penuh pembangunan web asing" href="https://www.php.cn/ms/course/1647.html">Koleksi lengkap kursus timbunan penuh pembangunan web asing</a>
                                <div class="wzrthreerb">
                                    <div >6214 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1647">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/1646.html" title="Gunakan GraphQL praktikal bahasa" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Gunakan GraphQL praktikal bahasa"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Gunakan GraphQL praktikal bahasa" href="https://www.php.cn/ms/course/1646.html">Gunakan GraphQL praktikal bahasa</a>
                                <div class="wzrthreerb">
                                    <div >5115 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1646">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/1645.html" title="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah" href="https://www.php.cn/ms/course/1645.html">Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah</a>
                                <div class="wzrthreerb">
                                    <div >711 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1645">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ms/course/1644.html" title="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam" href="https://www.php.cn/ms/course/1644.html">Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam</a>
                                <div class="wzrthreerb">
                                    <div >25919 kali belajar</div>
                                                                                <div class="courseICollection" data-id="1644">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper2', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrthreeTab>div').click(function(e){
                    $('.wzrthreeTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrthreelist>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>

<div class="wzrFour">
            <div class="wzrfour-title">
                <div>Muat turun terkini</div>
                <a href="https://www.php.cn/ms/xiazai">Lagi>
                </a>
            </div>
                        <script>
                $(document).ready(function(){
                    var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
                        speed:1000,
                        autoplay:{
                            delay:3500,
                            disableOnInteraction: false,
                        },
                        pagination:{
                            el:'.sjyx_banSwiperwz .swiper-pagination',
                            clickable :false,
                        },
                        loop:true
                    })
                })
            </script>
            <div class="wzrfourList swiper3">
                <div class="wzrfourlTab swiper-wrapper">
                    <div class="check swiper-slide" data-id="onef">kesan web <div></div></div>
                    <div class="swiper-slide" data-id="twof">Kod sumber laman web<div></div></div>
                    <div class="swiper-slide" data-id="threef">Bahan laman web<div></div></div>
                    <div class="swiper-slide" data-id="fourf">Templat hujung hadapan<div></div></div>
                </div>
                <ul class="onef">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="kod hubungan borang mesej perusahaan jQuery" href="https://www.php.cn/ms/toolset/js-special-effects/8071">[butang borang] kod hubungan borang mesej perusahaan jQuery</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Kesan main balik kotak muzik MP3 HTML5" href="https://www.php.cn/ms/toolset/js-special-effects/8070">[Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 kesan khas menu navigasi animasi zarah sejuk" href="https://www.php.cn/ms/toolset/js-special-effects/8069">[Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery bentuk visual seret dan lepas kod penyuntingan" href="https://www.php.cn/ms/toolset/js-special-effects/8068">[butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Kod pemain muzik Kugou tiruan VUE.JS" href="https://www.php.cn/ms/toolset/js-special-effects/8067">[Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Permainan kotak menolak html5 klasik" href="https://www.php.cn/ms/toolset/js-special-effects/8066">[kesan khas html5] Permainan kotak menolak html5 klasik</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="menatal jQuery untuk menambah atau mengurangkan kesan imej" href="https://www.php.cn/ms/toolset/js-special-effects/8065">[Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="Kesan zum hover kulit album peribadi CSS3" href="https://www.php.cn/ms/toolset/js-special-effects/8064">[Kesan album foto] Kesan zum hover kulit album peribadi CSS3</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="twof" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8328" title="Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah" target="_blank">[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8327" title="Templat halaman panduan resume peribadi berwarna segar" target="_blank">[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8326" title="Templat Web Resume Kerja Kreatif Pereka" target="_blank">[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8325" title="Templat laman web syarikat pembinaan kejuruteraan moden" target="_blank">[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8324" title="Templat HTML5 responsif untuk institusi perkhidmatan pendidikan" target="_blank">[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8323" title="Templat laman web pusat membeli-belah kedai e-buku dalam talian" target="_blank">[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8322" title="Teknologi IT menyelesaikan templat tapak web syarikat Internet" target="_blank">[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8321" title="Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu" target="_blank">[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="threef" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-materials/3078"  target="_blank"  title="Bahan vektor elemen musim panas yang comel (EPS+PNG)">[bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-materials/3077"  target="_blank"  title="Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)">[bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-materials/3076"  target="_blank"  title="Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)">[gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-materials/3075"  target="_blank"  title="Bahan vektor topi pengijazahan emas (EPS+PNG)">[bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-materials/3074"  target="_blank"  title="Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)">[bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-materials/3073"  target="_blank"  title="Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza">[bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-materials/3072"  target="_blank"  title="Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)">[gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-materials/3071"  target="_blank"  title="Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)">[bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="fourf" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8328"  target="_blank" title="Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah">[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8327"  target="_blank" title="Templat halaman panduan resume peribadi berwarna segar">[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8326"  target="_blank" title="Templat Web Resume Kerja Kreatif Pereka">[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8325"  target="_blank" title="Templat laman web syarikat pembinaan kejuruteraan moden">[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8324"  target="_blank" title="Templat HTML5 responsif untuk institusi perkhidmatan pendidikan">[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8323"  target="_blank" title="Templat laman web pusat membeli-belah kedai e-buku dalam talian">[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8322"  target="_blank" title="Teknologi IT menyelesaikan templat tapak web syarikat Internet">[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ms/toolset/website-source-code/8321"  target="_blank" title="Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu">[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu</a>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper3', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrfourlTab>div').click(function(e){
                    $('.wzrfourlTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrfourList>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>
    </div>
</div>
<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/ms/about/us.html">Tentang kita</a>
            <a href="https://www.php.cn/ms/about/disclaimer.html">Penafian</a>
            <a href="https://www.php.cn/ms/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

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

</body>
</html>