Dalam artikel ini, saya akan bercakap tentang cara membuat editor kod berasaskan pelayar yang sangat mudah menggunakan kebanyakannya CSS. Saya pada asalnya membina ini apabila saya perlu membenarkan pengguna mengedit JSON dalam CMS yang saya sedang bina.

Jika anda hanya mahu melompat ke kod dan contoh yang berfungsi, inikan sahaja. Kod boleh didapati di sini dan contoh yang berfungsi di sini

Contenteditable menyebalkan...

Jadi jika anda pernah terfikir untuk membina editor kod anda sendiri, anda mungkin telah melihat contenteditable. Walaupun contenteditable bagus untuk banyak situasi, terdapat satu masalah besar berkaitan dengan mengemas kini kandungan semasa anda menaip. Hampir mustahil untuk meletakkan kursor kembali ke tempatnya selepas anda menyerlahkan sintaks kod dalam editor apabila ia berubah.

Dalam kes saya, saya mahukan sesuatu yang sangat minimum tanpa mencapai perpustakaan yang besar dan berat untuk ini. Saya pergi untuk melihat sama ada saya boleh membina editor yang sangat mudah menggunakan kebanyakannya CSS, hanya menggunakan Javascript untuk mencipta output yang diserlahkan sintaks dan mengemas kini pratonton.

Saya mahu menaip dalam tetapi dan hanya kemas kini pratonton berasingan kod yang diserlahkan sintaks. </p> <h2> Bagaimana ilusi berfungsi </h2> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173041269277729.jpg" class="lazy" alt="A Simple, mostly CSS code editor"></p> <h2> Kod HTML </h2> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <ul> <li>Satu <textarea> dengan teks lutsinar</li> <li>Satu <div> diisi dengan kod yang diserlahkan sintaks anda. </li> <li>Bekas yang membalut <textarea> dan pratonton anda <div> supaya mereka boleh menatal bersama-sama dan kekal berbaris.</li> </ul> <h2> CSS </h2> <p>Berikut ialah keseluruhan CSS yang saya gunakan untuk editor.<br> </p> <pre class="brush:php;toolbar:false">html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #editor { height: 100%; width: 100%; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; padding: 2rem; background-color: #1a1723; } #editor .code, #editor .preview { all: unset; } #editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } #editor .preview { pointer-events: none; color: #ccc; } #editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h3> Bertindih elemen </h3> <p>Salah satu bahagian penting di sini ialah menggunakan grid paparan untuk menindih kawasan teks dan pratonton<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>Saya menggunakan unit fr untuk menindih dua elemen di dalam bekas. Anda boleh membaca lebih lanjut tentang fr di CSSTricks di sini.</p> <h3> Mengikat kawasan teks dan pratonton secara sama </h3> <p>Anda mungkin perasan bahawa saya menggunakan peraturan yang sama pada pratonton dan kawasan teks. Ini memastikan ia bertindih dengan tepat.<br> </p> <pre class="brush:php;toolbar:false">#editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } </pre> <h3> Jadikan textarea telus </h3> <p>Menggunakan rgba untuk warna teks membolehkan saya mempunyai teks sepenuhnya telus, jadi nampaknya anda sedang memilih dan mengedit pratonton.<br> </p> <pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h2> Sedikit Javascript </h2> <p>Kami memerlukan sedikit Javascript untuk menggabungkan ini semua. Mari lihat apa yang kita perlukan.<br> </p> <pre class="brush:php;toolbar:false">const $preview = document.querySelector("#editor .preview"); const $code = document.querySelector("#editor .code"); function mirror() { // make textarea grow to height of content so we can scroll together $code.style.height = $code.scrollHeight; // update the preview underlay with the syntax highlight $preview.innerHTML = Prism.highlight( $code.value, Prism.languages.javascript, "javascript", ); } // insert two spaces on tab $code.addEventListener("keydown", (ev) => { if (ev.code === "Tab") { ev.preventDefault(); $code.setRangeText(" ", $code.selectionStart, $code.selectionStart, "end"); mirror(); } }); $code.addEventListener("input", mirror); mirror(); </pre> <blockquote> <p>Kami akan menggunakan Prism untuk ini, tetapi anda boleh menggunakan apa sahaja yang anda suka. </p> </blockquote> <h3> Fungsi mirror() sedang melakukan beberapa perkara di sini. </h3> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <p>Ini memastikan bahawa semasa anda menaip, ketinggian <textarea> tumbuh, supaya bekas akan menatal dan bukannya <textarea> sendiri. Anda mungkin pernah melihat ini digunakan untuk membuat kawasan teks "auto-tumbuh" sebelum ini.<br> </p> <pre class="brush:php;toolbar:false">html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #editor { height: 100%; width: 100%; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; padding: 2rem; background-color: #1a1723; } #editor .code, #editor .preview { all: unset; } #editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } #editor .preview { pointer-events: none; color: #ccc; } #editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <p>Kemudian kami menggunakan Prism untuk mengambil kod daripada <textarea> sintaks menyerlahkannya dan letakkan hasilnya dalam pratonton <div></p> <h3> Menyokong lekukan tab </h3> <p>Bila-bila masa anda mengedit kod, anda perlu boleh mengesot dan kod ini membolehkan kami menambah ruang apabila seseorang menekan tab, dan kemudian panggil mirror() sekali lagi untuk mengemas kini pratonton.<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>Akhir sekali, kami menambah eventListener untuk input pada <textarea> dan kemas kini pratonton dengan mirror() pada setiap perubahan. Kemudian kami memanggil mirror() pada mulanya, sekiranya sudah ada kod dalam <textarea> pada pemuatan halaman. </p> <p>Itu sahaja! Jelas sekali, jika anda sedang mengedit beribu-ribu baris kod, anda mungkin mengalami masalah prestasi semasa mengemas kini semua kod yang diserlahkan sintaks itu. Satu cara untuk menambah baik idea ini ialah dengan mencipta penatal "maya" dan hanya menyerlahkan kod yang boleh dilihat dalam paparan bekas. Ini adalah bagaimana VsCode melakukan editor mereka. </p> <p>Jika anda ingin bermain-main dengan ini, anda boleh mencari<br> kod dan contoh yang berfungsi pada GitHub</p> <p>Atas ialah kandungan terperinci Editor kod CSS yang ringkas dan kebanyakannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">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> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <div id="377j5v51b" class="AI_ToolDetails_main4sR"> <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> <!-- <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819578.html" title="Bagaimana untuk memperbaiki KB5060533 gagal dipasang di Windows 10?" class="phpgenera_Details_mainR4_bottom_title">Bagaimana untuk memperbaiki KB5060533 gagal dipasang di Windows 10?</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819730.html" title="Dune: Awakening - Di mana untuk mendapatkan kain terlindung" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Di mana untuk mendapatkan kain terlindung</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819016.html" title="Log masuk Gmail: Cara mendaftar, mendaftar masuk, atau mendaftar keluar dari Gmail - Minitool" class="phpgenera_Details_mainR4_bottom_title">Log masuk Gmail: Cara mendaftar, mendaftar masuk, atau mendaftar keluar dari Gmail - Minitool</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 bulan yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819994.html" title="Bagaimana untuk memperbaiki KB5060999 gagal dipasang di Windows 11?" class="phpgenera_Details_mainR4_bottom_title">Bagaimana untuk memperbaiki KB5060999 gagal dipasang di Windows 11?</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819536.html" title="Panduan Guild di Grail Tercemar: Kejatuhan Avalon" class="phpgenera_Details_mainR4_bottom_title">Panduan Guild di Grail Tercemar: Kejatuhan Avalon</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> --> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat AI Hot</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Gambar buka pakaian secara percuma</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>Penyingkiran pakaian AI</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819578.html" title="Bagaimana untuk memperbaiki KB5060533 gagal dipasang di Windows 10?" class="phpgenera_Details_mainR4_bottom_title">Bagaimana untuk memperbaiki KB5060533 gagal dipasang di Windows 10?</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819730.html" title="Dune: Awakening - Di mana untuk mendapatkan kain terlindung" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Di mana untuk mendapatkan kain terlindung</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819016.html" title="Log masuk Gmail: Cara mendaftar, mendaftar masuk, atau mendaftar keluar dari Gmail - Minitool" class="phpgenera_Details_mainR4_bottom_title">Log masuk Gmail: Cara mendaftar, mendaftar masuk, atau mendaftar keluar dari Gmail - Minitool</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 bulan yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819994.html" title="Bagaimana untuk memperbaiki KB5060999 gagal dipasang di Windows 11?" class="phpgenera_Details_mainR4_bottom_title">Bagaimana untuk memperbaiki KB5060999 gagal dipasang di Windows 11?</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/1796819536.html" title="Panduan Guild di Grail Tercemar: Kejatuhan Avalon" class="phpgenera_Details_mainR4_bottom_title">Panduan Guild di Grail Tercemar: Kejatuhan Avalon</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Editor kod yang mudah digunakan dan percuma</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Cina</h3> </a> <p>Versi Cina, sangat mudah digunakan</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Hantar Studio 13.0.1</h3> </a> <p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Alat pembangunan web visual</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Mac</h3> </a> <p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Topik panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>8518</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>17</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/java-tutorial" title="Tutorial Java" class="phpgenera_Details_mainR4_bottom_title">Tutorial Java</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1744</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>16</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1598</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>56</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1538</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>28</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1397</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>31</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ms/faq/zt">Tunjukkan Lagi</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main2"> <div id="377j5v51b" class="phpgenera_Details_mainL4"> <div id="377j5v51b" class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div id="377j5v51b" class="phpgenera_Details_mainL4_info"> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ms/faq/1796819239.html" title="Bagaimanakah saya boleh memasukkan CSS hanya pada beberapa halaman?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174957130281670.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimanakah saya boleh memasukkan CSS hanya pada beberapa halaman?" /> </a> <a href="http://miracleart.cn/ms/faq/1796819239.html" title="Bagaimanakah saya boleh memasukkan CSS hanya pada beberapa halaman?" class="phphistorical_Version2_mids_title">Bagaimanakah saya boleh memasukkan CSS hanya pada beberapa halaman?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 11, 2025 am 12:01 AM</span> <p class="Articlelist_txts_p">Terdapat tiga cara untuk secara selektif memasukkan CSS pada halaman tertentu: 1. Inline CSS, sesuai untuk halaman yang tidak sering diakses atau memerlukan gaya unik; 2. Muatkan fail CSS luaran menggunakan keadaan JavaScript, sesuai untuk situasi di mana fleksibiliti diperlukan; 3. Pembendungan di sebelah pelayan, sesuai untuk senario menggunakan bahasa sisi pelayan. Pendekatan ini dapat mengoptimumkan prestasi laman web dan penyelenggaraan, tetapi memerlukan keseimbangan modularitas dan prestasi.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ms/faq/1796819001.html" title="Flexbox vs Grid: Memahami perbezaan utama dalam susun atur CSS" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174948499050663.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Flexbox vs Grid: Memahami perbezaan utama dalam susun atur CSS" /> </a> <a href="http://miracleart.cn/ms/faq/1796819001.html" title="Flexbox vs Grid: Memahami perbezaan utama dalam susun atur CSS" class="phphistorical_Version2_mids_title">Flexbox vs Grid: Memahami perbezaan utama dalam susun atur CSS</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 10, 2025 am 12:03 AM</span> <p class="Articlelist_txts_p">Flexboxisidealforone-dimensiallayouts, whilgridsuitstwo-dimensi, complexlayouts.useflexboxforaligningitemsinasingleaxisandgridforprecisecontroloverrowsandcolumnsinintricatedesigns.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ms/faq/1796819129.html" title="Membuat pemberitahuan auto-penutup dengan popover HTML" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174951991745342.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Membuat pemberitahuan auto-penutup dengan popover HTML" /> </a> <a href="http://miracleart.cn/ms/faq/1796819129.html" title="Membuat pemberitahuan auto-penutup dengan popover HTML" class="phphistorical_Version2_mids_title">Membuat pemberitahuan auto-penutup dengan popover HTML</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 10, 2025 am 09:45 AM</span> <p class="Articlelist_txts_p">Atribut HTML Popover mengubah elemen ke dalam elemen lapisan atas yang boleh dibuka dan ditutup dengan butang atau JavaScript. Popovers boleh dibuang beberapa cara, tetapi tidak ada pilihan untuk menutupnya secara automatik. Preethi mempunyai teknik yang anda boleh</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apa itu 'menyekat CSS'?" /> </a> <a href="http://miracleart.cn/ms/faq/1796823628.html" title="Apa itu 'menyekat CSS'?" class="phphistorical_Version2_mids_title">Apa itu 'menyekat CSS'?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span> <p class="Articlelist_txts_p">CSS Blok halaman yang diberikan kerana pelayar melihat CSS dalam talian dan luaran sebagai sumber utama secara lalai, terutamanya dengan stylesheet yang diimport, header sejumlah besar CSS sebaris, dan gaya pertanyaan media yang tidak dapat dioptimumkan. 1. Ekstrak CSS kritikal dan membenamkannya ke HTML; 2. Kelewatan memuatkan CSS bukan kritikal melalui JavaScript; 3. Gunakan atribut media untuk mengoptimumkan pemuatan seperti gaya cetak; 4. Memampatkan dan menggabungkan CSS untuk mengurangkan permintaan. Adalah disyorkan untuk menggunakan alat untuk mengekstrak CSS utama, menggabungkan REL = "Preload" pemuatan asynchronous, dan menggunakan media yang ditangguhkan dengan munasabah untuk mengelakkan pemisahan yang berlebihan dan kawalan skrip kompleks.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ms/faq/1796820543.html" title="Cara menggunakan lotties di figma" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174986743677204.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Cara menggunakan lotties di figma" /> </a> <a href="http://miracleart.cn/ms/faq/1796820543.html" title="Cara menggunakan lotties di figma" class="phphistorical_Version2_mids_title">Cara menggunakan lotties di figma</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 14, 2025 am 10:17 AM</span> <p class="Articlelist_txts_p">Dalam tutorial berikut, saya akan menunjukkan kepada anda cara membuat animasi Lottie di Figma. Kami akan menggunakan dua reka bentuk yang berwarna -warni untuk memperlihatkan bagaimana anda boleh menghidupkan di Figma, dan kemudian saya akan menunjukkan kepada anda bagaimana untuk pergi dari Figma ke animasi Lottie. Yang anda perlukan hanyalah ara percuma</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ms/faq/1796820287.html" title="Batasan Breaking: Membina teka -teki Tangram dengan CSS (s)" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174978559468682.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Batasan Breaking: Membina teka -teki Tangram dengan CSS (s)" /> </a> <a href="http://miracleart.cn/ms/faq/1796820287.html" title="Batasan Breaking: Membina teka -teki Tangram dengan CSS (s)" class="phphistorical_Version2_mids_title">Batasan Breaking: Membina teka -teki Tangram dengan CSS (s)</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 13, 2025 am 11:33 AM</span> <p class="Articlelist_txts_p">Kami meletakkannya pada ujian dan ternyata SASS boleh menggantikan JavaScript, sekurang-kurangnya ketika datang ke logik dan tingkah laku teka-teki peringkat rendah. Dengan apa -apa tetapi peta, campuran, fungsi, dan banyak matematik, kami berjaya membawa teka -teki Tangram kami ke kehidupan, tidak J</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" /> </a> <a href="http://miracleart.cn/ms/faq/1796822133.html" title="Luaran vs CSS Dalaman: Apakah pendekatan terbaik?" class="phphistorical_Version2_mids_title">Luaran vs CSS Dalaman: Apakah pendekatan terbaik?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span> <p class="Articlelist_txts_p">Thebestapproachforcssdependonstantheproject'ssspecificneeds.forlargerprojects, externalcssisbetterduetomaintainabilityability;</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Adakah CSS saya mesti berada di bawah kes?" /> </a> <a href="http://miracleart.cn/ms/faq/1796821588.html" title="Adakah CSS saya mesti berada di bawah kes?" class="phphistorical_Version2_mids_title">Adakah CSS saya mesti berada di bawah kes?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span> <p class="Articlelist_txts_p">Tidak, cssdoesnothavetobeinlowercase.however, menggunakanLowerCaseisRecommendorfendfor: 1) Consistencyandreadability, 2) Mengelakkaningerrorsinrelatedtechnologies, 3) potensiformanceBenefits, dan4) peningkatan yang lebih baik.</p> </div> </div> <a href="http://miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div id="377j5v51b" class="footer"> <div id="377j5v51b" 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 id="377j5v51b" class="footermid"> <a href="http://miracleart.cn/ms/about/us.html">Tentang kita</a> <a href="http://miracleart.cn/ms/about/disclaimer.html">Penafian</a> <a href="http://miracleart.cn/ms/update/article_0_1.html">Sitemap</a> </div> <div id="377j5v51b" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="r0wln" class="pl_css_ganrao" style="display: none;"><b id="r0wln"><pre id="r0wln"></pre></b><sup id="r0wln"></sup><output id="r0wln"><fieldset id="r0wln"><pre id="r0wln"></pre></fieldset></output><acronym id="r0wln"><tt id="r0wln"></tt></acronym><dfn id="r0wln"></dfn><strong id="r0wln"><dfn id="r0wln"><ol id="r0wln"></ol></dfn></strong><output id="r0wln"><ol id="r0wln"><font id="r0wln"><object id="r0wln"></object></font></ol></output><table id="r0wln"><address id="r0wln"><u id="r0wln"></u></address></table><acronym id="r0wln"><tt id="r0wln"></tt></acronym><nobr id="r0wln"><acronym id="r0wln"><u id="r0wln"><center id="r0wln"></center></u></acronym></nobr><wbr id="r0wln"><ul id="r0wln"><code id="r0wln"><ins id="r0wln"></ins></code></ul></wbr><pre id="r0wln"><form id="r0wln"></form></pre><tr id="r0wln"><dfn id="r0wln"></dfn></tr><mark id="r0wln"></mark><font id="r0wln"><legend id="r0wln"></legend></font><object id="r0wln"></object><dfn id="r0wln"></dfn><nobr id="r0wln"><address id="r0wln"><table id="r0wln"><address id="r0wln"></address></table></address></nobr><strong id="r0wln"><ruby id="r0wln"><strong id="r0wln"><em id="r0wln"></em></strong></ruby></strong><strong id="r0wln"><address id="r0wln"><s id="r0wln"><big id="r0wln"></big></s></address></strong><sup id="r0wln"><b id="r0wln"></b></sup><rp id="r0wln"></rp><nobr id="r0wln"><address id="r0wln"></address></nobr><strong id="r0wln"><dfn id="r0wln"><label id="r0wln"></label></dfn></strong><sup id="r0wln"><strong id="r0wln"><address id="r0wln"></address></strong></sup><abbr id="r0wln"><div id="r0wln"><nobr id="r0wln"></nobr></div></abbr><input id="r0wln"><em id="r0wln"></em></input><p id="r0wln"><mark id="r0wln"><listing id="r0wln"><dfn id="r0wln"></dfn></listing></mark></p><ol id="r0wln"></ol><ol id="r0wln"><form id="r0wln"><strong id="r0wln"><blockquote id="r0wln"></blockquote></strong></form></ol><dfn id="r0wln"></dfn><delect id="r0wln"></delect><sub id="r0wln"></sub><span id="r0wln"></span><dd id="r0wln"></dd><video id="r0wln"><strike id="r0wln"><button id="r0wln"><dl id="r0wln"></dl></button></strike></video><li id="r0wln"><legend id="r0wln"><ruby id="r0wln"></ruby></legend></li><em id="r0wln"><p id="r0wln"><mark id="r0wln"><strong id="r0wln"></strong></mark></p></em><s id="r0wln"><b id="r0wln"><dd id="r0wln"></dd></b></s><s id="r0wln"><samp id="r0wln"><i id="r0wln"><meter id="r0wln"></meter></i></samp></s><nobr id="r0wln"><address id="r0wln"></address></nobr><strong id="r0wln"></strong><li id="r0wln"><strong id="r0wln"><sup id="r0wln"><strong id="r0wln"></strong></sup></strong></li><optgroup id="r0wln"></optgroup><td id="r0wln"><kbd id="r0wln"><div id="r0wln"></div></kbd></td><meter id="r0wln"></meter><meter id="r0wln"></meter><div id="r0wln"></div><menuitem id="r0wln"></menuitem><strong id="r0wln"><address id="r0wln"></address></strong><strike id="r0wln"></strike><acronym id="r0wln"><u id="r0wln"></u></acronym><output id="r0wln"></output><pre id="r0wln"></pre><del id="r0wln"></del><strong id="r0wln"></strong><center id="r0wln"><optgroup id="r0wln"><sub id="r0wln"></sub></optgroup></center><pre id="r0wln"></pre><mark id="r0wln"></mark><listing id="r0wln"></listing><tt id="r0wln"><rt id="r0wln"><optgroup id="r0wln"></optgroup></rt></tt><blockquote id="r0wln"></blockquote><u id="r0wln"></u><ruby id="r0wln"></ruby><style id="r0wln"><delect id="r0wln"><small id="r0wln"><progress id="r0wln"></progress></small></delect></style><th id="r0wln"><dl id="r0wln"></dl></th><output id="r0wln"><ol id="r0wln"><font id="r0wln"><menu id="r0wln"></menu></font></ol></output><rt id="r0wln"><small id="r0wln"></small></rt><tr id="r0wln"></tr><pre id="r0wln"><form id="r0wln"><p id="r0wln"><kbd id="r0wln"></kbd></p></form></pre><strong id="r0wln"></strong><code id="r0wln"><tr id="r0wln"><sup id="r0wln"></sup></tr></code><strong id="r0wln"><thead id="r0wln"></thead></strong><rp id="r0wln"></rp><label id="r0wln"></label><strike id="r0wln"><video id="r0wln"><strike id="r0wln"><th id="r0wln"></th></strike></video></strike><th id="r0wln"><form id="r0wln"><optgroup id="r0wln"><sub id="r0wln"></sub></optgroup></form></th><pre id="r0wln"><abbr id="r0wln"><source id="r0wln"></source></abbr></pre><strike id="r0wln"></strike><var id="r0wln"><font id="r0wln"><menu id="r0wln"><font id="r0wln"></font></menu></font></var><abbr id="r0wln"></abbr><style id="r0wln"></style><ruby id="r0wln"><dl id="r0wln"><th id="r0wln"></th></dl></ruby><form id="r0wln"></form><ol id="r0wln"></ol><dfn id="r0wln"><listing id="r0wln"><pre id="r0wln"></pre></listing></dfn><th id="r0wln"><track id="r0wln"><span id="r0wln"><small id="r0wln"></small></span></track></th><strike id="r0wln"><th id="r0wln"></th></strike><style id="r0wln"><small id="r0wln"><legend id="r0wln"><li id="r0wln"></li></legend></small></style><dfn id="r0wln"><div id="r0wln"><rp id="r0wln"><th id="r0wln"></th></rp></div></dfn><thead id="r0wln"></thead><tt id="r0wln"></tt><pre id="r0wln"></pre><rt id="r0wln"><delect id="r0wln"></delect></rt><ol id="r0wln"><small id="r0wln"><rt id="r0wln"><small id="r0wln"></small></rt></small></ol><style id="r0wln"></style><dfn id="r0wln"></dfn><ol id="r0wln"><small id="r0wln"></small></ol><pre id="r0wln"><mark id="r0wln"><strong id="r0wln"><output id="r0wln"></output></strong></mark></pre><address id="r0wln"><label id="r0wln"></label></address><menuitem id="r0wln"></menuitem><wbr id="r0wln"></wbr><small id="r0wln"><legend id="r0wln"><li id="r0wln"><dfn id="r0wln"></dfn></li></legend></small><style id="r0wln"></style><video id="r0wln"></video><i id="r0wln"><output id="r0wln"><var id="r0wln"><center id="r0wln"></center></var></output></i><thead id="r0wln"><nav id="r0wln"><thead id="r0wln"></thead></nav></thead><style id="r0wln"><ins id="r0wln"></ins></style><table id="r0wln"><wbr id="r0wln"><label id="r0wln"></label></wbr></table><nobr id="r0wln"><address id="r0wln"><table id="r0wln"><address id="r0wln"></address></table></address></nobr><pre id="r0wln"><var id="r0wln"></var></pre><span id="r0wln"></span><var id="r0wln"><font id="r0wln"></font></var><span id="r0wln"></span><track id="r0wln"></track><output id="r0wln"></output><video id="r0wln"><meter id="r0wln"><th id="r0wln"><pre id="r0wln"></pre></th></meter></video><font id="r0wln"><strong id="r0wln"></strong></font><ul id="r0wln"></ul><rt id="r0wln"></rt><acronym id="r0wln"></acronym><dfn id="r0wln"></dfn><var id="r0wln"></var><legend id="r0wln"><ruby id="r0wln"><dl id="r0wln"><ruby id="r0wln"></ruby></dl></ruby></legend><label id="r0wln"><tt id="r0wln"><style id="r0wln"><delect id="r0wln"></delect></style></tt></label><abbr id="r0wln"></abbr><blockquote id="r0wln"><style id="r0wln"><ins id="r0wln"><cite id="r0wln"></cite></ins></style></blockquote><tt id="r0wln"><strike id="r0wln"></strike></tt><bdo id="r0wln"></bdo><output id="r0wln"></output><span id="r0wln"><optgroup id="r0wln"><xmp id="r0wln"><label id="r0wln"></label></xmp></optgroup></span><kbd id="r0wln"><strong id="r0wln"><rp id="r0wln"></rp></strong></kbd><sup id="r0wln"><strong id="r0wln"></strong></sup><nobr id="r0wln"></nobr><wbr id="r0wln"><u id="r0wln"><big id="r0wln"></big></u></wbr><wbr id="r0wln"><u id="r0wln"><legend id="r0wln"><ruby id="r0wln"></ruby></legend></u></wbr><listing id="r0wln"></listing><pre id="r0wln"><ol id="r0wln"></ol></pre><nav id="r0wln"><thead id="r0wln"></thead></nav><sup id="r0wln"><table id="r0wln"><em id="r0wln"></em></table></sup><ruby id="r0wln"></ruby><delect id="r0wln"><style id="r0wln"></style></delect><rp id="r0wln"></rp><style id="r0wln"><progress id="r0wln"><track id="r0wln"><span id="r0wln"></span></track></progress></style><wbr id="r0wln"><u id="r0wln"></u></wbr><wbr id="r0wln"><ul id="r0wln"><strike id="r0wln"></strike></ul></wbr><font id="r0wln"></font><object id="r0wln"><tt id="r0wln"><strike id="r0wln"><tr id="r0wln"></tr></strike></tt></object><ul id="r0wln"></ul><del id="r0wln"><p id="r0wln"><mark id="r0wln"><label id="r0wln"></label></mark></p></del></div> </html>