<\/body>, melalui teg ERB <%= hasil %>. Teg ini berfungsi sebagai titik integrasi untuk memasukkan kandungan pandangan yang dipaparkan secara dinamik oleh Rails;\n<\/li>\n<\/ul>\n<\/details>\n\n\n\n<\/p>\n
?<\/p>\n
\n \n \n Hasilkan halaman ujian, dengan halaman pengawal dan tindakan html_test_1, html_test_2, html_test_3 dan html_test_4\n<\/h3>\n\n
\n Tunjukkan lagi…<\/summary>\n \n\n
$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-cdn --skip-test\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s\n<\/pre>\n\n\n
\n
Seperti semasa penciptaan pengawal dan tindakan di atas, laluan juga telah ditambah, membolehkan anda mengakses sebarang tindakan yang dibuat daripada pautan\n\n
\n \n \n Buka fail config\/routes.rb dalam VSCode\n<\/h3>\n\n
\n
Sertakan baris di bawah pada penghujung fail untuk mengarahkan punca halaman ke halaman pengawal yang dibuat sebelum ini dan html_test_1 tindakan. Oleh itu, halaman pertama yang akan dipaparkan semasa mengakses tapak web atau sistem anda ialah halaman html_test_1, daripada halaman pengawal. Jika tidak, ia akan memaparkan halaman rel lalai.\n<\/li>\n<\/ul>\n
$ cd classless-css-cdn && code .\n<\/pre>\n\n\n
\n
Anda boleh mengabaikan menambah laluan pada tindakan yang dibuat jika anda telah melepasi parameter --skip-routes semasa mencipta pengawal. Perintah penuh akan menjadi rails g controller page html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes\n<\/li>\n<\/ul>\n<\/details>\n\n\n\n<\/p>\n
?<\/p>\n
\n \n \n Memaparkan laluan Rel\n<\/h3>\n\n
\n Tunjukkan lagi…<\/summary>\n
Menggunakan terminal anda boleh memaparkan laluan dengan menentukan pengawal (dengan -c), contohnya dari halaman pengawal \n<\/p>\n\n
\n\n \n <%= content_for(:title) || \"Classless Css\" %><\/title>\n <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n <meta name=\"mobile-web-app-capable\" content=\"yes\">\n <%= csrf_meta_tags %>\n <%= csp_meta_tag %>\n\n <%= yield :head %>\n\n <%# Enable PWA manifest for installable apps (make sure to enable in config\/routes.rb too!) %>\n <%#= tag.link rel: \"manifest\", href: pwa_manifest_path(format: :json) %>\n\n <link rel=\"icon\" href=\"\/icon.png\" type=\"image\/png\">\n <link rel=\"icon\" href=\"\/icon.svg\" type=\"image\/svg+xml\">\n <link rel=\"apple-touch-icon\" href=\"\/icon.png\">\n\n <%# Includes all stylesheet files in app\/assets\/stylesheets %>\n <%= stylesheet_link_tag :app, \"data-turbo-track\": \"reload\" %>\n <%= javascript_importmap_tags %>\n <\/head>\n\n <body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <%= yield %>\n <\/body>\n<\/html>\n\n<\/pre>\n\n\n\n<p>Atau anda boleh memaparkan semua laluan dengan<br>\n<\/p>\n<pre><summary\nclass=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n>\n<\/pre>\n\n\n\n<ul>\n<li>Ia juga mungkin untuk mengakses laluan melalui penyemak imbas menggunakan alamat http:\/\/127.0.0.1:3000\/rails\/info\/routes. Jangan lupa untuk memulakan pelayan pembangunan dengan bin\/dev atau pelayan rel standard dengan pelayan rel daripada direktori akar projek anda. Pelayan pembangunan sedang \"mendengar\" untuk perubahan dalam fail javascript dan fail css untuk menjalankan pemprosesan yang diperlukan untuk menjadikannya tersedia kepada pengguna.<\/li>\n<li>Untuk perubahan pada fail ini dibuat dan dilihat serta-merta dalam penyemak imbas, adalah perlu untuk memasang permata seperti Rails Livre Reload.<\/li>\n<\/ul>\n\n\n\n<\/details><br>\n<\/p>\n\n<h3>\n \n \n Mari buat empat halaman dengan kandungan HTML untuk menguji gaya CSS.\n<\/h3>\n\n<p>Ruby on Rails menggunakan seni bina MVC (Model-View-Controller) secara lalai untuk mula mengatur projek anda. Kebanyakan kod anda disusun dalam folder berikut:<\/p>\n\n<ul>\n<li>Apabila kod itu berkaitan dengan logik domain\/perniagaan dan data, simpannya dalam folder apl\/model;<\/li>\n<li>Kod yang berkaitan dengan paparan (HTML, JSON, XML, dll...) akan berada dalam apl\/paparan;<\/li>\n<li>Kod yang berkaitan dengan kitaran hayat permintaan, akan berada dalam apl\/pengawal;<\/li>\n<\/ul>\n\n<p>?<\/p>\n\n<h3>\n \n \n Masukkan kandungan halaman html_test_1\n<\/h3>\n\n<p><details>\n <summary>Tunjukkan lagi…<\/summary>\n <ul>\n<li>Akses pautan https:\/\/github.com\/dbohdan\/classless-css\/blob\/master\/screenshot-page.html dan salin semua kandungan teg utama, seperti yang ditunjukkan di bawah\n<\/li>\n<\/ul>\n<pre>$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-cdn --skip-test\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s\n<\/pre>\n\n\n<ul>\n<li>\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n\n<h3>\n \n \n Mulakan pelayan Rails dan lihat HTML biasa yang hodoh?\n<\/h3>\n\n<p><details>\n <summary>Tunjukkan lagi…<\/summary>\n <ul>\n<li>Mulakan pelayan pembangunan Rails dengan bin\/dev atau pelayan standard dengan pelayan rails dan buka penyemak imbas pada 127.0.0.1:3000\n<\/li>\n<\/ul>\n<pre>$ cd classless-css-cdn && code .\n<\/pre>\n\n\n<ul>\n<li>Selepas membuka halaman, anda akan melihat di bahagian atas empat pautan yang kami tambahkan pada halaman html_test_1, html_test_2, html_test_3 dan html_test_4 yang kami buat sebelum ini.<\/li>\n<li>Begitu banyak kerja setakat ini. Buka setiap satu dan anda akan perasan bahawa HTML belum lagi digayakan dengan mana-mana CSS, yang akan kami lakukan seterusnya\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n<h3>\n \n \n Buka semula halaman app\/views\/layouts\/application.html.erb untuk memasukkan gaya CSS tanpa kelas melalui CDN\n<\/h3>\n\n<p><details>\n <summary>Tunjukkan lagi…<\/summary>\n <ul>\n<li>Selepas kandungan di bawah\n<\/li>\n<\/ul>\n<pre><summary\nclass=\"flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700\"\n>\n<\/pre>\n\n\n<ul>\n<li>Dan sebelum <\/head>, tampalkan kandungan berikut. Anda tidak memerlukan semua gaya ini, ia telah dimasukkan supaya anda boleh menguji pelbagai pilihan.\n<\/li>\n<\/ul>\n\n<pre>$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css-cdn --skip-test\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s\n<\/pre>\n\n\n\n<ul>\n<li>Kebanyakan gaya diulas, kecuali Normalize CSS dan Pico CSS\n<\/li>\n<li>Simpan fail dan muat semula halaman atau mulakan semula pelayan<\/li>\n<li>Untuk menguji gaya selain Pico CSS, ulas baris yang mengkonfigurasi CDN gaya, dalam kes ini baris <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/ @ picocss\/pico@2\/css\/pico.min.css\" \/> dan nyahtanda baris daripada gaya lain, contohnya, baris CSS Mudah.<\/li>\n<li>Untuk mengulas dan menyahkomen baris dengan VSCode, gunakan kombinasi kekunci Ctrl K C.\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n\n<h3>\n \n \n Sekarang ya, HTML yang bergaya?\n<\/h3>\n\n<p>Selepas menyimpan helaian gaya di atas dan memulakan pelayan Rails, anda akan melihat HTML anda digayakan dengan rangka kerja css yang dipilih.<\/p>\n\n<h3>\n \n \n Mod gelap\n<\/h3>\n\n<p>Sesetengah gaya mempunyai pilihan untuk mod gelap. Untuk mengesahkan, tukar tema komputer anda dalam pilihan penyesuaian warna. Cari dalam Windows untuk Dayakan mod gelap untuk apl dan tukar antara mod gelap atau terang dan halaman HTML berubah secara automatik selepas perubahan dalam sistem pengendalian al.<\/p>\n\n<h3>\n \n \n Langkah seterusnya\n<\/h3>\n\n<ul>\n<li>Atur gaya mengikut keutamaan anda;<\/li>\n<li>Jika anda ingin meluangkan sedikit masa lagi di bahagian hadapan, lihat pilihan penyesuaian untuk gaya kegemaran anda;<\/li>\n<li>Kemas kini secara dinamik perubahan yang dibuat pada projek dalam penyemak imbas menggunakan Rails Live Reload;<\/li>\n<li>Gunakan penggayaan daripada fail CSS projek, tanpa menggunakan CDN;<\/li>\n<li>Replikasi keupayaan rangka kerja CSS tanpa kelas menggunakan Tailwind;<\/li>\n<\/ul>\n\n<h2>\n \n \n Rujukan\n<\/h2>\n\n<ul>\n<li>https:\/\/dev.to\/leonardorafael\/the-classless-and-class-light-css-aproaches-2b98<\/li>\n<li>https:\/\/prismic.io\/blog\/best-css-frameworks<\/li>\n<li>\nhttps:\/\/saeedesmaili.com\/notes\/classless-css-libraries\/ <\/li>\n<li>https:\/\/dev.to\/logrocket\/comparing-classless-css-frameworks-3267<\/li>\n<li>https:\/\/github.com\/dbohdan\/classless-css<\/li>\n<li>https:\/\/github.com\/troxler\/awesome-css-frameworks<\/li>\n<\/ul>\n\n\n \n\n \n "} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/ms/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://www.miracleart.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a>
<a href="http://www.miracleart.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a>
<a href="http://www.miracleart.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a>
<a href="http://www.miracleart.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a>
<a href="http://www.miracleart.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a>
<a href="http://www.miracleart.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a>
<a href="http://www.miracleart.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a>
<a href="http://www.miracleart.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a>
<a href="http://www.miracleart.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ms')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="cari" onclick="searchs('ms')"><img src="/static/imghw/find.png" alt="cari"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Melayu<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:;" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/ms/" title="Rumah"
class="phpgenera_Details_mainL1a">Rumah</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ms/web-designer.html"
class="phpgenera_Details_mainL1a">hujung hadapan web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/ms/css-tutorial.html"
class="phpgenera_Details_mainL1a">tutorial css</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Ruby on Rails Front-end Rápido com Frameworks CSS Classless or Class-Light Usando CDN</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Ruby on Rails Front-end Rápido com Frameworks CSS Classless or Class-Light Usando CDN</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/ms/member/1246273.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/001/246/273/647834461a95f136.jpg" src="/static/imghw/default1.png" alt="DDD">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/ms/member/1246273.html" class="author_name">DDD</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Jan 04, 2025 pm 04:40 PM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" 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>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173598004387261.jpg" class="lazy" alt="Ruby on Rails Front-end Rápido com Frameworks CSS Classless ou Class-Light Usando CDN"></p>
<p>Jika anda mula membangun untuk web dan fokus anda bukan untuk mengkhususkan diri dalam bahagian hadapan, salah satu halangan yang paling menyakitkan ialah dapat dengan mudah menggayakan anda HTML hodoh .</p>
<p>Bagi mereka yang mempunyai kenalan pertama, ia adalah sesuatu yang membingungkan, mistik, ghaib yang cuba memahami HTML yang mempunyai urutan huruf dan nombor dengan kelas utiliti yang telah ditetapkan untuk menggunakan gaya pada HTML, contohnya:<br>
</p>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<p>Rangka kerja CSS yang menggunakan kelas utiliti adalah sangat baik, serba boleh, responsif, elegan dan mempunyai banyak kualiti lain, tetapi Tailwind CSS bukanlah satu-satunya penyelesaian. <strong>Jika anda memerlukan sesuatu yang cepat dan mudah, menggunakan rangka kerja CSS tanpa kelas atau kelas ringan akan menjadi penyelesaian yang lebih baik.</strong></p>
<p>Elemen HTML gaya Rangka Kerja CSS Tanpa Kelas secara langsung, tanpa kelas. Rangka kerja ringan kelas menggabungkan gaya automatik dengan beberapa kelas utiliti pilihan untuk penyesuaian, yang menambahkan fleksibiliti yang lebih besar kepada penggunaannya.</p>
<p>Menggunakan pendekatan tanpa kelas atau kelas ringan, anda boleh menyelesaikan penggayaan HTML dengan cepat dengan satu, dua atau tiga baris.</p>
<h3>
Kita akan lihat di bawah:
</h3>
<ul>
<li>Penggunaan rangka kerja Ruby on Rails dalam versi 8, dengan Propshaft dan Importmap;</li>
<li>Mengenal fail dengan susun atur standard halaman HTML;</li>
<li>Membuat dan menambah kandungan pada 4 halaman HTML untuk menguji penggayaan dengan CSS;</li>
<li>Sebutan ringkas tentang laluan yang dibuat untuk halaman;</li>
<li>Tukar reka letak lalai untuk memasukkan pautan ke halaman yang dibuat;</li>
<li>Tambahkan 12 rangka kerja CSS melalui CDN pada reka letak lalai;</li>
<li>Tahu cara untuk mengenal pasti sama ada rangka kerja CSS mempunyai mod terang dan gelap yang dikonfigurasikan secara lalai;</li>
<li>Cadangan untuk langkah seterusnya;</li>
</ul>
<h3>
Mulakan aplikasi Rails baharu
</h3>
<ul>
<li>Masa sebelum arahan rel digunakan untuk memaparkan masa pelaksanaannya pada akhir pelaksanaan arahan. Dalam contoh di bawah, ia mengambil masa 47 saat.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<p>Rails 8, dalam falsafah No Buildnya, akan menggunakan Propshaft secara lalai sebagai pustaka saluran paip aset dan Importmap sebagai pustaka JavaScript Kami meminta anda melangkau perpustakaan ujian dengan --skip-test.<br>
Jika perlu, anda boleh memproses JavaScript anda menggunakan esbuild dengan menghantar parameter --javascript esbuild. Importmap tidak melakukan sebarang binaan atau sebarang jenis pemprosesan pada JavaScript.</p>
<h3>
Buka projek dengan VSCode atau editor pilihan anda
</h3>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<p>?</p>
<h3>
Mengetahui apl susun atur Rails lalai/views/layouts/application.html.erb.
</h3>
<p><details>
<summary>Tunjukkan lagi…</summary>
<ul>
<li>Mengikut Konvensyen atas Konfigurasi (CoC), Rails menggunakan application.html.erb sebagai reka letak lalai untuk memaparkan semua halaman;</li>
<li>Fail asal dalam Rails 8 mesti mempunyai kandungan yang sama atau serupa seperti yang disalin di bawah:
</li>
</ul>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<ul>
<li>Bahagian atas dalam <kepala> … </head> ia mempunyai elemen struktur yang penting untuk halaman tersebut dipaparkan dan berfungsi dengan betul. Teg kepala digunakan untuk memasukkan metadata dan sumber penting yang membantu mengkonfigurasi gelagat halaman (dengan javascript), penampilannya (dengan CSS), hubungannya dengan sistem dan perkhidmatan lain dan tetapan keselamatan seperti perlindungan untuk CSRF dan CSP ;</li>
<li>Kandungan utama halaman akan dipaparkan di dalam <body>
</body>, melalui teg ERB <%= hasil %>. Teg ini berfungsi sebagai titik integrasi untuk memasukkan kandungan pandangan yang dipaparkan secara dinamik oleh Rails;
</li>
</ul>
</details>
</p>
<p>?</p>
<h3>
Hasilkan halaman ujian, dengan halaman pengawal dan tindakan html_test_1, html_test_2, html_test_3 dan html_test_4
</h3>
<p><details>
<summary>Tunjukkan lagi…</summary>
<br>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>Seperti semasa penciptaan pengawal dan tindakan di atas, laluan juga telah ditambah, membolehkan anda mengakses sebarang tindakan yang dibuat daripada pautan
<ul>
<li>localhost:3000/pages/html_test_1</li>
<li>localhost:3000/pages/html_test_2</li>
<li>localhost:3000/pages/html_test_3</li>
<li>localhost:3000/pages/html_test_4</li>
</ul>
</li>
</ul>
<p>?</p>
<h3>
Buka fail config/routes.rb dalam VSCode
</h3>
<ul>
<li>Sertakan baris di bawah pada penghujung fail untuk mengarahkan punca halaman ke halaman pengawal yang dibuat sebelum ini dan html_test_1 tindakan. Oleh itu, halaman pertama yang akan dipaparkan semasa mengakses tapak web atau sistem anda ialah halaman html_test_1, daripada halaman pengawal. Jika tidak, ia akan memaparkan halaman rel lalai.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<ul>
<li>Anda boleh mengabaikan menambah laluan pada tindakan yang dibuat jika anda telah melepasi parameter --skip-routes semasa mencipta pengawal. Perintah penuh akan menjadi rails g controller page html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes
</li>
</ul>
</details>
</p>
<p>?</p>
<h3>
Memaparkan laluan Rel
</h3>
<p><details>
<summary>Tunjukkan lagi…</summary>
<p>Menggunakan terminal anda boleh memaparkan laluan dengan menentukan pengawal (dengan -c), contohnya dari halaman pengawal<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title><%= content_for(:title) || "Classless Css" %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= yield :head %>
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/icon.png">
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
</pre>
<p>Atau anda boleh memaparkan semua laluan dengan<br>
</p>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<ul>
<li>Ia juga mungkin untuk mengakses laluan melalui penyemak imbas menggunakan alamat http://127.0.0.1:3000/rails/info/routes. Jangan lupa untuk memulakan pelayan pembangunan dengan bin/dev atau pelayan rel standard dengan pelayan rel daripada direktori akar projek anda. Pelayan pembangunan sedang "mendengar" untuk perubahan dalam fail javascript dan fail css untuk menjalankan pemprosesan yang diperlukan untuk menjadikannya tersedia kepada pengguna.</li>
<li>Untuk perubahan pada fail ini dibuat dan dilihat serta-merta dalam penyemak imbas, adalah perlu untuk memasang permata seperti Rails Livre Reload.</li>
</ul>
</details><br>
</p>
<h3>
Mari buat empat halaman dengan kandungan HTML untuk menguji gaya CSS.
</h3>
<p>Ruby on Rails menggunakan seni bina MVC (Model-View-Controller) secara lalai untuk mula mengatur projek anda. Kebanyakan kod anda disusun dalam folder berikut:</p>
<ul>
<li>Apabila kod itu berkaitan dengan logik domain/perniagaan dan data, simpannya dalam folder apl/model;</li>
<li>Kod yang berkaitan dengan paparan (HTML, JSON, XML, dll...) akan berada dalam apl/paparan;</li>
<li>Kod yang berkaitan dengan kitaran hayat permintaan, akan berada dalam apl/pengawal;</li>
</ul>
<p>?</p>
<h3>
Masukkan kandungan halaman html_test_1
</h3>
<p><details>
<summary>Tunjukkan lagi…</summary>
<ul>
<li>Akses pautan https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html dan salin semua kandungan teg utama, seperti yang ditunjukkan di bawah
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Mulakan pelayan Rails dan lihat HTML biasa yang hodoh?
</h3>
<p><details>
<summary>Tunjukkan lagi…</summary>
<ul>
<li>Mulakan pelayan pembangunan Rails dengan bin/dev atau pelayan standard dengan pelayan rails dan buka penyemak imbas pada 127.0.0.1:3000
</li>
</ul>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<ul>
<li>Selepas membuka halaman, anda akan melihat di bahagian atas empat pautan yang kami tambahkan pada halaman html_test_1, html_test_2, html_test_3 dan html_test_4 yang kami buat sebelum ini.</li>
<li>Begitu banyak kerja setakat ini. Buka setiap satu dan anda akan perasan bahawa HTML belum lagi digayakan dengan mana-mana CSS, yang akan kami lakukan seterusnya
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Buka semula halaman app/views/layouts/application.html.erb untuk memasukkan gaya CSS tanpa kelas melalui CDN
</h3>
<p><details>
<summary>Tunjukkan lagi…</summary>
<ul>
<li>Selepas kandungan di bawah
</li>
</ul>
<pre class="brush:php;toolbar:false"><summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
>
</pre>
<ul>
<li>Dan sebelum </head>, tampalkan kandungan berikut. Anda tidak memerlukan semua gaya ini, ia telah dimasukkan supaya anda boleh menguji pelbagai pilihan.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>Kebanyakan gaya diulas, kecuali Normalize CSS dan Pico CSS
</li>
<li>Simpan fail dan muat semula halaman atau mulakan semula pelayan</li>
<li>Untuk menguji gaya selain Pico CSS, ulas baris yang mengkonfigurasi CDN gaya, dalam kes ini baris <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ @ picocss/pico@2/css/pico.min.css" /> dan nyahtanda baris daripada gaya lain, contohnya, baris CSS Mudah.</li>
<li>Untuk mengulas dan menyahkomen baris dengan VSCode, gunakan kombinasi kekunci Ctrl K C.
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Sekarang ya, HTML yang bergaya?
</h3>
<p>Selepas menyimpan helaian gaya di atas dan memulakan pelayan Rails, anda akan melihat HTML anda digayakan dengan rangka kerja css yang dipilih.</p>
<h3>
Mod gelap
</h3>
<p>Sesetengah gaya mempunyai pilihan untuk mod gelap. Untuk mengesahkan, tukar tema komputer anda dalam pilihan penyesuaian warna. Cari dalam Windows untuk Dayakan mod gelap untuk apl dan tukar antara mod gelap atau terang dan halaman HTML berubah secara automatik selepas perubahan dalam sistem pengendalian al.</p>
<h3>
Langkah seterusnya
</h3>
<ul>
<li>Atur gaya mengikut keutamaan anda;</li>
<li>Jika anda ingin meluangkan sedikit masa lagi di bahagian hadapan, lihat pilihan penyesuaian untuk gaya kegemaran anda;</li>
<li>Kemas kini secara dinamik perubahan yang dibuat pada projek dalam penyemak imbas menggunakan Rails Live Reload;</li>
<li>Gunakan penggayaan daripada fail CSS projek, tanpa menggunakan CDN;</li>
<li>Replikasi keupayaan rangka kerja CSS tanpa kelas menggunakan Tailwind;</li>
</ul>
<h2>
Rujukan
</h2>
<ul>
<li>https://dev.to/leonardorafael/the-classless-and-class-light-css-aproaches-2b98</li>
<li>https://prismic.io/blog/best-css-frameworks</li>
<li>
https://saeedesmaili.com/notes/classless-css-libraries/ </li>
<li>https://dev.to/logrocket/comparing-classless-css-frameworks-3267</li>
<li>https://github.com/dbohdan/classless-css</li>
<li>https://github.com/troxler/awesome-css-frameworks</li>
</ul>
<p>Atas ialah kandungan terperinci Ruby on Rails Front-end Rápido com Frameworks CSS Classless or Class-Light Usando CDN. 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://www.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</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://www.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</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://www.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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://www.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>8637</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://www.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>1783</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://www.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>1727</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://www.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>1577</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://www.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>1442</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://www.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://www.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://www.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://www.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://www.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://www.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://www.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 id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" 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/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Kepekaan kes CSS: Memahami apa yang penting" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796821998.html" title="Kepekaan kes CSS: Memahami apa yang penting" class="phphistorical_Version2_mids_title">Kepekaan kes CSS: Memahami apa yang penting</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">Cssismostlycase-insensitive, buturlsandfontfamilynamesarecase-sensitif.1) propertiesandvalueslikecolor: merah; arenotcase-sensitif.2) urlsmustmatchtheserver'scase, mis.,</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" 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/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah AutoPrefixer dan bagaimana ia berfungsi?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_title">Apakah AutoPrefixer dan bagaimana ia berfungsi?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter 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/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah kaunter CSS?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796821606.html" title="Apakah kaunter CSS?" class="phphistorical_Version2_mids_title">Apakah kaunter CSS?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">Csscounterscanautomaticallynumbersectionsandlists.1) useCounter-resettoinitialize, counter-incrementToinCrease, andCounter () orcounters () todisplayvalues.2) CombinWithjavascriptfordynamicContentToenSureAccurateupdates.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" 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/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: Bilakah kes perkara (dan kapan tidak)?" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796821580.html" title="CSS: Bilakah kes perkara (dan kapan tidak)?" class="phphistorical_Version2_mids_title">CSS: Bilakah kes perkara (dan kapan tidak)?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">Dalam CSS, nama pemilih dan atribut adalah sensitif kes, manakala nilai, warna yang dinamakan, URL, dan atribut tersuai adalah sensitif kes. 1. Nama pemilih dan atribut adalah kes-tidak sensitif, seperti warna latar belakang dan warna latar belakang adalah sama. 2. Warna heksadesimal dalam nilai adalah sensitif kes, tetapi warna bernama adalah sensitif kes, seperti merah dan merah tidak sah. 3. URL adalah sensitif kes dan boleh menyebabkan masalah pemuatan fail. 4. Sifat tersuai (pembolehubah) adalah sensitif kes, dan anda perlu memberi perhatian kepada konsistensi kes apabila menggunakannya.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/ms/faq/1796821622.html" title="Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan" 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/175026469053848.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan" />
</a>
<a href="http://www.miracleart.cn/ms/faq/1796821622.html" title="Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan" class="phphistorical_Version2_mids_title">Sensitiviti kes dalam CSS: pemilih, sifat, dan nilai yang dijelaskan</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:38 AM</span>
<p class="Articlelist_txts_p">Cssselectorsandpropertynamesarecase-insensitive, whilevaluescanbecase-sensitivedependingoncontext.1) selectorslike'div'and'div'areequivalent.2) propertiesuchas'background-color'and'and'aretaretreatheatthlegase.3)</p>
</div>
</div>
<a href="http://www.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://www.miracleart.cn/ms/about/us.html">Tentang kita</a>
<a href="http://www.miracleart.cn/ms/about/disclaimer.html">Penafian</a>
<a href="http://www.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://www.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="scsie" class="pl_css_ganrao" style="display: none;"><em id="scsie"></em><kbd id="scsie"><nav id="scsie"><blockquote id="scsie"></blockquote></nav></kbd><pre id="scsie"><bdo id="scsie"><delect id="scsie"></delect></bdo></pre><option id="scsie"></option><wbr id="scsie"></wbr><del id="scsie"></del><td id="scsie"><acronym id="scsie"><tbody id="scsie"></tbody></acronym></td><dd id="scsie"><pre id="scsie"><s id="scsie"></s></pre></dd><li id="scsie"></li><sup id="scsie"><menu id="scsie"><xmp id="scsie"></xmp></menu></sup><code id="scsie"></code><em id="scsie"></em><center id="scsie"></center><dd id="scsie"></dd><dd id="scsie"></dd><abbr id="scsie"><strike id="scsie"><option id="scsie"></option></strike></abbr><acronym id="scsie"></acronym><abbr id="scsie"><s id="scsie"><delect id="scsie"></delect></s></abbr><input id="scsie"></input><dfn id="scsie"></dfn><code id="scsie"></code><tr id="scsie"></tr><option id="scsie"></option><sup id="scsie"></sup><fieldset id="scsie"><acronym id="scsie"><tbody id="scsie"></tbody></acronym></fieldset><samp id="scsie"></samp><optgroup id="scsie"></optgroup><delect id="scsie"></delect><noframes id="scsie"></noframes><pre id="scsie"></pre><tr id="scsie"></tr><dl id="scsie"><blockquote id="scsie"><bdo id="scsie"></bdo></blockquote></dl><li id="scsie"></li><strong id="scsie"></strong><code id="scsie"><wbr id="scsie"><abbr id="scsie"></abbr></wbr></code><delect id="scsie"></delect><input id="scsie"><tr id="scsie"><sup id="scsie"></sup></tr></input><center id="scsie"></center><kbd id="scsie"></kbd><blockquote id="scsie"></blockquote><input id="scsie"><blockquote id="scsie"><abbr id="scsie"></abbr></blockquote></input><kbd id="scsie"></kbd><wbr id="scsie"></wbr><xmp id="scsie"><button id="scsie"><object id="scsie"></object></button></xmp><bdo id="scsie"></bdo><tr id="scsie"></tr><center id="scsie"><abbr id="scsie"><strike id="scsie"></strike></abbr></center><strike id="scsie"><option id="scsie"><strong id="scsie"></strong></option></strike><cite id="scsie"></cite><pre id="scsie"><pre id="scsie"><s id="scsie"></s></pre></pre><samp id="scsie"></samp><object id="scsie"></object><object id="scsie"><cite id="scsie"><kbd id="scsie"></kbd></cite></object><blockquote id="scsie"><tbody id="scsie"><blockquote id="scsie"></blockquote></tbody></blockquote><option id="scsie"><noframes id="scsie"><dfn id="scsie"></dfn></noframes></option><strike id="scsie"></strike><nav id="scsie"><input id="scsie"><delect id="scsie"></delect></input></nav><tr id="scsie"><abbr id="scsie"><dl id="scsie"></dl></abbr></tr><center id="scsie"></center><pre id="scsie"></pre><option id="scsie"></option><optgroup id="scsie"></optgroup><menu id="scsie"></menu><delect id="scsie"></delect><blockquote id="scsie"></blockquote><strong id="scsie"><center id="scsie"><acronym id="scsie"></acronym></center></strong><nav id="scsie"></nav><xmp id="scsie"></xmp><option id="scsie"></option><ul id="scsie"><strong id="scsie"><xmp id="scsie"></xmp></strong></ul><small id="scsie"><code id="scsie"><del id="scsie"></del></code></small><xmp id="scsie"></xmp><input id="scsie"><tr id="scsie"><abbr id="scsie"></abbr></tr></input><abbr id="scsie"></abbr><menu id="scsie"></menu><sup id="scsie"></sup><s id="scsie"></s><wbr id="scsie"></wbr><delect id="scsie"><ul id="scsie"><fieldset id="scsie"></fieldset></ul></delect><abbr id="scsie"></abbr><wbr id="scsie"></wbr><input id="scsie"><strike id="scsie"><ul id="scsie"></ul></strike></input><abbr id="scsie"><small id="scsie"><tbody id="scsie"></tbody></small></abbr><nav id="scsie"></nav><delect id="scsie"><abbr id="scsie"><fieldset id="scsie"></fieldset></abbr></delect><blockquote id="scsie"><tbody id="scsie"><tr id="scsie"></tr></tbody></blockquote><td id="scsie"><acronym id="scsie"><tbody id="scsie"></tbody></acronym></td><pre id="scsie"></pre><pre id="scsie"></pre><blockquote id="scsie"></blockquote><wbr id="scsie"></wbr><input id="scsie"></input><strike id="scsie"><option id="scsie"><source id="scsie"></source></option></strike><xmp id="scsie"></xmp><xmp id="scsie"></xmp><nav id="scsie"></nav><td id="scsie"><blockquote id="scsie"><em id="scsie"></em></blockquote></td><acronym id="scsie"></acronym><code id="scsie"></code><center id="scsie"></center><dfn id="scsie"></dfn><code id="scsie"></code><center id="scsie"></center><strong id="scsie"></strong><input id="scsie"></input><td id="scsie"></td><wbr id="scsie"></wbr><tr id="scsie"></tr><abbr id="scsie"></abbr><kbd id="scsie"><abbr id="scsie"><center id="scsie"></center></abbr></kbd><td id="scsie"><button id="scsie"><object id="scsie"></object></button></td><td id="scsie"><acronym id="scsie"><tbody id="scsie"></tbody></acronym></td><del id="scsie"></del><source id="scsie"></source><rt id="scsie"></rt><td id="scsie"></td><abbr id="scsie"></abbr><ul id="scsie"><fieldset id="scsie"><dd id="scsie"></dd></fieldset></ul><ul id="scsie"></ul><tbody id="scsie"></tbody><noframes id="scsie"><fieldset id="scsie"><acronym id="scsie"></acronym></fieldset></noframes><rt id="scsie"></rt><tfoot id="scsie"></tfoot><strong id="scsie"></strong><nav id="scsie"></nav><em id="scsie"><cite id="scsie"><center id="scsie"></center></cite></em><acronym id="scsie"></acronym><em id="scsie"><cite id="scsie"><center id="scsie"></center></cite></em><kbd id="scsie"></kbd><em id="scsie"><optgroup id="scsie"><center id="scsie"></center></optgroup></em><dl id="scsie"></dl><table id="scsie"><th id="scsie"><blockquote id="scsie"></blockquote></th></table><ul id="scsie"></ul><kbd id="scsie"><nav id="scsie"><blockquote id="scsie"></blockquote></nav></kbd><blockquote id="scsie"></blockquote><tbody id="scsie"></tbody><bdo id="scsie"></bdo><li id="scsie"><object id="scsie"><del id="scsie"></del></object></li><abbr id="scsie"></abbr><s id="scsie"><sup id="scsie"><optgroup id="scsie"></optgroup></sup></s><dd id="scsie"></dd><th id="scsie"></th><dl id="scsie"></dl><noframes id="scsie"></noframes><menu id="scsie"></menu><tbody id="scsie"></tbody><dd id="scsie"><pre id="scsie"><strike id="scsie"></strike></pre></dd><cite id="scsie"></cite><dd id="scsie"></dd></div>
</html>