<sup id="uw8gw"></sup>
<fieldset id="uw8gw"><source id="uw8gw"></source></fieldset>
  • <option id="uw8gw"><code id="uw8gw"></code></option>
     <\/body>, via la balise ERB <%= rendement %>. Cette balise sert de point d'intégration pour inclure le contenu d'une vue rendue dynamiquement par Rails?;\n<\/li>\n<\/ul>\n<\/details>\n\n\n\n<\/p>\n
    ?<\/p>\n
    \n  \n  \n  Générer des pages de test, avec un contr?leur de pages et les actions html_test_1, html_test_2, html_test_3 et html_test_4\n<\/h3>\n\n
    \n  Afficher plus…<\/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
    • Comme lors de la création du contr?leur et des actions ci-dessus, les itinéraires ont également été ajoutés, permettant d'accéder à n'importe quelle action créée à partir des liens\n\n
        \n
      • localhost:3000\/pages\/html_test_1<\/li>\n
      • localhost:3000\/pages\/html_test_2<\/li>\n
      • localhost:3000\/pages\/html_test_3<\/li>\n
      • localhost:3000\/pages\/html_test_4<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n
        ?<\/p>\n
        \n  \n  \n  Ouvrez le fichier config\/routes.rb dans VSCode\n<\/h3>\n\n
          \n
        • Incluez la ligne ci-dessous à la fin du fichier pour diriger la racine de la page vers les pages du contr?leur précédemment créées et l'action html_test_1. Ainsi, la première page à afficher lors de l'accès à votre site Web ou système sera la page html_test_1, issue des pages du contr?leur. Sinon, il afficherait la page des rails par défaut.\n<\/li>\n<\/ul>\n
          $ cd classless-css-cdn && code .\n<\/pre>\n\n\n
            \n
          • Vous auriez pu ignorer l'ajout des routes aux actions créées si vous aviez passé le paramètre --skip-routes lors de la création du contr?leur. La commande complète deviendrait les pages du contr?leur Rails G 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  Affichage des itinéraires Rails\n<\/h3>\n\n
            \n  Afficher plus…<\/summary>\n  
            A l'aide du terminal vous pouvez afficher les routes en spécifiant un contr?leur (avec -c), par exemple depuis les pages du contr?leur
            \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://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1>\n    <%= yield %>\n  <\/body>\n<\/html>\n\n<\/pre>\n\n\n\n<p>Ou vous pouvez afficher tous les itinéraires avec<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>Il est également possible d'accéder aux itinéraires via le navigateur en utilisant l'adresse http:\/\/127.0.0.1:3000\/rails\/info\/routes. N'oubliez pas de démarrer le serveur de développement avec bin\/dev ou le serveur rails standard avec le serveur rails depuis le répertoire racine de votre projet. Le serveur de développement ? écoute ? les modifications des fichiers javascript et des fichiers css pour effectuer les traitements nécessaires pour les mettre à disposition des utilisateurs.<\/li>\n<li>Pour que les modifications de ces fichiers soient apportées et visualisées instantanément dans le navigateur, il est nécessaire d'installer une gemme comme Rails Livre Reload.<\/li>\n<\/ul>\n\n\n\n<\/details><br>\n<\/p>\n\n<h3>\n  \n  \n  Créons quatre pages avec du contenu HTML pour tester les styles CSS.\n<\/h3>\n\n<p>Ruby on Rails utilise l'architecture MVC (Model-View-Controller) par défaut pour commencer à organiser votre projet. Une grande partie de votre code est organisée dans les dossiers suivants?:<\/p>\n\n<ul>\n<li>Lorsque le code est lié à la logique et aux données du domaine\/métier, conservez-le dans le dossier app\/models?;<\/li>\n<li>Le code lié à la vue (HTML, JSON, XML, etc...) sera dans app\/views ;<\/li>\n<li>Le code lié au cycle de vie de la requête sera dans app\/controllers?;<\/li>\n<\/ul>\n\n<p>?<\/p>\n\n<h3>\n  \n  \n  Insérer le contenu de la page html_test_1\n<\/h3>\n\n<p><details>\n  <summary>Afficher plus…<\/summary>\n  <ul>\n<li>Accédez au lien https:\/\/github.com\/dbohdan\/classless-css\/blob\/master\/screenshot-page.html et copiez tout le contenu de la balise principale, comme indiqué ci-dessous\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  Démarrez le serveur Rails et voyez le vilain HTML simple??\n<\/h3>\n\n<p><details>\n  <summary>Afficher plus…<\/summary>\n  <ul>\n<li>Démarrez le serveur de développement Rails avec bin\/dev ou le serveur standard avec le serveur Rails et ouvrez le navigateur à 127.0.0.1:3000\n<\/li>\n<\/ul>\n<pre>$ cd classless-css-cdn && code .\n<\/pre>\n\n\n<ul>\n<li>Après avoir ouvert la page, vous verrez en haut les quatre liens que nous avons ajoutés aux pages html_test_1, html_test_2, html_test_3 et html_test_4 que nous avons créées précédemment.<\/li>\n<li>Tant de travail jusqu'à présent. Ouvrez chacun d'eux et vous remarquerez que le HTML n'a pas encore été stylisé avec du CSS, ce que nous ferons ensuite.\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n<h3>\n  \n  \n  Rouvrez la page app\/views\/layouts\/application.html.erb pour inclure les styles CSS sans classe via CDN\n<\/h3>\n\n<p><details>\n  <summary>Afficher plus…<\/summary>\n  <ul>\n<li>Après le contenu ci-dessous\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>Et avant <\/head>, collez le contenu suivant. Vous n'avez pas besoin de tous ces styles, ils ont été insérés pour que vous puissiez tester différentes options.\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>La plupart des styles sont commentés, à l'exception de Normalize CSS et Pico CSS\n<\/li>\n<li>Enregistrez le fichier et actualisez la page ou redémarrez le serveur<\/li>\n<li>Pour tester un style autre que Pico CSS, commentez la ligne qui configure le CDN du style, en l'occurrence la ligne <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/ @ picocss\/pico@2\/css\/pico.min.css\" \/> et décommentez la ligne d'un autre style, par exemple, la ligne Simple CSS.<\/li>\n<li>Pour commenter et décommenter une ligne avec VSCode, utilisez la combinaison de touches Ctrl K C.\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n\n<h3>\n  \n  \n  Maintenant oui, du HTML élégant ?\n<\/h3>\n\n<p>Après avoir enregistré les feuilles de style ci-dessus et démarré le serveur Rails, vous verrez votre HTML stylisé avec les frameworks CSS choisis.<\/p>\n\n<h3>\n  \n  \n  Mode sombre\n<\/h3>\n\n<p>Certains styles ont l'option du mode sombre. Pour confirmer, changez le thème de votre ordinateur dans les options de personnalisation des couleurs. Recherchez dans Windows Activer le mode sombre pour les applications et basculez entre le mode sombre ou clair et la page HTML change automatiquement après le changement de système d'exploitation al.<\/p>\n\n<h3>\n  \n  \n  Prochaines étapes\n<\/h3>\n\n<ul>\n<li>Organisez les styles selon vos préférences?;<\/li>\n<li>Si vous souhaitez passer un peu plus de temps sur le frontend, consultez les options de personnalisation de votre style préféré?;<\/li>\n<li>Mettre à jour dynamiquement les modifications apportées au projet dans le navigateur à l'aide de Rails Live Reload?;<\/li>\n<li>Utiliser le style des fichiers CSS du projet, sans utiliser CDN?;<\/li>\n<li>Répliquer la capacité du framework CSS sans classe à l'aide de Tailwind?;<\/li>\n<\/ul>\n\n<h2>\n  \n  \n  Références\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="wjcelcm34c"   class="head">
        <div   id="wjcelcm34c"   class="haed_left">
            <div   id="wjcelcm34c"   class="haed_logo">
                <a href="http://ipnx.cn/fr/" title="" class="haed_logo_a">
                    <img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
                </a>
            </div>
            <div   id="wjcelcm34c"   class="head_nav">
                <div   id="wjcelcm34c"   class="head_navs">
                    <a href="javascript:;" title="communauté" class="head_nava head_nava-template1">communauté</a>
                    <div   class="wjcelcm34c"   id="dropdown-template1" style="display: none;">
                        <div   id="wjcelcm34c"   class="languagechoose">
                            <a href="http://ipnx.cn/fr/article.html" title="Articles" class="languagechoosea on">Articles</a>
                            <a href="http://ipnx.cn/fr/faq/zt" title="Sujets" class="languagechoosea">Sujets</a>
                            <a href="http://ipnx.cn/fr/wenda.html" title="Questions et réponses" class="languagechoosea">Questions et réponses</a>
                        </div>
                    </div>
                </div>

                <div   id="wjcelcm34c"   class="head_navs">
                    <a href="javascript:;" title="Apprendre" class="head_nava head_nava-template1_1">Apprendre</a>
                    <div   class="wjcelcm34c"   id="dropdown-template1_1" style="display: none;">
                        <div   id="wjcelcm34c"   class="languagechoose">
                            <a href="http://ipnx.cn/fr/course.html" title="Cours" class="languagechoosea on">Cours</a>
                            <a href="http://ipnx.cn/fr/dic/" title="Dictionnaire de programmation" class="languagechoosea">Dictionnaire de programmation</a>
                        </div>
                    </div>
                </div>

                <div   id="wjcelcm34c"   class="head_navs">
                    <a href="javascript:;" title="Bibliothèque d'outils" class="head_nava head_nava-template1_2">Bibliothèque d'outils</a>
                    <div   class="wjcelcm34c"   id="dropdown-template1_2" style="display: none;">
                        <div   id="wjcelcm34c"   class="languagechoose">
                            <a href="http://ipnx.cn/fr/toolset/development-tools" title="Outils de développement" class="languagechoosea on">Outils de développement</a>
                            <a href="http://ipnx.cn/fr/toolset/website-source-code" title="Code source du site Web" class="languagechoosea">Code source du site Web</a>
                            <a href="http://ipnx.cn/fr/toolset/php-libraries" title="Bibliothèques PHP" class="languagechoosea">Bibliothèques PHP</a>
                            <a href="http://ipnx.cn/fr/toolset/js-special-effects" title="Effets spéciaux JS" class="languagechoosea on">Effets spéciaux JS</a>
                            <a href="http://ipnx.cn/fr/toolset/website-materials" title="Matériel du site Web" class="languagechoosea on">Matériel du site Web</a>
                            <a href="http://ipnx.cn/fr/toolset/extension-plug-ins" title="Plugins d'extension" class="languagechoosea on">Plugins d'extension</a>
                        </div>
                    </div>
                </div>

                <div   id="wjcelcm34c"   class="head_navs">
                    <a href="http://ipnx.cn/fr/ai" title="Outils d'IA" class="head_nava head_nava-template1_3">Outils d'IA</a>
                </div>

                <div   id="wjcelcm34c"   class="head_navs">
                    <a href="javascript:;" title="Loisirs" class="head_nava head_nava-template1_3">Loisirs</a>
                    <div   class="wjcelcm34c"   id="dropdown-template1_3" style="display: none;">
                        <div   id="wjcelcm34c"   class="languagechoose">
                            <a href="http://ipnx.cn/fr/game" title="Téléchargement du jeu" class="languagechoosea on">Téléchargement du jeu</a>
                            <a href="http://ipnx.cn/fr/mobile-game-tutorial/" title="Tutoriels de jeu" class="languagechoosea">Tutoriels de jeu</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
                    <div   id="wjcelcm34c"   class="head_search">
                <input id="key_words"  onkeydown="if (event.keyCode == 13) searchs('fr')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
                <a href="javascript:;" title="recherche"  onclick="searchs('fr')"><img src="/static/imghw/find.png" alt="recherche"></a>
            </div>
                <div   id="wjcelcm34c"   class="head_right">
            <div   id="wjcelcm34c"   class="haed_language">
                <a href="javascript:;" class="layui-btn haed_language_btn">Fran?ais<i class="layui-icon layui-icon-triangle-d"></i></a>
                <div   class="wjcelcm34c"   id="dropdown-template" style="display: none;">
                    <div   id="wjcelcm34c"   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:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
                                                <a href="javascript:;" title="Fran?ais" class="languagechoosea">Fran?ais</a>
                                                <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
                                            </div>
                </div>
            </div>
            <span id="wjcelcm34c"    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="wjcelcm34c"   class="Article_Details_main">
			<div   id="wjcelcm34c"   class="Article_Details_main1">
							<div   id="wjcelcm34c"   class="Article_Details_main1M">
					<div   id="wjcelcm34c"   class="phpgenera_Details_mainL1">
						<a href="http://ipnx.cn/fr/" title="Maison"
							class="phpgenera_Details_mainL1a">Maison</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://ipnx.cn/fr/web-designer.html"
							class="phpgenera_Details_mainL1a">interface Web</a>
						<img src="/static/imghw/top_right.png" alt="" />
												<a href="http://ipnx.cn/fr/css-tutorial.html"
							class="phpgenera_Details_mainL1a">tutoriel CSS</a>
						<img src="/static/imghw/top_right.png" alt="" />
						<span>Ruby on Rails Front-end Rapide avec Frameworks CSS Classless ou Class-Light en utilisant CDN</span>
					</div>
					
					<div   id="wjcelcm34c"   class="Articlelist_txts">
						<div   id="wjcelcm34c"   class="Articlelist_txts_info">
							<h1 class="Articlelist_txts_title">Ruby on Rails Front-end Rapide avec Frameworks CSS Classless ou Class-Light en utilisant CDN</h1>
							<div   id="wjcelcm34c"   class="Articlelist_txts_info_head">
								<div   id="wjcelcm34c"   class="author_info">
									<a href="http://ipnx.cn/fr/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="wjcelcm34c"   class="author_detail">
																			<a href="http://ipnx.cn/fr/member/1246273.html" class="author_name">DDD</a>
                                										</div>
								</div>
                			</div>
							<span id="wjcelcm34c"    class="Articlelist_txts_time">Jan 04, 2025 pm	 04:40 PM</span>
														
						</div>
					</div>
					<hr />
					<div   id="wjcelcm34c"   class="article_main php-article">
						<div   id="wjcelcm34c"   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>Si vous commencez à développer pour le Web et que votre objectif n'est pas de vous spécialiser dans le front-end, l'un des obstacles les plus douloureux est de pouvoir facilement styliser votre HTML moche.</p>

<p>Pour ceux qui ont le premier contact, c'est quelque chose d'énigmatique, de mystique, de surnaturel d'essayer de comprendre le HTML qui a une séquence de lettres et de chiffres avec des classes utilitaires prédéfinies pour appliquer des styles au HTML, par exemple?:<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>Les frameworks CSS qui utilisent des classes utilitaires sont excellents, polyvalents, réactifs, élégants et possèdent de nombreuses autres qualités, mais Tailwind CSS n'est pas la seule solution. <strong>Si vous avez besoin de quelque chose de rapide et de plus simple, utiliser un framework CSS sans classe ou léger en classe sera une meilleure solution.</strong></p>

<p>Les frameworks CSS sans classes stylisent les éléments HTML directement, sans classes. Les frameworks Class-light combinent des styles automatiques avec certaines classes utilitaires facultatives pour la personnalisation, ce qui ajoute une plus grande polyvalence à leur utilisation.</p>

<p>En utilisant une approche sans classe ou légère, vous pouvez rapidement résoudre le style HTML avec une, deux ou trois lignes.</p>

<h3>
  
  
  Nous verrons ci-dessous :
</h3>

<ul>
<li>Utilisation du framework Ruby on Rails en version 8, avec Prop Shaft et Importmap ;</li>
<li>Apprendre à conna?tre le fichier avec la mise en page standard des pages HTML?;</li>
<li>Création et ajout de contenu à 4 pages HTML pour tester le style avec CSS?;</li>
<li>Une brève mention des itinéraires créés pour les pages;</li>
<li>Modifiez la mise en page par défaut pour inclure le lien vers les pages créées?;</li>
<li>Ajoutez 12 frameworks CSS via CDN à la mise en page par défaut?;</li>
<li>Savoir identifier si les frameworks CSS ont les modes clair et sombre configurés par défaut?;</li>
<li>Suggestions pour les prochaines étapes?;</li>
</ul>

<h3>
  
  
  Démarrer une nouvelle application Rails
</h3>

<ul>
<li>Le temps avant la commande rails est utilisé pour afficher son temps d'exécution à la fin de l'exécution de la commande. Dans l'exemple ci-dessous, cela a pris 47 secondes.
</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, dans sa philosophie No Build, utilisera par défaut Prop Shaft comme bibliothèque de pipeline d'actifs et Importmap comme bibliothèque JavaScript. Nous vous demandons d'ignorer la bibliothèque de test avec --skip-test.<br>
Si nécessaire, vous pouvez traiter votre JavaScript à l'aide d'esbuild en passant le paramètre --javascript esbuild. Importmap n'effectue aucune construction ni aucun type de traitement sur JavaScript.</p>
<h3>
  
  
  Ouvrez le projet avec VSCode ou votre éditeur préféré
</h3>


<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>


<p>?</p>
<h3>
  
  
  Conna?tre la mise en page Rails par défaut app/views/layouts/application.html.erb.
</h3>

<p><details>
  <summary>Afficher plus…</summary>
  <ul>
<li>Par convention sur la configuration (CoC), Rails utilise application.html.erb comme mise en page par défaut pour afficher toutes les pages?;</li>
<li>Le fichier original dans Rails 8 doit avoir un contenu identique ou similaire à celui copié ci-dessous?:
</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>La partie supérieure de la <tête> … </tête> ils possèdent les éléments structurels importants pour que la page soit rendue et fonctionne correctement. La balise head est utilisée pour inclure des métadonnées et des ressources importantes qui aident à configurer le comportement de la page (avec javascript), son apparence (avec CSS), sa relation avec d'autres systèmes et services et les paramètres de sécurité tels que la protection contre CSRF et CSP ;</li>
<li>Le contenu principal des pages sera rendu dans <body> 
</body>, via la balise ERB <%= rendement %>. Cette balise sert de point d'intégration pour inclure le contenu d'une vue rendue dynamiquement par Rails?;
</li>
</ul>
</details>



</p>
<p>?</p>
<h3>
  
  
  Générer des pages de test, avec un contr?leur de pages et les actions html_test_1, html_test_2, html_test_3 et html_test_4
</h3>

<p><details>
  <summary>Afficher plus…</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>Comme lors de la création du contr?leur et des actions ci-dessus, les itinéraires ont également été ajoutés, permettant d'accéder à n'importe quelle action créée à partir des liens

<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>
  
  
  Ouvrez le fichier config/routes.rb dans VSCode
</h3>

<ul>
<li>Incluez la ligne ci-dessous à la fin du fichier pour diriger la racine de la page vers les pages du contr?leur précédemment créées et l'action html_test_1. Ainsi, la première page à afficher lors de l'accès à votre site Web ou système sera la page html_test_1, issue des pages du contr?leur. Sinon, il afficherait la page des rails par défaut.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>


<ul>
<li>Vous auriez pu ignorer l'ajout des routes aux actions créées si vous aviez passé le paramètre --skip-routes lors de la création du contr?leur. La commande complète deviendrait les pages du contr?leur Rails G html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes
</li>
</ul>
</details>



</p>
<p>?</p>
<h3>
  
  
  Affichage des itinéraires Rails
</h3>

<p><details>
  <summary>Afficher plus…</summary>
  <p>A l'aide du terminal vous pouvez afficher les routes en spécifiant un contr?leur (avec -c), par exemple depuis les pages du contr?leur<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>Ou vous pouvez afficher tous les itinéraires avec<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>Il est également possible d'accéder aux itinéraires via le navigateur en utilisant l'adresse http://127.0.0.1:3000/rails/info/routes. N'oubliez pas de démarrer le serveur de développement avec bin/dev ou le serveur rails standard avec le serveur rails depuis le répertoire racine de votre projet. Le serveur de développement ? écoute ? les modifications des fichiers javascript et des fichiers css pour effectuer les traitements nécessaires pour les mettre à disposition des utilisateurs.</li>
<li>Pour que les modifications de ces fichiers soient apportées et visualisées instantanément dans le navigateur, il est nécessaire d'installer une gemme comme Rails Livre Reload.</li>
</ul>



</details><br>
</p>

<h3>
  
  
  Créons quatre pages avec du contenu HTML pour tester les styles CSS.
</h3>

<p>Ruby on Rails utilise l'architecture MVC (Model-View-Controller) par défaut pour commencer à organiser votre projet. Une grande partie de votre code est organisée dans les dossiers suivants?:</p>

<ul>
<li>Lorsque le code est lié à la logique et aux données du domaine/métier, conservez-le dans le dossier app/models?;</li>
<li>Le code lié à la vue (HTML, JSON, XML, etc...) sera dans app/views ;</li>
<li>Le code lié au cycle de vie de la requête sera dans app/controllers?;</li>
</ul>

<p>?</p>

<h3>
  
  
  Insérer le contenu de la page html_test_1
</h3>

<p><details>
  <summary>Afficher plus…</summary>
  <ul>
<li>Accédez au lien https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html et copiez tout le contenu de la balise principale, comme indiqué ci-dessous
</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>
  
  
  Démarrez le serveur Rails et voyez le vilain HTML simple??
</h3>

<p><details>
  <summary>Afficher plus…</summary>
  <ul>
<li>Démarrez le serveur de développement Rails avec bin/dev ou le serveur standard avec le serveur Rails et ouvrez le navigateur à 127.0.0.1:3000
</li>
</ul>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>


<ul>
<li>Après avoir ouvert la page, vous verrez en haut les quatre liens que nous avons ajoutés aux pages html_test_1, html_test_2, html_test_3 et html_test_4 que nous avons créées précédemment.</li>
<li>Tant de travail jusqu'à présent. Ouvrez chacun d'eux et vous remarquerez que le HTML n'a pas encore été stylisé avec du CSS, ce que nous ferons ensuite.
</li>
</ul>

</details><br>
<br>
</p>
<h3>
  
  
  Rouvrez la page app/views/layouts/application.html.erb pour inclure les styles CSS sans classe via CDN
</h3>

<p><details>
  <summary>Afficher plus…</summary>
  <ul>
<li>Après le contenu ci-dessous
</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>Et avant </head>, collez le contenu suivant. Vous n'avez pas besoin de tous ces styles, ils ont été insérés pour que vous puissiez tester différentes options.
</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>La plupart des styles sont commentés, à l'exception de Normalize CSS et Pico CSS
</li>
<li>Enregistrez le fichier et actualisez la page ou redémarrez le serveur</li>
<li>Pour tester un style autre que Pico CSS, commentez la ligne qui configure le CDN du style, en l'occurrence la ligne <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ @ picocss/pico@2/css/pico.min.css" /> et décommentez la ligne d'un autre style, par exemple, la ligne Simple CSS.</li>
<li>Pour commenter et décommenter une ligne avec VSCode, utilisez la combinaison de touches Ctrl K C.
</li>
</ul>

</details><br>
<br>
</p>

<h3>
  
  
  Maintenant oui, du HTML élégant ?
</h3>

<p>Après avoir enregistré les feuilles de style ci-dessus et démarré le serveur Rails, vous verrez votre HTML stylisé avec les frameworks CSS choisis.</p>

<h3>
  
  
  Mode sombre
</h3>

<p>Certains styles ont l'option du mode sombre. Pour confirmer, changez le thème de votre ordinateur dans les options de personnalisation des couleurs. Recherchez dans Windows Activer le mode sombre pour les applications et basculez entre le mode sombre ou clair et la page HTML change automatiquement après le changement de système d'exploitation al.</p>

<h3>
  
  
  Prochaines étapes
</h3>

<ul>
<li>Organisez les styles selon vos préférences?;</li>
<li>Si vous souhaitez passer un peu plus de temps sur le frontend, consultez les options de personnalisation de votre style préféré?;</li>
<li>Mettre à jour dynamiquement les modifications apportées au projet dans le navigateur à l'aide de Rails Live Reload?;</li>
<li>Utiliser le style des fichiers CSS du projet, sans utiliser CDN?;</li>
<li>Répliquer la capacité du framework CSS sans classe à l'aide de Tailwind?;</li>
</ul>

<h2>
  
  
  Références
</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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p>


						</div>
					</div>
					<div   id="wjcelcm34c"   class="wzconShengming_sp">
						<div   id="wjcelcm34c"   class="bzsmdiv_sp">Déclaration de ce site Web</div>
						<div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefa?on, veuillez contacter 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="wjcelcm34c"   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="wjcelcm34c"   class="phpgenera_Details_mainR4">
						<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
							<div   id="wjcelcm34c"   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>Article chaud</h2>
							</div>
							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottom">
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796832397.html" title="Guide de construction de Grass Wonder | Uma musume joli derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction de Grass Wonder | Uma musume joli derby</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 Il y a quelques semaines</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796833110.html" title="<??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 Il y a quelques semaines</span>
										<span>By DDD</span>
									</div>
								</div>
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Schedule (juillet 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Schedule (juillet 2025)</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 Il y a quelques semaines</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796836699.html" title="Guide de température de Rimworld Odyssey pour les navires et Gravtech" class="phpgenera_Details_mainR4_bottom_title">Guide de température de Rimworld Odyssey pour les navires et Gravtech</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 Il y a quelques semaines</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796831905.html" title="Windows Security est vide ou ne montre pas les options" class="phpgenera_Details_mainR4_bottom_title">Windows Security est vide ou ne montre pas les options</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 Il y a quelques semaines</span>
										<span>By 下次還敢</span>
									</div>
								</div>
														</div>
							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
								<a href="http://ipnx.cn/fr/article.html">Afficher plus</a>
							</div>
						</div>
					</div> -->


											<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3">
							<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
								<div   id="wjcelcm34c"   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>Outils d'IA chauds</h2>
								</div>
								<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_bottom">
																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/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="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
													<h3>Undress AI Tool</h3>
												</a>
												<p>Images de déshabillage gratuites</p>
											</div>
										</div>
																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/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="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
													<h3>Undresser.AI Undress</h3>
												</a>
												<p>Application basée sur l'IA pour créer des photos de nu réalistes</p>
											</div>
										</div>
																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/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="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
													<h3>AI Clothes Remover</h3>
												</a>
												<p>Outil d'IA en ligne pour supprimer les vêtements des photos.</p>
											</div>
										</div>
																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/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="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
													<h3>Clothoff.io</h3>
												</a>
												<p>Dissolvant de vêtements AI</p>
											</div>
										</div>
																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/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="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
													<h3>Video Face Swap</h3>
												</a>
												<p>échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!</p>
											</div>
										</div>
																</div>
								<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
									<a href="http://ipnx.cn/fr/ai">Afficher plus</a>
								</div>
							</div>
						</div>
					


					<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4">
						<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
							<div   id="wjcelcm34c"   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>Article chaud</h2>
							</div>
							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottom">
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796832397.html" title="Guide de construction de Grass Wonder | Uma musume joli derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction de Grass Wonder | Uma musume joli derby</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 Il y a quelques semaines</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796833110.html" title="<??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 nuits dans la forêt - tous les badges et comment les déverrouiller</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 Il y a quelques semaines</span>
										<span>By DDD</span>
									</div>
								</div>
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Schedule (juillet 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Schedule (juillet 2025)</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 Il y a quelques semaines</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796836699.html" title="Guide de température de Rimworld Odyssey pour les navires et Gravtech" class="phpgenera_Details_mainR4_bottom_title">Guide de température de Rimworld Odyssey pour les navires et Gravtech</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>3 Il y a quelques semaines</span>
										<span>By Jack chen</span>
									</div>
								</div>
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/1796831905.html" title="Windows Security est vide ou ne montre pas les options" class="phpgenera_Details_mainR4_bottom_title">Windows Security est vide ou ne montre pas les options</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<span>4 Il y a quelques semaines</span>
										<span>By 下次還敢</span>
									</div>
								</div>
														</div>
							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
								<a href="http://ipnx.cn/fr/article.html">Afficher plus</a>
							</div>
						</div>
					</div>


											<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3">
							<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
								<div   id="wjcelcm34c"   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>Outils chauds</h2>
								</div>
								<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_bottom">
																		<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/toolset/development-tools/92" title="Bloc-notes++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="Bloc-notes++7.3.1" />
											</a>
											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_title">
													<h3>Bloc-notes++7.3.1</h3>
												</a>
												<p>éditeur de code facile à utiliser et gratuit</p>
											</div>
										</div>
																			<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" 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 version chinoise" />
											</a>
											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 version chinoise</h3>
												</a>
												<p>Version chinoise, très simple à utiliser</p>
											</div>
										</div>
																			<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/toolset/development-tools/121" title="Envoyer 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="Envoyer Studio 13.0.1" />
											</a>
											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_title">
													<h3>Envoyer Studio 13.0.1</h3>
												</a>
												<p>Puissant environnement de développement intégré PHP</p>
											</div>
										</div>
																			<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/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="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
													<h3>Dreamweaver CS6</h3>
												</a>
												<p>Outils de développement Web visuel</p>
											</div>
										</div>
																			<div   id="wjcelcm34c"   class="phpmain_tab2_mids_top">
											<a href="http://ipnx.cn/fr/toolset/development-tools/500" title="SublimeText3 version 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 version Mac" />
											</a>
											<div   id="wjcelcm34c"   class="phpmain_tab2_mids_info">
												<a href="http://ipnx.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_title">
													<h3>SublimeText3 version Mac</h3>
												</a>
												<p>Logiciel d'édition de code au niveau de Dieu (SublimeText3)</p>
											</div>
										</div>
																	</div>
								<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
									<a href="http://ipnx.cn/fr/ai">Afficher plus</a>
								</div>
							</div>
						</div>
										

					
					<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4">
						<div   id="wjcelcm34c"   class="phpmain1_4R_readrank">
							<div   id="wjcelcm34c"   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>Sujets chauds</h2>
							</div>
							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottom">
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/laravel-tutori" title="Tutoriel Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutoriel Laravel</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1597</span>
										</div>
										<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>29</span>
										</div>
									</div>
								</div>
															<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms">
									<a href="http://ipnx.cn/fr/faq/php-tutorial" title="Tutoriel PHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel PHP</a>
									<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_info">
										<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/eyess.png" alt="" />
											<span>1488</span>
										</div>
										<div   id="wjcelcm34c"   class="phpgenera_Details_mainR4_bottoms_infos">
											<img src="/static/imghw/tiezi.png" alt="" />
											<span>72</span>
										</div>
									</div>
								</div>
														</div>
							<div   id="wjcelcm34c"   class="phpgenera_Details_mainR3_more">
								<a href="http://ipnx.cn/fr/faq/zt">Afficher plus</a>
							</div>
						</div>
					</div>
				</div>
			</div>
							<div   id="wjcelcm34c"   class="Article_Details_main2">
					<div   id="wjcelcm34c"   class="phpgenera_Details_mainL4">
						<div   id="wjcelcm34c"   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="wjcelcm34c"   class="phpgenera_Details_mainL4_info">

													<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
								<a href="http://ipnx.cn/fr/faq/1796831408.html" title="Tutoriel CSS pour créer des filateurs et des animations de chargement" 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/431/639/175181807052041.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Tutoriel CSS pour créer des filateurs et des animations de chargement" />
								</a>
								<a href="http://ipnx.cn/fr/faq/1796831408.html" title="Tutoriel CSS pour créer des filateurs et des animations de chargement" class="phphistorical_Version2_mids_title">Tutoriel CSS pour créer des filateurs et des animations de chargement</a>
								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 07, 2025 am	 12:07 AM</span>
								<p class="Articlelist_txts_p">Il existe trois fa?ons de créer un rotateur de chargement CSS: 1. Utilisez le rotateur de base des frontières pour obtenir une animation simple via HTML et CSS; 2. Utilisez un rotateur personnalisé de plusieurs points pour atteindre l'effet de saut à travers différents temps de retard; 3. Ajoutez un rotateur dans le bouton et basculez les classes via JavaScript pour afficher l'état de chargement. Chaque approche souligne l'importance des détails de conception tels que la couleur, la taille, l'accessibilité et l'optimisation des performances pour améliorer l'expérience utilisateur.</p>
							</div>
														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
								<a href="http://ipnx.cn/fr/faq/1796831743.html" title="ATTENTION DES PROBLèMES ET PRéFIXES DE COMPATIBILITé DE BROWSER 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/175182386183257.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="ATTENTION DES PROBLèMES ET PRéFIXES DE COMPATIBILITé DE BROWSER CSS" />
								</a>
								<a href="http://ipnx.cn/fr/faq/1796831743.html" title="ATTENTION DES PROBLèMES ET PRéFIXES DE COMPATIBILITé DE BROWSER CSS" class="phphistorical_Version2_mids_title">ATTENTION DES PROBLèMES ET PRéFIXES DE COMPATIBILITé DE BROWSER CSS</a>
								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 07, 2025 am	 01:44 AM</span>
								<p class="Articlelist_txts_p">Pour faire face à la compatibilité du navigateur CSS et aux problèmes de préfixe, vous devez comprendre les différences de prise en charge du navigateur et utiliser raisonnablement les préfixes des fournisseurs. 1. Comprendre les problèmes communs tels que Flexbox et le support de la grille, Position: Sticky Invalid et les performances d'animation sont différentes; 2. Vérifier l'état du support de la fonction de confirmation de Caniuse; 3. Utilisez correctement -webkit-, -moz-, -ms-, -o- et autres préfixes du fabricant; 4. Il est recommandé d'utiliser AutopRefixer pour ajouter automatiquement les préfixes; 5. Installez PostCSS et configurez le navigateur pour spécifier le navigateur cible; 6. Gérer automatiquement la compatibilité pendant la construction; 7. Les fonctionnalités de détection modernizr peuvent être utilisées pour les anciens projets; 8. Pas besoin de poursuivre la cohérence de tous les navigateurs,</p>
							</div>
														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
								<a href="http://ipnx.cn/fr/faq/1796834914.html" title="Quelle est la différence entre l'affichage: en ligne, affichage: bloc et affichage: bloc en ligne?" 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/175217550090568.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Quelle est la différence entre l'affichage: en ligne, affichage: bloc et affichage: bloc en ligne?" />
								</a>
								<a href="http://ipnx.cn/fr/faq/1796834914.html" title="Quelle est la différence entre l'affichage: en ligne, affichage: bloc et affichage: bloc en ligne?" class="phphistorical_Version2_mids_title">Quelle est la différence entre l'affichage: en ligne, affichage: bloc et affichage: bloc en ligne?</a>
								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 11, 2025 am	 03:25 AM</span>
								<p class="Articlelist_txts_p">HEMAINDIFFERENCESBetweendisplay: Inline, Block, Andinline-BlockInhtml / CSSareLayoutBehavior, SpaceUsage et StylingControl.1.InlineElementsflowWithText, Don'tStartNewLines, Ignorewidth / Height, AndonlyApplyhorizontalPadding / Marges - IdealForninetLetetStyLinSing</p>
							</div>
														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
								<a href="http://ipnx.cn/fr/faq/1796833145.html" title="Création de formes personnalisées avec CSS Clip Path" 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/175199577133591.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Création de formes personnalisées avec CSS Clip Path" />
								</a>
								<a href="http://ipnx.cn/fr/faq/1796833145.html" title="Création de formes personnalisées avec CSS Clip Path" class="phphistorical_Version2_mids_title">Création de formes personnalisées avec CSS Clip Path</a>
								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 09, 2025 am	 01:29 AM</span>
								<p class="Articlelist_txts_p">Utilisez l'attribut Clip-Path de CSS pour recadrer des éléments en formes personnalisées, telles que les triangles, les encoches circulaires, les polygones, etc., sans compter sur des images ou des SVG. Ses avantages incluent: 1. Prend en charge une variété de formes de base telles que le cercle, l'ellipse, le polygone, etc.; 2. Ajustement réactif et adaptable aux terminaux mobiles; 3. Facile à l'animation, et peut être combiné avec le survol ou le javascript pour obtenir des effets dynamiques; 4. Il n'affecte pas le flux de disposition et ne culte que la zone d'affichage. Les usages communs sont tels que le chemin de clip circulaire: cercle (50pxatcenter) et trame de clip Triangle: polygone (50% 0%, 100 0%, 0 0%). Avis</p>
							</div>
														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
								<a href="http://ipnx.cn/fr/faq/1796834918.html" title="Styling visité les liens différemment avec 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/175217558128323.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Styling visité les liens différemment avec CSS" />
								</a>
								<a href="http://ipnx.cn/fr/faq/1796834918.html" title="Styling visité les liens différemment avec CSS" class="phphistorical_Version2_mids_title">Styling visité les liens différemment avec CSS</a>
								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 11, 2025 am	 03:26 AM</span>
								<p class="Articlelist_txts_p">La définition du style de liens que vous avez visité peut améliorer l'expérience utilisateur, en particulier dans les sites Web à forte intensité de contenu pour aider les utilisateurs à mieux naviguer. 1. Utilisez CSS: Pseudo-classe visité pour définir le style du lien visité, tels que les changements de couleur; 2. Notez que le navigateur permet uniquement la modification de certains attributs en raison des restrictions de confidentialité; 3. La sélection des couleurs doit être coordonnée avec le style global pour éviter la brutalité; 4. Le terminal mobile peut ne pas afficher cet effet et il est recommandé de le combiner avec d'autres invites visuelles telles que les logos auxiliaires ic?nes.</p>
							</div>
														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
								<a href="http://ipnx.cn/fr/faq/1796837251.html" title="Comment créer des images réactives à l'aide de 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/175251305059116.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment créer des images réactives à l'aide de CSS?" />
								</a>
								<a href="http://ipnx.cn/fr/faq/1796837251.html" title="Comment créer des images réactives à l'aide de CSS?" class="phphistorical_Version2_mids_title">Comment créer des images réactives à l'aide de CSS?</a>
								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 15, 2025 am	 01:10 AM</span>
								<p class="Articlelist_txts_p">Pour créer des images réactives à l'aide de CSS, elle peut être principalement réalisée grace aux méthodes suivantes: 1. Utilisez la largeur maximale: 100% et hauteur: Auto pour permettre à l'image de s'adapter à la largeur du conteneur tout en maintenant la proportion; 2. Utilisez les attributs SRCSET et tailles de HTML pour charger intelligemment les sources d'image adaptées à différents écrans; 3. Utilisez l'objet-ajustement et la position d'objet pour contr?ler le recadrage d'images et l'affichage de la mise au point. Ensemble, ces méthodes garantissent que les images sont présentées clairement et magnifiquement sur différents appareils.</p>
							</div>
														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
								<a href="http://ipnx.cn/fr/faq/1796832540.html" title="Démystifier les unités CSS: PX, EM, REM, VW, VH Comparaisons" 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/175191219061804.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Démystifier les unités CSS: PX, EM, REM, VW, VH Comparaisons" />
								</a>
								<a href="http://ipnx.cn/fr/faq/1796832540.html" title="Démystifier les unités CSS: PX, EM, REM, VW, VH Comparaisons" class="phphistorical_Version2_mids_title">Démystifier les unités CSS: PX, EM, REM, VW, VH Comparaisons</a>
								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 08, 2025 am	 02:16 AM</span>
								<p class="Articlelist_txts_p">Le choix des unités CSS dépend des exigences de conception et des exigences réactives. 1.PX est utilisé pour la taille fixe, adaptée à un contr?le précis mais au manque d'élasticité; 2.EM est une unité relative, qui est facilement causée par l'influence de l'élément parent, tandis que REM est plus stable en fonction de l'élément racine et convient à la mise à l'échelle globale; 3.VW / VH est basé sur la taille de la fenêtre, adaptée à la conception réactive, mais l'attention doit être accordée aux performances sous des écrans extrêmes; 4. Lors du choix, il doit être déterminé en fonction de la question de savoir si les ajustements réactifs, les relations de hiérarchie d'éléments et la dépendance de la fenêtre. Une utilisation raisonnable peut améliorer la flexibilité et la maintenance de la disposition.</p>
							</div>
														<div   id="wjcelcm34c"   class="phphistorical_Version2_mids">
								<a href="http://ipnx.cn/fr/faq/1796847484.html" title="Quelles sont les incohérences courantes du navigateur 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/175348469118409.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Quelles sont les incohérences courantes du navigateur CSS?" />
								</a>
								<a href="http://ipnx.cn/fr/faq/1796847484.html" title="Quelles sont les incohérences courantes du navigateur CSS?" class="phphistorical_Version2_mids_title">Quelles sont les incohérences courantes du navigateur CSS?</a>
								<span id="wjcelcm34c"    class="Articlelist_txts_time">Jul 26, 2025 am	 07:04 AM</span>
								<p class="Articlelist_txts_p">Différents navigateurs ont des différences dans l'analyse CSS, ce qui entra?ne des effets d'affichage incohérents, y compris principalement la différence de style par défaut, la méthode de calcul du modèle de bo?te, le niveau de support Flexbox et la disposition de la grille et le comportement incohérent de certains attributs CSS. 1. Le traitement de style par défaut est incohérent. La solution consiste à utiliser cssreset ou normaliser.css pour unifier le style initial; 2. La méthode de calcul du modèle de bo?te de l'ancienne version de IE est différente. Il est recommandé d'utiliser la taille d'une bo?te: Border-Box de manière unifiée; 3. Flexbox et Grid fonctionnent différemment dans les cas de bord ou dans les anciennes versions. Plus de tests et utilisent Autoprefixer; 4. Certains comportements d'attribut CSS sont incohérents. Caniuse doit être consulté et rétrogradé.</p>
							</div>
													</div>

													<a href="http://ipnx.cn/fr/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="wjcelcm34c"   class="footer">
        <div   id="wjcelcm34c"   class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p>
        </div>
        <div   id="wjcelcm34c"   class="footermid">
            <a href="http://ipnx.cn/fr/about/us.html">à propos de nous</a>
            <a href="http://ipnx.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a>
            <a href="http://ipnx.cn/fr/update/article_0_1.html">Sitemap</a>
        </div>
        <div   id="wjcelcm34c"   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://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</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="iwq6s" class="pl_css_ganrao" style="display: none;"><tfoot id="iwq6s"><tr id="iwq6s"><em id="iwq6s"></em></tr></tfoot><menu id="iwq6s"></menu><sup id="iwq6s"><dd id="iwq6s"><acronym id="iwq6s"></acronym></dd></sup><kbd id="iwq6s"><optgroup id="iwq6s"><cite id="iwq6s"></cite></optgroup></kbd><dfn id="iwq6s"></dfn><tr id="iwq6s"></tr><delect id="iwq6s"><small id="iwq6s"><abbr id="iwq6s"></abbr></small></delect><input id="iwq6s"><th id="iwq6s"><wbr id="iwq6s"></wbr></th></input><xmp id="iwq6s"></xmp><tr id="iwq6s"></tr><source id="iwq6s"></source><xmp id="iwq6s"><button id="iwq6s"><tr id="iwq6s"></tr></button></xmp><samp id="iwq6s"></samp><tr id="iwq6s"><pre id="iwq6s"><del id="iwq6s"></del></pre></tr><tfoot id="iwq6s"></tfoot><tr id="iwq6s"></tr><samp id="iwq6s"></samp><optgroup id="iwq6s"></optgroup><dd id="iwq6s"></dd><fieldset id="iwq6s"></fieldset><fieldset id="iwq6s"></fieldset><source id="iwq6s"></source><sup id="iwq6s"></sup><table id="iwq6s"></table><delect id="iwq6s"><pre id="iwq6s"><xmp id="iwq6s"></xmp></pre></delect><xmp id="iwq6s"></xmp><center id="iwq6s"></center><tr id="iwq6s"></tr><td id="iwq6s"></td><cite id="iwq6s"></cite><code id="iwq6s"></code><strong id="iwq6s"></strong><code id="iwq6s"></code><strike id="iwq6s"></strike><strike id="iwq6s"></strike><nav id="iwq6s"></nav><bdo id="iwq6s"></bdo><code id="iwq6s"></code><delect id="iwq6s"></delect><strong id="iwq6s"><nav id="iwq6s"><cite id="iwq6s"></cite></nav></strong><fieldset id="iwq6s"><source id="iwq6s"><tbody id="iwq6s"></tbody></source></fieldset><optgroup id="iwq6s"><bdo id="iwq6s"><rt id="iwq6s"></rt></bdo></optgroup><kbd id="iwq6s"><object id="iwq6s"><cite id="iwq6s"></cite></object></kbd><tr id="iwq6s"></tr><object id="iwq6s"></object><table id="iwq6s"><em id="iwq6s"><ul id="iwq6s"></ul></em></table><source id="iwq6s"></source><tr id="iwq6s"><td id="iwq6s"><strike id="iwq6s"></strike></td></tr><th id="iwq6s"></th><ul id="iwq6s"></ul><tbody id="iwq6s"><xmp id="iwq6s"><option id="iwq6s"></option></xmp></tbody><center id="iwq6s"></center><kbd id="iwq6s"><nav id="iwq6s"><cite id="iwq6s"></cite></nav></kbd><fieldset id="iwq6s"></fieldset><object id="iwq6s"></object><center id="iwq6s"><tr id="iwq6s"><blockquote id="iwq6s"></blockquote></tr></center><optgroup id="iwq6s"></optgroup><center id="iwq6s"></center><wbr id="iwq6s"></wbr><menu id="iwq6s"></menu><acronym id="iwq6s"><blockquote id="iwq6s"><dfn id="iwq6s"></dfn></blockquote></acronym><strong id="iwq6s"></strong><tbody id="iwq6s"><optgroup id="iwq6s"><li id="iwq6s"></li></optgroup></tbody><delect id="iwq6s"></delect><option id="iwq6s"></option><input id="iwq6s"><th id="iwq6s"><wbr id="iwq6s"></wbr></th></input><dfn id="iwq6s"></dfn><li id="iwq6s"></li><del id="iwq6s"></del><fieldset id="iwq6s"></fieldset><abbr id="iwq6s"><button id="iwq6s"><delect id="iwq6s"></delect></button></abbr><acronym id="iwq6s"></acronym><fieldset id="iwq6s"><source id="iwq6s"><th id="iwq6s"></th></source></fieldset><center id="iwq6s"><kbd id="iwq6s"><optgroup id="iwq6s"></optgroup></kbd></center><fieldset id="iwq6s"><source id="iwq6s"><tr id="iwq6s"></tr></source></fieldset><menu id="iwq6s"></menu><center id="iwq6s"><delect id="iwq6s"><noframes id="iwq6s"></noframes></delect></center><xmp id="iwq6s"><table id="iwq6s"><code id="iwq6s"></code></table></xmp><th id="iwq6s"></th><sup id="iwq6s"><delect id="iwq6s"><pre id="iwq6s"></pre></delect></sup><th id="iwq6s"></th><tbody id="iwq6s"><abbr id="iwq6s"><option id="iwq6s"></option></abbr></tbody><tbody id="iwq6s"></tbody><center id="iwq6s"></center><object id="iwq6s"><cite id="iwq6s"><rt id="iwq6s"></rt></cite></object><tfoot id="iwq6s"></tfoot><xmp id="iwq6s"><dfn id="iwq6s"><samp id="iwq6s"></samp></dfn></xmp><cite id="iwq6s"></cite><dfn id="iwq6s"></dfn><wbr id="iwq6s"><cite id="iwq6s"><input id="iwq6s"></input></cite></wbr><dd id="iwq6s"></dd><acronym id="iwq6s"><blockquote id="iwq6s"><dfn id="iwq6s"></dfn></blockquote></acronym><pre id="iwq6s"></pre><wbr id="iwq6s"></wbr><samp id="iwq6s"><noframes id="iwq6s"><fieldset id="iwq6s"></fieldset></noframes></samp><object id="iwq6s"><bdo id="iwq6s"><table id="iwq6s"></table></bdo></object><bdo id="iwq6s"></bdo><ul id="iwq6s"><center id="iwq6s"><samp id="iwq6s"></samp></center></ul><option id="iwq6s"><tbody id="iwq6s"><td id="iwq6s"></td></tbody></option><delect id="iwq6s"><acronym id="iwq6s"><ul id="iwq6s"></ul></acronym></delect><source id="iwq6s"></source><samp id="iwq6s"><tr id="iwq6s"><xmp id="iwq6s"></xmp></tr></samp><xmp id="iwq6s"><sup id="iwq6s"><dd id="iwq6s"></dd></sup></xmp><tbody id="iwq6s"></tbody><bdo id="iwq6s"></bdo><tr id="iwq6s"></tr><tr id="iwq6s"></tr><dl id="iwq6s"></dl><dl id="iwq6s"><s id="iwq6s"><bdo id="iwq6s"></bdo></s></dl><center id="iwq6s"><code id="iwq6s"><xmp id="iwq6s"></xmp></code></center><button id="iwq6s"></button><strong id="iwq6s"><nav id="iwq6s"><bdo id="iwq6s"></bdo></nav></strong><dd id="iwq6s"></dd><option id="iwq6s"><dl id="iwq6s"><s id="iwq6s"></s></dl></option><button id="iwq6s"></button><bdo id="iwq6s"></bdo><dfn id="iwq6s"></dfn><kbd id="iwq6s"></kbd><del id="iwq6s"></del><blockquote id="iwq6s"></blockquote><sup id="iwq6s"></sup><dl id="iwq6s"><object id="iwq6s"><bdo id="iwq6s"></bdo></object></dl><abbr id="iwq6s"></abbr><strike id="iwq6s"></strike><dl id="iwq6s"></dl><tfoot id="iwq6s"></tfoot><del id="iwq6s"></del><ul id="iwq6s"><abbr id="iwq6s"></abbr></ul><ul id="iwq6s"></ul><pre id="iwq6s"></pre><fieldset id="iwq6s"></fieldset><dd id="iwq6s"><acronym id="iwq6s"><ul id="iwq6s"></ul></acronym></dd><del id="iwq6s"><dfn id="iwq6s"><dd id="iwq6s"></dd></dfn></del><xmp id="iwq6s"></xmp><button id="iwq6s"></button><tbody id="iwq6s"></tbody><sup id="iwq6s"><kbd id="iwq6s"><pre id="iwq6s"></pre></kbd></sup><source id="iwq6s"></source><table id="iwq6s"></table><dd id="iwq6s"></dd><optgroup id="iwq6s"><li id="iwq6s"><table id="iwq6s"></table></li></optgroup><center id="iwq6s"></center><fieldset id="iwq6s"><source id="iwq6s"><dl id="iwq6s"></dl></source></fieldset><noframes id="iwq6s"><abbr id="iwq6s"><button id="iwq6s"></button></abbr></noframes><fieldset id="iwq6s"></fieldset><fieldset id="iwq6s"><input id="iwq6s"><code id="iwq6s"></code></input></fieldset><xmp id="iwq6s"></xmp><tfoot id="iwq6s"></tfoot><del id="iwq6s"><button id="iwq6s"><tr id="iwq6s"></tr></button></del></div>

</html>