Mehr anzeigen…<\/summary>\n über das Terminal k?nnen Sie die Routen durch Angabe eines Controllers (mit -c) anzeigen, beispielsweise von Controller-Seiten aus
\n<\/p>\n\n
$ cd classless-css && code .\n<\/pre>\n\n\n\nOder Sie k?nnen sich mit
alle Routen anzeigen lassen\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>\n <%= yield %>\n <\/body>\n<\/html>\n\n<\/pre>\n\n\n\n<p>Der Zugriff auf die Routen ist auch über den Browser über die Adresse http:\/\/127.0.0.1:3000\/rails\/info\/routes m?glich. Vergessen Sie nicht, den Entwicklungsserver mit bin\/dev oder den Standard-Rails-Server mit Rails-Server aus dem Stammverzeichnis Ihres Projekts zu starten. Der Entwicklungsserver ?lauscht“ auf ?nderungen in Javascript- und CSS-Dateien, um die erforderliche Verarbeitung durchzuführen und sie den Benutzern zur Verfügung zu stellen. Damit ?nderungen an diesen Dateien vorgenommen und sofort im Browser angezeigt werden k?nnen, muss ein Gem wie Rails Livre Reload installiert werden.<\/p>\n\n\n\n<\/details><br>\n<\/p>\n\n<h3>\n \n \n Lassen Sie uns vier Seiten mit HTML-Inhalten erstellen, um die CSS-Stile zu testen.\n<\/h3>\n\n<p>?<\/p>\n\n<h3>\n \n \n Fügen Sie den Seiteninhalt für die Aktion html_test_1 ein\n<\/h3>\n\n<p><details>\n <summary>Mehr anzeigen…<\/summary>\n <p>Greifen Sie auf den Link https:\/\/github.com\/dbohdan\/classless-css\/blob\/master\/screenshot-page.html zu und kopieren Sie den gesamten Inhalt aus dem Haupt-Tag, wie unten gezeigt<br>\n<\/p>\n\n<pre>$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4\n create app\/controllers\/pages_controller.rb\n route get \"pages\/html_test_1\"\n get \"pages\/html_test_2\"\n get \"pages\/html_test_3\"\n get \"pages\/html_test_4\"\n invoke erb\n create app\/views\/pages\n create app\/views\/pages\/html_test_1.html.erb\n create app\/views\/pages\/html_test_2.html.erb\n create app\/views\/pages\/html_test_3.html.erb\n create app\/views\/pages\/html_test_4.html.erb\n invoke helper\n create app\/helpers\/pages_helper.rb\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 Starten Sie den Rails-Server und sehen Sie Ugly Pure HTML?\n<\/h3>\n\n<p><details>\n <summary>Mehr anzeigen…<\/summary>\n <ul>\n<li>Starten Sie den Rails-Entwicklungsserver mit bin\/dev oder den Standardserver mit Rails-Server und ?ffnen Sie den Browser bei 127.0.0.1:3000\n<\/li>\n<\/ul>\n<pre>root \"pages#html_test_1\"\n<\/pre>\n\n\n<ul>\n<li>Nach dem ?ffnen der Seite sehen Sie oben die vier Links, die wir zu den zuvor erstellten Seiten html_test_1, html_test_2, html_test_3 und html_test_4 hinzugefügt haben.<\/li>\n<li>So viel Arbeit bisher. ?ffnen Sie jedes einzelne und Sie werden feststellen, dass der HTML-Code noch nicht mit CSS formatiert wurde, was wir als N?chstes tun werden\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n<h3>\n \n \n ?ffnen Sie die Seite app\/views\/layouts\/application.html.erb erneut, um klassenlose CSS-Stile über CDN einzubinden\n<\/h3>\n\n<p><details>\n <summary>Mehr anzeigen…<\/summary>\n <ul>\n<li>Nach dem Inhalt unten\n<\/li>\n<\/ul>\n<pre>$ rails -v\nRails 8.0.0\n\n$ time rails new classless-css --asset-pipeline propshaft --skip-test\n...\nreal 0m47.500s\nuser 0m33.052s\nsys 0m4.249s\n<\/pre>\n\n\n<ul>\n<li>Fügen Sie vor <\/head> den folgenden Inhalt ein. Sie ben?tigen nicht alle dieser Stile, sie wurden eingefügt, damit Sie verschiedene Optionen testen k?nnen.\n<\/li>\n<\/ul>\n\n<pre>$ cd classless-css && code .\n<\/pre>\n\n\n\n<ul>\n<li>Die meisten Stile sind auskommentiert, mit Ausnahme von Normalize CSS und Pico CSS\n<\/li>\n<li>Speichern Sie die Datei und aktualisieren Sie die Seite oder starten Sie den Server neu\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n\n<h3>\n \n \n Nun ja, HTML mit Style?\n<\/h3>\n\n<p>Nach dem Speichern der oben genannten Stylesheets und <\/p>\n\n<h3>\n \n \n Dunkler Modus\n<\/h3>\n\n<p>Einige Stile verfügen über die Option für den Dunkelmodus. ?ndern Sie zur Best?tigung das Design Ihres Computers in den Personalisierungsoptionen<\/p>\n\n<h3>\n \n \n N?chste Schritte\n<\/h3>\n\n<ul>\n<li>Organisieren Sie die Stile nach Ihren Wünschen;<\/li>\n<li>Wenn Sie etwas mehr Zeit mit dem Frontend verbringen m?chten, schauen Sie sich die Anpassungsoptionen für Ihren Lieblingsstil an;<\/li>\n<li>?nderungen, die am Projekt im Browser vorgenommen wurden, mithilfe von Rails Live Reload dynamisch aktualisieren;<\/li>\n<li>Styling aus Projekt-CSS-Dateien verwenden, ohne CDN zu verwenden;<\/li>\n<li>Replizieren Sie die F?higkeiten des klassenlosen CSS-Frameworks mit Tailwind;<\/li>\n<\/ul>\n\n<h2>\n \n \n Referenzen\n<\/h2>\n\n<ul>\n<li>Testen<\/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/de/" 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="Gemeinschaft" class="head_nava head_nava-template1">Gemeinschaft</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://www.miracleart.cn/de/faq/zt" title="Themen" class="languagechoosea">Themen</a>
<a href="http://www.miracleart.cn/de/wenda.html" title="Fragen und Antworten" class="languagechoosea">Fragen und Antworten</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Lernen" class="head_nava head_nava-template1_1">Lernen</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/course.html" title="Kurs" class="languagechoosea on">Kurs</a>
<a href="http://www.miracleart.cn/de/dic/" title="Programmierw?rterbuch" class="languagechoosea">Programmierw?rterbuch</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools-Bibliothek" class="head_nava head_nava-template1_2">Tools-Bibliothek</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/toolset/development-tools" title="Entwicklungswerkzeuge" class="languagechoosea on">Entwicklungswerkzeuge</a>
<a href="http://www.miracleart.cn/de/toolset/website-source-code" title="Quellcode der Website" class="languagechoosea">Quellcode der Website</a>
<a href="http://www.miracleart.cn/de/toolset/php-libraries" title="PHP-Bibliotheken" class="languagechoosea">PHP-Bibliotheken</a>
<a href="http://www.miracleart.cn/de/toolset/js-special-effects" title="JS-Spezialeffekte" class="languagechoosea on">JS-Spezialeffekte</a>
<a href="http://www.miracleart.cn/de/toolset/website-materials" title="Website-Materialien" class="languagechoosea on">Website-Materialien</a>
<a href="http://www.miracleart.cn/de/toolset/extension-plug-ins" title="Erweiterungs-Plug-Ins" class="languagechoosea on">Erweiterungs-Plug-Ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/de/ai" title="KI-Tools" class="head_nava head_nava-template1_3">KI-Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Freizeit" class="head_nava head_nava-template1_3">Freizeit</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/de/game" title="Spiel-Download" class="languagechoosea on">Spiel-Download</a>
<a href="http://www.miracleart.cn/de/mobile-game-tutorial/" title="Spiel-Tutorials" class="languagechoosea">Spiel-Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('de')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="suchen" onclick="searchs('de')"><img src="/static/imghw/find.png" alt="suchen"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Deutsch<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="簡體中文" class="languagechoosea">簡體中文</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="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:;" 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/de/" title="Heim"
class="phpgenera_Details_mainL1a">Heim</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/de/web-designer.html"
class="phpgenera_Details_mainL1a">Web-Frontend</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/de/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSS-Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Ruby on Rails – Schnelles Frontend mit Frameworks CSS Classless oder Classlight</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Ruby on Rails – Schnelles Frontend mit Frameworks CSS Classless oder Classlight</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/de/member/1468490.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8170af62b832.png" src="/static/imghw/default1.png" alt="Barbara Streisand">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/de/member/1468490.html" class="author_name">Barbara Streisand</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Dec 16, 2024 pm 07:07 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/173434723970041.jpg" class="lazy" alt="Ruby on Rails - Frontend Rápido com Frameworks CSS Classless ou Classlight"></p>
<h3>
Starten Sie eine neue Rails-Anwendung
</h3>
<ul>
<li>Die Zeit vor dem Rails-Befehl wird verwendet, um seine Ausführungszeit am Ende der Befehlsausführung anzuzeigen. Im Beispiel unten dauerte es 47 Sekunden.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<h3>
?ffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor
</h3>
<pre class="brush:php;toolbar:false">$ cd classless-css && code .
</pre>
<p>?</p>
<h3>
Kennenlernen des Rails-Standard-Master-Layouts app/views/layouts/application.html.erb.
</h3>
<p><details>
<summary>Mehr anzeigen…</summary>
<ul>
<li>Gem?? Convention over Configuration (CoC) verwendet Rails application.html.erb als Master-Layout zum Rendern aller Seiten;</li>
<li>Die Originaldatei in Rails 8.0.0 muss den gleichen oder einen ?hnlichen Inhalt haben wie die unten kopierte:
</li>
</ul>
<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>
<ul>
<li>Der obere Teil im <head> … </head> Sie verfügen über die wichtigen Strukturelemente für die korrekte Darstellung und Funktion der Seite. Das Head-Tag wird verwendet, um wichtige Metadaten und Ressourcen einzuschlie?en, die dabei helfen, das Verhalten der Seite (mit Javascript), ihr Erscheinungsbild (mit CSS), ihre Beziehung zu anderen Systemen und Diensten sowie Sicherheitseinstellungen wie den Schutz für CSRF und CSP zu konfigurieren ;</li>
<li>Der Hauptinhalt der Seiten wird innerhalb von <body> gerendert.
</body>, über das ERB-Tag <%= yield %> . Dieses Tag dient als Integrationspunkt, um den Inhalt einer von Rails dynamisch gerenderten Ansicht einzuschlie?en.
</li>
</ul>
</details>
</p>
<p>?</p>
<h3>
Generieren Sie Testseiten mit einem Controller-Seiten und den Aktionen html_test_1, html_test_2, html_test_3 und html_test_4
</h3>
<p><details>
<summary>Mehr anzeigen…</summary>
<br>
<pre class="brush:php;toolbar:false">$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
create app/controllers/pages_controller.rb
route get "pages/html_test_1"
get "pages/html_test_2"
get "pages/html_test_3"
get "pages/html_test_4"
invoke erb
create app/views/pages
create app/views/pages/html_test_1.html.erb
create app/views/pages/html_test_2.html.erb
create app/views/pages/html_test_3.html.erb
create app/views/pages/html_test_4.html.erb
invoke helper
create app/helpers/pages_helper.rb
</pre>
<ul>
<li>Wie bei der Erstellung des Controllers und der oben genannten Aktionen wurden auch die Routen hinzugefügt, sodass Sie auf alle über die Links erstellten Aktionen zugreifen k?nnen
<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>
?ffnen Sie die Datei config/routes.rb in VSCode
</h3>
<ul>
<li>Fügen Sie die folgende Zeile am Ende der Datei ein, um den Seitenstamm auf die zuvor erstellten Controller-Seiten und die Aktion html_test_1 zu leiten. Daher ist die erste Seite, die beim Zugriff auf Ihre Website oder Ihr System angezeigt wird, die Seite ?html_test_1“ der Controller-Seiten. Andernfalls würde die Standard-Rails-Seite angezeigt.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>Sie h?tten das Hinzufügen der Routen zu den erstellten Aktionen ignorieren k?nnen, wenn Sie beim Erstellen des Controllers den Parameter --skip-routes übergeben h?tten. Der vollst?ndige Befehl würde lauten: Rails G Controller Pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes
</li>
</ul>
</details>
</p>
<p>?</p>
<h3>
Schienenstrecken anzeigen
</h3>
<p><details>
<summary>Mehr anzeigen…</summary>
<p>über das Terminal k?nnen Sie die Routen durch Angabe eines Controllers (mit -c) anzeigen, beispielsweise von Controller-Seiten aus<br>
</p>
<pre class="brush:php;toolbar:false">$ cd classless-css && code .
</pre>
<p>Oder Sie k?nnen sich mit<br> alle Routen anzeigen lassen
</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>Der Zugriff auf die Routen ist auch über den Browser über die Adresse http://127.0.0.1:3000/rails/info/routes m?glich. Vergessen Sie nicht, den Entwicklungsserver mit bin/dev oder den Standard-Rails-Server mit Rails-Server aus dem Stammverzeichnis Ihres Projekts zu starten. Der Entwicklungsserver ?lauscht“ auf ?nderungen in Javascript- und CSS-Dateien, um die erforderliche Verarbeitung durchzuführen und sie den Benutzern zur Verfügung zu stellen. Damit ?nderungen an diesen Dateien vorgenommen und sofort im Browser angezeigt werden k?nnen, muss ein Gem wie Rails Livre Reload installiert werden.</p>
</details><br>
</p>
<h3>
Lassen Sie uns vier Seiten mit HTML-Inhalten erstellen, um die CSS-Stile zu testen.
</h3>
<p>?</p>
<h3>
Fügen Sie den Seiteninhalt für die Aktion html_test_1 ein
</h3>
<p><details>
<summary>Mehr anzeigen…</summary>
<p>Greifen Sie auf den Link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html zu und kopieren Sie den gesamten Inhalt aus dem Haupt-Tag, wie unten gezeigt<br>
</p>
<pre class="brush:php;toolbar:false">$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
create app/controllers/pages_controller.rb
route get "pages/html_test_1"
get "pages/html_test_2"
get "pages/html_test_3"
get "pages/html_test_4"
invoke erb
create app/views/pages
create app/views/pages/html_test_1.html.erb
create app/views/pages/html_test_2.html.erb
create app/views/pages/html_test_3.html.erb
create app/views/pages/html_test_4.html.erb
invoke helper
create app/helpers/pages_helper.rb
</pre>
<ul>
<li>
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Starten Sie den Rails-Server und sehen Sie Ugly Pure HTML?
</h3>
<p><details>
<summary>Mehr anzeigen…</summary>
<ul>
<li>Starten Sie den Rails-Entwicklungsserver mit bin/dev oder den Standardserver mit Rails-Server und ?ffnen Sie den Browser bei 127.0.0.1:3000
</li>
</ul>
<pre class="brush:php;toolbar:false">root "pages#html_test_1"
</pre>
<ul>
<li>Nach dem ?ffnen der Seite sehen Sie oben die vier Links, die wir zu den zuvor erstellten Seiten html_test_1, html_test_2, html_test_3 und html_test_4 hinzugefügt haben.</li>
<li>So viel Arbeit bisher. ?ffnen Sie jedes einzelne und Sie werden feststellen, dass der HTML-Code noch nicht mit CSS formatiert wurde, was wir als N?chstes tun werden
</li>
</ul>
</details><br>
<br>
</p>
<h3>
?ffnen Sie die Seite app/views/layouts/application.html.erb erneut, um klassenlose CSS-Stile über CDN einzubinden
</h3>
<p><details>
<summary>Mehr anzeigen…</summary>
<ul>
<li>Nach dem Inhalt unten
</li>
</ul>
<pre class="brush:php;toolbar:false">$ rails -v
Rails 8.0.0
$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<ul>
<li>Fügen Sie vor </head> den folgenden Inhalt ein. Sie ben?tigen nicht alle dieser Stile, sie wurden eingefügt, damit Sie verschiedene Optionen testen k?nnen.
</li>
</ul>
<pre class="brush:php;toolbar:false">$ cd classless-css && code .
</pre>
<ul>
<li>Die meisten Stile sind auskommentiert, mit Ausnahme von Normalize CSS und Pico CSS
</li>
<li>Speichern Sie die Datei und aktualisieren Sie die Seite oder starten Sie den Server neu
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Nun ja, HTML mit Style?
</h3>
<p>Nach dem Speichern der oben genannten Stylesheets und </p>
<h3>
Dunkler Modus
</h3>
<p>Einige Stile verfügen über die Option für den Dunkelmodus. ?ndern Sie zur Best?tigung das Design Ihres Computers in den Personalisierungsoptionen</p>
<h3>
N?chste Schritte
</h3>
<ul>
<li>Organisieren Sie die Stile nach Ihren Wünschen;</li>
<li>Wenn Sie etwas mehr Zeit mit dem Frontend verbringen m?chten, schauen Sie sich die Anpassungsoptionen für Ihren Lieblingsstil an;</li>
<li>?nderungen, die am Projekt im Browser vorgenommen wurden, mithilfe von Rails Live Reload dynamisch aktualisieren;</li>
<li>Styling aus Projekt-CSS-Dateien verwenden, ohne CDN zu verwenden;</li>
<li>Replizieren Sie die F?higkeiten des klassenlosen CSS-Frameworks mit Tailwind;</li>
</ul>
<h2>
Referenzen
</h2>
<ul>
<li>Testen</li>
</ul>
<p>Das obige ist der detaillierte Inhalt vonRuby on Rails – Schnelles Frontend mit Frameworks CSS Classless oder Classlight. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Erkl?rung dieser Website</div>
<div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an 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>Hei?er Artikel</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821119.html" title="Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern" class="phpgenera_Details_mainR4_bottom_title">Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796827210.html" title="Oguri Cap Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796828723.html" title="Agnes Tachyon Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821436.html" title="Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821278.html" title="Datum alles: Dirk und Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Datum alles: Dirk und Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/article.html">Mehr anzeigen</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>Hei?e KI -Werkzeuge</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/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/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Ausziehbilder kostenlos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/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/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>KI-gestützte App zum Erstellen realistischer Aktfotos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/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/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online-KI-Tool zum Entfernen von Kleidung aus Fotos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/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/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>KI-Kleiderentferner</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/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/de/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/ai">Mehr anzeigen</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>Hei?er Artikel</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821119.html" title="Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern" class="phpgenera_Details_mainR4_bottom_title">Handbuch: Stellar Blade Dateispeicherort speichern/Datei speichern/nicht speichern</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796827210.html" title="Oguri Cap Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796828723.html" title="Agnes Tachyon Build Guide | Ein hübsches Derby -Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Ein hübsches Derby -Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821436.html" title="Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Erwachen - Fortgeschrittener Planetologe Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/1796821278.html" title="Datum alles: Dirk und Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Datum alles: Dirk und Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/article.html">Mehr anzeigen</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>Hei?e Werkzeuge</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/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/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Einfach zu bedienender und kostenloser Code-Editor</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" 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 chinesische Version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 chinesische Version</h3>
</a>
<p>Chinesische Version, sehr einfach zu bedienen</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/toolset/development-tools/121" title="Senden Sie 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="Senden Sie Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Senden Sie Studio 13.0.1</h3>
</a>
<p>Leistungsstarke integrierte PHP-Entwicklungsumgebung</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/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/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visuelle Webentwicklungstools</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" 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 Mac-Version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac-Version</h3>
</a>
<p>Codebearbeitungssoftware auf Gottesniveau (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/de/ai">Mehr anzeigen</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>Hei?e Themen</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/de/faq/gmailyxdlrkzn" title="Wo ist der Login-Zugang für Gmail-E-Mail?" class="phpgenera_Details_mainR4_bottom_title">Wo ist der Login-Zugang für Gmail-E-Mail?</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>8638</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/de/faq/java-tutorial" title="Java-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java-Tutorial</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/de/faq/cakephp-tutor" title="CakePHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP-Tutorial</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>1729</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/de/faq/laravel-tutori" title="Laravel-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel-Tutorial</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>1579</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/de/faq/php-tutorial" title="PHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP-Tutorial</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>1444</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/de/faq/zt">Mehr anzeigen</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/de/faq/1796823628.html" title="Was ist 'Render-Blocking-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="Was ist 'Render-Blocking-CSS'?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796823628.html" title="Was ist 'Render-Blocking-CSS'?" class="phphistorical_Version2_mids_title">Was ist 'Render-Blocking-CSS'?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">CSS -Bl?cke Seitenrenderung, da Browser inline und externe CSS standardm??ig als wichtige Ressourcen anzeigen, insbesondere mit importierten Stylesheets, Header gro?er Mengen an Inline -CSS und nicht optimierten Medienfragestilen. 1. extrahieren kritische CSS und einbetten Sie es in HTML ein; 2. Verz?gerung des Ladens nichtkritischer CSS durch JavaScript; 3.. Verwenden Sie Medienattribute, um das Laden wie Druckstile zu optimieren. 4. Komprimieren und verschmelzen CSS, um Anfragen zu reduzieren. Es wird empfohlen, Tools zum Extrahieren von Schlüssel -CSS zu verwenden, REL = "Vorspannung" zu kombinieren, und verwenden Sie die asynchrone Belastung und verwenden Sie die Medienverz?gerungsladeverletzung, um eine überm??ige Aufteilung und eine komplexe Skriptsteuerung zu vermeiden.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796822133.html" title="Externe vs. interne CSS: Was ist der beste Ansatz?" 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="Externe vs. interne CSS: Was ist der beste Ansatz?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796822133.html" title="Externe vs. interne CSS: Was ist der beste Ansatz?" class="phphistorical_Version2_mids_title">Externe vs. interne CSS: Was ist der beste Ansatz?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">ThebestApproachforcssDependsonTheProject'Sspecificneeds.forlargerProjects, externalcssisbetterDuetomaintainability;</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796821588.html" title="Muss mein CSS im unteren Fall sein?" 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="Muss mein CSS im unteren Fall sein?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796821588.html" title="Muss mein CSS im unteren Fall sein?" class="phphistorical_Version2_mids_title">Muss mein CSS im unteren Fall sein?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span>
<p class="Articlelist_txts_p">Nein, cssdoesnothavetobeinlowercase.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796821998.html" title="CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt" 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="CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796821998.html" title="CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt" class="phphistorical_Version2_mids_title">CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">Csssmostlycase-unempfindlich, buturlsandfontfamilynamesarecase-sensitiv.1) Eigenschaften und ValueslikeColor: rot; sensitiv.2) URLSMUTMATTHESERVER'SCASE, z.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796828180.html" title="Was ist Autoprefixer und wie funktioniert es?" 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="Was ist Autoprefixer und wie funktioniert es?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796828180.html" title="Was ist Autoprefixer und wie funktioniert es?" class="phphistorical_Version2_mids_title">Was ist Autoprefixer und wie funktioniert es?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">AutoPrefixer ist ein Tool, das die Pr?fixe von Anbietern automatisch zu CSS -Attributen basierend auf dem Zielbrowserbereich hinzufügt. 1. Es l?st das Problem, die Pr?fixe mit Fehlern manuell aufrechtzuerhalten. 2. Arbeiten Sie das POSTCSS-Plug-in-Formular durch, analysieren Sie CSS, analysieren Sie Attribute, die vorangestellt werden müssen, und generieren Sie den Code gem?? Konfiguration. 3.. 4. Notizen enthalten nicht manuelles Hinzufügen von Pr?fixen, Konfigurationsaktualisierungen, Pr?fixe nicht alle Attribute, und es wird empfohlen, sie mit dem Pr?prozessor zu verwenden.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796821606.html" title="Was sind CSS -Z?hler?" 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="Was sind CSS -Z?hler?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796821606.html" title="Was sind CSS -Z?hler?" class="phphistorical_Version2_mids_title">Was sind CSS -Z?hler?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">CSSCOUNTERSCANATOMATIONSNUMBERSEctions und.1) usecounter-resettoinitialize, counter-IncrementtoIncrease, und Counter () orcounters () todisplayValues.2) kombinierte withjavascriptfordynamiccontentToEsSureAccurateupdates.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796821580.html" title="CSS: Wann ist der Fall wichtig (und wann nicht)?" 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: Wann ist der Fall wichtig (und wann nicht)?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796821580.html" title="CSS: Wann ist der Fall wichtig (und wann nicht)?" class="phphistorical_Version2_mids_title">CSS: Wann ist der Fall wichtig (und wann nicht)?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">In CSS sind Selektor- und Attributnamen fallempfindlich, w?hrend Werte, Namen, URLs und benutzerdefinierte Attribute fallempfindlich sind. 1. Die Auswahl- und Attributnamen sind unempfindlich, z. B. Hintergrundfarbe und Hintergrundfarbe sind gleich. 2. Die hexadezimale Farbe im Wert ist fallempfindlich, aber die benannte Farbe ist fallempfindlich, wie rot und rot ist ungültig. 3. Die URLs sind fallsempfindlich und k?nnen zu Ladeproblemen von Dateien führen. 4. Benutzerdefinierte Eigenschaften (Variablen) sind fallempfindlich und Sie müssen auf die Konsistenz des Falles bei der Verwendung achten.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/de/faq/1796827610.html" title="Was ist die Funktion conicgradient ()?" 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/175130377175874.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was ist die Funktion conicgradient ()?" />
</a>
<a href="http://www.miracleart.cn/de/faq/1796827610.html" title="Was ist die Funktion conicgradient ()?" class="phphistorical_Version2_mids_title">Was ist die Funktion conicgradient ()?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:16 AM</span>
<p class="Articlelist_txts_p">Theconic-Gradient () FunctionincsScreateScircular GradecentStroTRotateColorStopsaroundAcentralPoint.1.ISISIDEALFORPieCharts, Fortschrittsindikatoren, Farbw?sche und DecorativeBackgrounds.2</p>
</div>
</div>
<a href="http://www.miracleart.cn/de/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>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/de/about/us.html">über uns</a>
<a href="http://www.miracleart.cn/de/about/disclaimer.html">Haftungsausschluss</a>
<a href="http://www.miracleart.cn/de/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="e0f5u" class="pl_css_ganrao" style="display: none;"><div id="e0f5u"></div><delect id="e0f5u"></delect><th id="e0f5u"></th><sub id="e0f5u"><center id="e0f5u"><acronym id="e0f5u"><del id="e0f5u"></del></acronym></center></sub><dfn id="e0f5u"><cite id="e0f5u"></cite></dfn><acronym id="e0f5u"><pre id="e0f5u"><track id="e0f5u"></track></pre></acronym><pre id="e0f5u"><blockquote id="e0f5u"><kbd id="e0f5u"></kbd></blockquote></pre><dl id="e0f5u"><tbody id="e0f5u"></tbody></dl><ins id="e0f5u"><ul id="e0f5u"></ul></ins><tbody id="e0f5u"></tbody><noframes id="e0f5u"></noframes><dl id="e0f5u"></dl><dl id="e0f5u"><strike id="e0f5u"><tfoot id="e0f5u"></tfoot></strike></dl><sub id="e0f5u"></sub><option id="e0f5u"><nobr id="e0f5u"></nobr></option><strong id="e0f5u"></strong><blockquote id="e0f5u"></blockquote><nobr id="e0f5u"></nobr><sup id="e0f5u"></sup><menu id="e0f5u"></menu><style id="e0f5u"><strong id="e0f5u"><acronym id="e0f5u"></acronym></strong></style><ins id="e0f5u"><tr id="e0f5u"></tr></ins><sub id="e0f5u"><center id="e0f5u"><output id="e0f5u"><ruby id="e0f5u"></ruby></output></center></sub><address id="e0f5u"><meter id="e0f5u"><center id="e0f5u"></center></meter></address><th id="e0f5u"><tbody id="e0f5u"><optgroup id="e0f5u"><style id="e0f5u"></style></optgroup></tbody></th><center id="e0f5u"></center><label id="e0f5u"></label><rp id="e0f5u"><small id="e0f5u"><dfn id="e0f5u"></dfn></small></rp><menu id="e0f5u"></menu><legend id="e0f5u"><p id="e0f5u"><source id="e0f5u"><wbr id="e0f5u"></wbr></source></p></legend><pre id="e0f5u"></pre><strike id="e0f5u"></strike><dfn id="e0f5u"></dfn><pre id="e0f5u"></pre><var id="e0f5u"><pre id="e0f5u"></pre></var><small id="e0f5u"><dfn id="e0f5u"><track id="e0f5u"></track></dfn></small><font id="e0f5u"><pre id="e0f5u"><output id="e0f5u"><kbd id="e0f5u"></kbd></output></pre></font><menuitem id="e0f5u"></menuitem><center id="e0f5u"><dd id="e0f5u"><font id="e0f5u"><em id="e0f5u"></em></font></dd></center><center id="e0f5u"><meter id="e0f5u"></meter></center><tbody id="e0f5u"></tbody><s id="e0f5u"><center id="e0f5u"><tbody id="e0f5u"><font id="e0f5u"></font></tbody></center></s><del id="e0f5u"><ul id="e0f5u"><u id="e0f5u"><video id="e0f5u"></video></u></ul></del><rt id="e0f5u"></rt><legend id="e0f5u"></legend><optgroup id="e0f5u"></optgroup><dfn id="e0f5u"></dfn><tbody id="e0f5u"><var id="e0f5u"><style id="e0f5u"><i id="e0f5u"></i></style></var></tbody><center id="e0f5u"><output id="e0f5u"><ruby id="e0f5u"><li id="e0f5u"></li></ruby></output></center></div>
</html>