<nav id="nvaov"><label id="nvaov"><nobr id="nvaov"></nobr></label></nav> gerendert. <\/body>, über das ERB-Tag <%= yield %>. Dieses Tag dient als Integrationspunkt, um den Inhalt einer von Rails dynamisch gerenderten Ansicht einzuschlie?en.\n<\/li>\n<\/ul>\n<\/details>\n\n\n\n<\/p>\n
?<\/p>\n
\n \n \n Testseiten generieren, mit einem Controller-Seiten und den Aktionen html_test_1, html_test_2, html_test_3 und html_test_4\n<\/h3>\n\n
\n Mehr anzeigen…<\/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
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\n\n
\n \n \n ?ffnen Sie die Datei config\/routes.rb in VSCode\n<\/h3>\n\n
\n
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.\n<\/li>\n<\/ul>\n
$ cd classless-css-cdn && code .\n<\/pre>\n\n\n
\n
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\n<\/li>\n<\/ul>\n<\/details>\n\n\n\n<\/p>\n
?<\/p>\n
\n \n \n Anzeige von Rails-Routen\n<\/h3>\n\n
\n Mehr anzeigen…<\/summary>\n
Mit dem Terminal k?nnen Sie die Routen durch Angabe eines Controllers (mit -c) anzeigen, beispielsweise von Controller-Seiten aus \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>Oder Sie k?nnen sich mit<br> alle Routen anzeigen lassen\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>Es ist auch m?glich, über den Browser über die Adresse http:\/\/127.0.0.1:3000\/rails\/info\/routes auf die Routen zuzugreifen. 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-Dateien und CSS-Dateien, um die notwendige Verarbeitung durchzuführen, um sie den Benutzern verfügbar zu machen.<\/li>\n<li>Damit ?nderungen an diesen Dateien vorgenommen und sofort im Browser angezeigt werden k?nnen, muss ein Juwel wie Rails Livre Reload installiert werden.<\/li>\n<\/ul>\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>Ruby on Rails verwendet standardm??ig die MVC-Architektur (Model-View-Controller), um mit der Organisation Ihres Projekts zu beginnen. Ein Gro?teil Ihres Codes ist in den folgenden Ordnern organisiert:<\/p>\n\n<ul>\n<li>Wenn sich der Code auf Dom?nen-\/Gesch?ftslogik und Daten bezieht, bewahren Sie ihn im Ordner ?app\/models“ auf;<\/li>\n<li>Der mit der Ansicht verknüpfte Code (HTML, JSON, XML usw.) befindet sich in app\/views;<\/li>\n<li>Code, der sich auf den Anforderungslebenszyklus bezieht, befindet sich in App\/Controllern;<\/li>\n<\/ul>\n\n<p>?<\/p>\n\n<h3>\n \n \n Fügen Sie den Inhalt der Seite html_test_1 ein\n<\/h3>\n\n<p><details>\n <summary>Mehr anzeigen…<\/summary>\n <ul>\n<li>Greifen Sie auf den Link https:\/\/github.com\/dbohdan\/classless-css\/blob\/master\/screenshot-page.html zu und kopieren Sie den gesamten Inhalt des Haupt-Tags, wie unten gezeigt\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 Starten Sie den Rails-Server und sehen Sie das h?ssliche einfache 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>$ cd classless-css-cdn && code .\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 einzuschlie?en\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><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>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>$ 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>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<\/li>\n<li>Um einen anderen Stil als Pico CSS zu testen, kommentieren Sie die Zeile aus, die das CDN des Stils konfiguriert, in diesem Fall die Zeile <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/ @ picocss\/pico@2\/css\/pico.min.css\" \/> und entkommentieren Sie die Zeile aus einem anderen Stil, zum Beispiel der Simple CSS-Zeile.<\/li>\n<li>Um eine Zeile mit VSCode zu kommentieren und zu kommentieren, verwenden Sie die Tastenkombination Strg K C.\n<\/li>\n<\/ul>\n\n<\/details><br>\n<br>\n<\/p>\n\n<h3>\n \n \n Nun ja, stilvolles HTML?\n<\/h3>\n\n<p>Nachdem Sie die oben genannten Stylesheets gespeichert und den Rails-Server gestartet haben, wird Ihr HTML mit den ausgew?hlten CSS-Frameworks gestaltet.<\/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 Farbanpassungsoptionen. Suchen Sie in Windows nach ?Dunklen Modus für Apps aktivieren“ und wechseln Sie zwischen dunklem und hellem Modus. Die HTML-Seite ?ndert sich automatisch nach der ?nderung im Betriebssystem al.<\/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>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/de/" 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="Gemeinschaft" class="head_nava head_nava-template1">Gemeinschaft</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/de/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://ipnx.cn/de/faq/zt" title="Themen" class="languagechoosea">Themen</a>
<a href="http://ipnx.cn/de/wenda.html" title="Fragen und Antworten" class="languagechoosea">Fragen und Antworten</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Lernen" class="head_nava head_nava-template1_1">Lernen</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/de/course.html" title="Kurs" class="languagechoosea on">Kurs</a>
<a href="http://ipnx.cn/de/dic/" title="Programmierw?rterbuch" class="languagechoosea">Programmierw?rterbuch</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Tools-Bibliothek" class="head_nava head_nava-template1_2">Tools-Bibliothek</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/de/toolset/development-tools" title="Entwicklungswerkzeuge" class="languagechoosea on">Entwicklungswerkzeuge</a>
<a href="http://ipnx.cn/de/toolset/website-source-code" title="Quellcode der Website" class="languagechoosea">Quellcode der Website</a>
<a href="http://ipnx.cn/de/toolset/php-libraries" title="PHP-Bibliotheken" class="languagechoosea">PHP-Bibliotheken</a>
<a href="http://ipnx.cn/de/toolset/js-special-effects" title="JS-Spezialeffekte" class="languagechoosea on">JS-Spezialeffekte</a>
<a href="http://ipnx.cn/de/toolset/website-materials" title="Website-Materialien" class="languagechoosea on">Website-Materialien</a>
<a href="http://ipnx.cn/de/toolset/extension-plug-ins" title="Erweiterungs-Plug-Ins" class="languagechoosea on">Erweiterungs-Plug-Ins</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/de/ai" title="KI-Tools" class="head_nava head_nava-template1_3">KI-Tools</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Freizeit" class="head_nava head_nava-template1_3">Freizeit</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/de/game" title="Spiel-Download" class="languagechoosea on">Spiel-Download</a>
<a href="http://ipnx.cn/de/mobile-game-tutorial/" title="Spiel-Tutorials" class="languagechoosea">Spiel-Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" 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="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" 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="wjcelcm34c" id="dropdown-template" style="display: none;">
<div id="wjcelcm34c" 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="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/de/" title="Heim"
class="phpgenera_Details_mainL1a">Heim</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/de/web-designer.html"
class="phpgenera_Details_mainL1a">Web-Frontend</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/de/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSS-Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Schnelles Ruby on Rails-Frontend mit CSS-Frameworks, Classless oder Class-Light mit CDN</span>
</div>
<div id="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Schnelles Ruby on Rails-Frontend mit CSS-Frameworks, Classless oder Class-Light mit CDN</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.cn/de/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/de/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>Wenn Sie mit der Entwicklung für das Web beginnen und Ihr Fokus nicht auf der Spezialisierung auf das Frontend liegt, besteht eine der Hürden, die am schmerzhaftesten sein kann, darin, Ihr Design einfach gestalten zu k?nnen H?ssliches HTML.</p>
<p>Für diejenigen, die den ersten Kontakt haben, ist es etwas R?tselhaftes, Mystisches, übernatürliches, wenn man versucht, HTML zu verstehen, das eine Folge von Buchstaben und Zahlen mit vordefinierten Hilfsklassen hat, um Stile auf HTML anzuwenden, zum Beispiel:<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>CSS-Frameworks, die Utility-Klassen verwenden, sind ausgezeichnet, vielseitig, reaktionsschnell, elegant und haben viele andere Eigenschaften, aber Tailwind CSS ist nicht die einzige L?sung. <strong>Wenn Sie etwas Schnelles und Einfacheres ben?tigen, ist die Verwendung eines klassenlosen oder klassenarmen CSS-Frameworks die bessere L?sung.</strong></p>
<p>Klassenlose CSS-Frameworks formatieren HTML-Elemente direkt, ohne Klassen. Class-Light-Frameworks kombinieren automatische Stile mit einigen optionalen Utility-Klassen zur Anpassung, was ihre Verwendung vielseitiger macht.</p>
<p>Mit einem klassenlosen oder klassenleichten Ansatz k?nnen Sie das HTML-Styling schnell mit einer, zwei oder drei Zeilen l?sen.</p>
<h3>
Wir werden unten sehen:
</h3>
<ul>
<li>Verwendung des Ruby on Rails-Frameworks in Version 8, mit Propshaft und Importmap;</li>
<li>Kennenlernen der Datei mit dem Standardlayout von HTML-Seiten;</li>
<li>Erstellen und Hinzufügen von Inhalten zu 4 HTML-Seiten, um das Styling mit CSS zu testen;</li>
<li>Eine kurze Erw?hnung der für die Seiten erstellten Routen;</li>
<li>?ndern Sie das Standardlayout, um den Link zu den erstellten Seiten einzuschlie?en;</li>
<li>Fügen Sie 12 CSS-Frameworks über CDN zum Standardlayout hinzu;</li>
<li>Wissen Sie, wie Sie feststellen k?nnen, ob in den CSS-Frameworks standardm??ig der Hell- und Dunkelmodus konfiguriert ist;</li>
<li>Vorschl?ge für die n?chsten Schritte;</li>
</ul>
<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-cdn --skip-test
...
real 0m47.500s
user 0m33.052s
sys 0m4.249s
</pre>
<p>Rails 8 verwendet im Rahmen seiner No-Build-Philosophie standardm??ig Propshaft als Asset-Pipeline-Bibliothek und Importmap als JavaScript-Bibliothek. Wir bitten Sie, die Testbibliothek mit --skip-test zu überspringen.<br>
Bei Bedarf k?nnen Sie Ihr JavaScript mit esbuild verarbeiten, indem Sie den Parameter --javascript esbuild übergeben. Importmap führt keine Erstellung oder Verarbeitung von JavaScript durch.</p>
<h3>
?ffnen Sie das Projekt mit VSCode oder Ihrem bevorzugten Editor
</h3>
<pre class="brush:php;toolbar:false">$ cd classless-css-cdn && code .
</pre>
<p>?</p>
<h3>
Kennen des Standard-Rails-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 Standardlayout zum Rendern aller Seiten;</li>
<li>Die Originaldatei in Rails 8 muss den gleichen oder einen ?hnlichen Inhalt haben wie die unten kopierte:
</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>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>
Testseiten generieren, 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 -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>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">$ cd classless-css-cdn && code .
</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>
Anzeige von Rails-Routen
</h3>
<p><details>
<summary>Mehr anzeigen…</summary>
<p>Mit dem 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"><!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>Oder Sie k?nnen sich mit<br> alle Routen anzeigen lassen
</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>Es ist auch m?glich, über den Browser über die Adresse http://127.0.0.1:3000/rails/info/routes auf die Routen zuzugreifen. 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-Dateien und CSS-Dateien, um die notwendige Verarbeitung durchzuführen, um sie den Benutzern verfügbar zu machen.</li>
<li>Damit ?nderungen an diesen Dateien vorgenommen und sofort im Browser angezeigt werden k?nnen, muss ein Juwel wie Rails Livre Reload installiert werden.</li>
</ul>
</details><br>
</p>
<h3>
Lassen Sie uns vier Seiten mit HTML-Inhalten erstellen, um die CSS-Stile zu testen.
</h3>
<p>Ruby on Rails verwendet standardm??ig die MVC-Architektur (Model-View-Controller), um mit der Organisation Ihres Projekts zu beginnen. Ein Gro?teil Ihres Codes ist in den folgenden Ordnern organisiert:</p>
<ul>
<li>Wenn sich der Code auf Dom?nen-/Gesch?ftslogik und Daten bezieht, bewahren Sie ihn im Ordner ?app/models“ auf;</li>
<li>Der mit der Ansicht verknüpfte Code (HTML, JSON, XML usw.) befindet sich in app/views;</li>
<li>Code, der sich auf den Anforderungslebenszyklus bezieht, befindet sich in App/Controllern;</li>
</ul>
<p>?</p>
<h3>
Fügen Sie den Inhalt der Seite html_test_1 ein
</h3>
<p><details>
<summary>Mehr anzeigen…</summary>
<ul>
<li>Greifen Sie auf den Link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html zu und kopieren Sie den gesamten Inhalt des Haupt-Tags, wie unten gezeigt
</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>
Starten Sie den Rails-Server und sehen Sie das h?ssliche einfache 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">$ cd classless-css-cdn && code .
</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 einzuschlie?en
</h3>
<p><details>
<summary>Mehr anzeigen…</summary>
<ul>
<li>Nach dem Inhalt unten
</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>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">$ 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>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>
<li>Um einen anderen Stil als Pico CSS zu testen, kommentieren Sie die Zeile aus, die das CDN des Stils konfiguriert, in diesem Fall die Zeile <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ @ picocss/pico@2/css/pico.min.css" /> und entkommentieren Sie die Zeile aus einem anderen Stil, zum Beispiel der Simple CSS-Zeile.</li>
<li>Um eine Zeile mit VSCode zu kommentieren und zu kommentieren, verwenden Sie die Tastenkombination Strg K C.
</li>
</ul>
</details><br>
<br>
</p>
<h3>
Nun ja, stilvolles HTML?
</h3>
<p>Nachdem Sie die oben genannten Stylesheets gespeichert und den Rails-Server gestartet haben, wird Ihr HTML mit den ausgew?hlten CSS-Frameworks gestaltet.</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 Farbanpassungsoptionen. Suchen Sie in Windows nach ?Dunklen Modus für Apps aktivieren“ und wechseln Sie zwischen dunklem und hellem Modus. Die HTML-Seite ?ndert sich automatisch nach der ?nderung im Betriebssystem al.</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>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>Das obige ist der detaillierte Inhalt vonSchnelles Ruby on Rails-Frontend mit CSS-Frameworks, Classless oder Class-Light mit CDN. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p>
</div>
</div>
<div id="wjcelcm34c" class="wzconShengming_sp">
<div id="wjcelcm34c" 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="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>Hei?er Artikel</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796832397.html" title="Gras Wonder Build Guide | Uma Musume hübsches Derby" class="phpgenera_Details_mainR4_bottom_title">Gras Wonder Build Guide | Uma Musume hübsches Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796833110.html" title="<??>: 99 N?chte im Wald - alle Abzeichen und wie man sie freischalt" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 N?chte im Wald - alle Abzeichen und wie man sie freischalt</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Zeitplan (Juli 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Zeitplan (Juli 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796836699.html" title="Rimworld Odyssey -Temperaturführer für Schiffe und Gravtech" class="phpgenera_Details_mainR4_bottom_title">Rimworld Odyssey -Temperaturführer für Schiffe und Gravtech</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796831905.html" title="Windows Security ist leer oder keine Optionen angezeigt" class="phpgenera_Details_mainR4_bottom_title">Windows Security ist leer oder keine Optionen angezeigt</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/de/article.html">Mehr anzeigen</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>Hei?e KI -Werkzeuge</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/de/ai">Mehr anzeigen</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>Hei?er Artikel</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796832397.html" title="Gras Wonder Build Guide | Uma Musume hübsches Derby" class="phpgenera_Details_mainR4_bottom_title">Gras Wonder Build Guide | Uma Musume hübsches Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796833110.html" title="<??>: 99 N?chte im Wald - alle Abzeichen und wie man sie freischalt" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 N?chte im Wald - alle Abzeichen und wie man sie freischalt</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 Wochen vor</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796831605.html" title="Uma Musume Pretty Derby Banner Zeitplan (Juli 2025)" class="phpgenera_Details_mainR4_bottom_title">Uma Musume Pretty Derby Banner Zeitplan (Juli 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796836699.html" title="Rimworld Odyssey -Temperaturführer für Schiffe und Gravtech" class="phpgenera_Details_mainR4_bottom_title">Rimworld Odyssey -Temperaturführer für Schiffe und Gravtech</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Wochen vor</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/1796831905.html" title="Windows Security ist leer oder keine Optionen angezeigt" class="phpgenera_Details_mainR4_bottom_title">Windows Security ist leer oder keine Optionen angezeigt</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Monate vor</span>
<span>By 下次還敢</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/de/article.html">Mehr anzeigen</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>Hei?e Werkzeuge</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.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="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.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="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/de/ai">Mehr anzeigen</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>Hei?e Themen</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/de/faq/laravel-tutori" title="Laravel-Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel-Tutorial</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/de/faq/php-tutorial" title="PHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP-Tutorial</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/de/faq/zt">Mehr anzeigen</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/de/faq/1796831408.html" title="CSS -Tutorial zum Erstellen von Ladespinner und Animationen" 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="CSS -Tutorial zum Erstellen von Ladespinner und Animationen" />
</a>
<a href="http://ipnx.cn/de/faq/1796831408.html" title="CSS -Tutorial zum Erstellen von Ladespinner und Animationen" class="phphistorical_Version2_mids_title">CSS -Tutorial zum Erstellen von Ladespinner und Animationen</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 12:07 AM</span>
<p class="Articlelist_txts_p">Es gibt drei M?glichkeiten, einen CSS -Laderotator zu erstellen: 1. Verwenden Sie den Basisrotator der Grenzen, um eine einfache Animation durch HTML und CSS zu erreichen. 2. Verwenden Sie einen benutzerdefinierten Rotator mit mehreren Punkten, um den Sprungeffekt durch verschiedene Verz?gerungszeiten zu erreichen. 3. Fügen Sie einen Rotator in die Taste hinzu und wechseln Sie den Klassen über JavaScript, um den Ladestatus anzuzeigen. Jeder Ansatz betont die Bedeutung von Entwurfsdetails wie Farbe, Gr??e, Zug?nglichkeit und Leistungsoptimierung, um die Benutzererfahrung zu verbessern.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796831743.html" title="Behandeln Sie Probleme und Pr?fixe von CSS -Browser -Kompatibilit?t und Pr?fixe" 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="Behandeln Sie Probleme und Pr?fixe von CSS -Browser -Kompatibilit?t und Pr?fixe" />
</a>
<a href="http://ipnx.cn/de/faq/1796831743.html" title="Behandeln Sie Probleme und Pr?fixe von CSS -Browser -Kompatibilit?t und Pr?fixe" class="phphistorical_Version2_mids_title">Behandeln Sie Probleme und Pr?fixe von CSS -Browser -Kompatibilit?t und Pr?fixe</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 01:44 AM</span>
<p class="Articlelist_txts_p">Um mit CSS -Browser -Kompatibilit?t und Pr?fixproblemen umzugehen, müssen Sie die Unterschiede im Browser -Support verstehen und Anbieterpr?fixe vernünftigerweise verwenden. 1. Verstehen Sie gemeinsame Probleme wie Flexbox und Grid -Unterstützung, Position: Sticky Invaly und Animationsleistung ist unterschiedlich. 2. überprüfen Sie den Best?tigungsunterstützungsstatus von Caniuse. 3. Verwenden Sie korrekt -webkit-, -moz-, -ms-, -o- und andere Herstellerpr?fixe; 4. Es wird empfohlen, Autoprefixer zu verwenden, um automatisch Pr?fixe hinzuzufügen. 5. Postcss installieren und Browserlist konfigurieren, um den Zielbrowser anzugeben. 6. automatisch die Kompatibilit?t w?hrend des Baus bew?ltigen; 7. Modernizr -Erkennungsmerkmale k?nnen für alte Projekte verwendet werden; 8. Keine Notwendigkeit, die Konsistenz aller Browser zu verfolgen,</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796834914.html" title="Was ist der Unterschied zwischen Anzeige: Inline, Anzeige: Block und Anzeige: Inline-Block?" 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="Was ist der Unterschied zwischen Anzeige: Inline, Anzeige: Block und Anzeige: Inline-Block?" />
</a>
<a href="http://ipnx.cn/de/faq/1796834914.html" title="Was ist der Unterschied zwischen Anzeige: Inline, Anzeige: Block und Anzeige: Inline-Block?" class="phphistorical_Version2_mids_title">Was ist der Unterschied zwischen Anzeige: Inline, Anzeige: Block und Anzeige: Inline-Block?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:25 AM</span>
<p class="Articlelist_txts_p">ThemaNDiffercesbetweenplay: Inline, Block, Andinline-Blockinhtml/CsSarelayoutBehavior, Spaceusage und Stylingcontrol.1.inlineelementsflowwithtext, Don'tstartonNewlines, Ignorewidth/HeighthThorchingstyhorching-/idelthorchorching/ardaldhordhortaliTalding/ardaldhordelthortex</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796833145.html" title="Erstellen von benutzerdefinierten Formen mit CSS-Clip-Pfad" 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="Erstellen von benutzerdefinierten Formen mit CSS-Clip-Pfad" />
</a>
<a href="http://ipnx.cn/de/faq/1796833145.html" title="Erstellen von benutzerdefinierten Formen mit CSS-Clip-Pfad" class="phphistorical_Version2_mids_title">Erstellen von benutzerdefinierten Formen mit CSS-Clip-Pfad</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 09, 2025 am 01:29 AM</span>
<p class="Articlelist_txts_p">Verwenden Sie das Clip-Pfad-Attribut von CSS, um Elemente in benutzerdefinierte Formen wie Dreiecke, kreisf?rmige Kerben, Polygone usw. zu erregen, ohne sich auf Bilder oder SVGs zu verlassen. Zu den Vorteilen geh?ren: 1.. Unterstützt eine Vielzahl von Grundformen wie Circle, Ellipse, Polygon usw.; 2. reagierende Anpassung und anpassbar an mobile Terminals; 3. Einfach zu animation und kann mit Hover oder JavaScript kombiniert werden, um dynamische Effekte zu erzielen. 4. Es wirkt sich nicht auf den Layoutfluss aus und erfüllt nur den Anzeigebereich. H?ufige Verwendungen sind z. B. kreisf?rmiger Clip-Pfad: Kreis (50pxatcenter) und Dreieck-Clip-Pfad: Polygon (50%0%, 100 0%, 0 0%). Beachten</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796834918.html" title="Das Styling besuchte Links unterschiedlich mit 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="Das Styling besuchte Links unterschiedlich mit CSS" />
</a>
<a href="http://ipnx.cn/de/faq/1796834918.html" title="Das Styling besuchte Links unterschiedlich mit CSS" class="phphistorical_Version2_mids_title">Das Styling besuchte Links unterschiedlich mit CSS</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 11, 2025 am 03:26 AM</span>
<p class="Articlelist_txts_p">Durch das Festlegen des von Ihnen besuchten Links k?nnen Sie die Benutzererfahrung verbessern, insbesondere in inhaltsintensiven Websites, um den Benutzern dabei zu helfen, sich besser zu navigieren. 1. Verwenden Sie CSS: Besuchte Pseudoklasse, um den Stil des besuchten Links wie Farb?nderungen zu definieren. 2. Beachten Sie, dass der Browser nur eine ?nderung einiger Attribute aufgrund von Datenschutzbeschr?nkungen erm?glicht. 3. Die Farbauswahl sollte mit dem Gesamtstil koordiniert werden, um abrupte abrupt zu werden. 4. Das mobile Terminal zeigt diesen Effekt m?glicherweise nicht an. Es wird empfohlen, ihn mit anderen visuellen Eingabeaufforderungen wie Icon -Auxiliary -Logos zu kombinieren.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796837251.html" title="Wie erstelle ich reaktionsschnelle Bilder mit 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="Wie erstelle ich reaktionsschnelle Bilder mit CSS?" />
</a>
<a href="http://ipnx.cn/de/faq/1796837251.html" title="Wie erstelle ich reaktionsschnelle Bilder mit CSS?" class="phphistorical_Version2_mids_title">Wie erstelle ich reaktionsschnelle Bilder mit CSS?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 15, 2025 am 01:10 AM</span>
<p class="Articlelist_txts_p">Um reaktionsschnelle Bilder mit CSS zu erstellen, kann es haupts?chlich durch die folgenden Methoden erreicht werden: 1. Verwenden Sie maximale Breite: 100% und H?he: Auto, damit das Bild an die Containerbreite anpasst und gleichzeitig den Anteil beibeh?lt. 2. Verwenden Sie die SRCSet- und Gr??enattribute von HTML, um die an verschiedenen Bildschirme angepassten Bildquellen intelligent zu laden. 3.. Verwenden Sie Objektfit und Objektposition, um die Bildaufbindung und Fokusanzeige zu steuern. Gemeinsam stellen diese Methoden sicher, dass die Bilder auf verschiedenen Ger?ten klar und wundersch?n pr?sentiert werden.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796832540.html" title="Entmystifizierende CSS -Einheiten: PX, EM, REM, VW, VH -Vergleiche" 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="Entmystifizierende CSS -Einheiten: PX, EM, REM, VW, VH -Vergleiche" />
</a>
<a href="http://ipnx.cn/de/faq/1796832540.html" title="Entmystifizierende CSS -Einheiten: PX, EM, REM, VW, VH -Vergleiche" class="phphistorical_Version2_mids_title">Entmystifizierende CSS -Einheiten: PX, EM, REM, VW, VH -Vergleiche</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 08, 2025 am 02:16 AM</span>
<p class="Articlelist_txts_p">Die Auswahl der CSS -Einheiten h?ngt von den Entwurfsanforderungen und den reaktionsschnellen Anforderungen ab. 1.PX wird für die feste Gr??e verwendet, geeignet für eine pr?zise Kontrolle, aber mangelnde Elastizit?t; 2.Em ist eine relative Einheit, die leicht durch den Einfluss des übergeordneten Elements verursacht wird, w?hrend REM basierend auf dem Wurzelelement stabiler ist und für die globale Skalierung geeignet ist. 3.VW/VH basiert auf der Ansichtsfenstergr??e, die für das reaktionsschnelle Design geeignet ist. Die Leistung unter extremen Bildschirmen sollte jedoch Aufmerksamkeit geschenkt werden. 4. Bei der Auswahl sollte es ermittelt werden, ob reaktionsschnelle Anpassungen, Elementhierarchiebeziehungen und Ansichtsfensterabh?ngigkeit festgelegt werden. Angemessener Gebrauch kann die Layoutflexibilit?t und -wartung verbessern.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/de/faq/1796847484.html" title="Was sind gemeinsame Inkonsistenzen von CSS -Browser?" 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="Was sind gemeinsame Inkonsistenzen von CSS -Browser?" />
</a>
<a href="http://ipnx.cn/de/faq/1796847484.html" title="Was sind gemeinsame Inkonsistenzen von CSS -Browser?" class="phphistorical_Version2_mids_title">Was sind gemeinsame Inkonsistenzen von CSS -Browser?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 26, 2025 am 07:04 AM</span>
<p class="Articlelist_txts_p">Verschiedene Browser weisen Unterschiede in der CSS -Analyse auf, was zu inkonsistenten Anzeigeeffekten führt, haupts?chlich die Differenzentscheidung, die Berechnung des Boxmodells, die Flexbox- und Raster -Layout -Unterstützung und das inkonsistente Verhalten bestimmter CSS -Attribute. 1. Die Standardstilverarbeitung ist inkonsistent. Die L?sung besteht darin, CSSReset oder Normalize.css zu verwenden, um den anf?nglichen Stil zu vereinen. 2. Die Box -Modellberechnung der alten Version von IE ist unterschiedlich. Es wird empfohlen, eine einheitliche Boxgr??e: Border-Box zu verwenden. 3. Flexbox und Grid führen in Kantenf?llen oder in alten Versionen unterschiedlich ab. Weitere Tests und verwenden Sie Autoprefixer; 4. Einige CSS -Attributverhalten sind inkonsistent. Caniuse muss konsultiert und herabgestuft werden.</p>
</div>
</div>
<a href="http://ipnx.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="wjcelcm34c" class="footer">
<div id="wjcelcm34c" 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="wjcelcm34c" class="footermid">
<a href="http://ipnx.cn/de/about/us.html">über uns</a>
<a href="http://ipnx.cn/de/about/disclaimer.html">Haftungsausschluss</a>
<a href="http://ipnx.cn/de/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="vmpfb" class="pl_css_ganrao" style="display: none;"><acronym id="vmpfb"></acronym><blockquote id="vmpfb"></blockquote><b id="vmpfb"></b><ol id="vmpfb"><i id="vmpfb"><dfn id="vmpfb"><ruby id="vmpfb"></ruby></dfn></i></ol><var id="vmpfb"></var><font id="vmpfb"></font><bdo id="vmpfb"></bdo><form id="vmpfb"><track id="vmpfb"><noframes id="vmpfb"><nobr id="vmpfb"></nobr></noframes></track></form><tr id="vmpfb"></tr><strong id="vmpfb"><th id="vmpfb"><em id="vmpfb"><dfn id="vmpfb"></dfn></em></th></strong><ul id="vmpfb"></ul><dl id="vmpfb"><tbody id="vmpfb"><pre id="vmpfb"><sup id="vmpfb"></sup></pre></tbody></dl><tbody id="vmpfb"><dfn id="vmpfb"><center id="vmpfb"><tfoot id="vmpfb"></tfoot></center></dfn></tbody><wbr id="vmpfb"></wbr><small id="vmpfb"></small><optgroup id="vmpfb"><em id="vmpfb"></em></optgroup><tbody id="vmpfb"></tbody><li id="vmpfb"></li><form id="vmpfb"><sup id="vmpfb"></sup></form><optgroup id="vmpfb"></optgroup><style id="vmpfb"></style><small id="vmpfb"></small><label id="vmpfb"><listing id="vmpfb"><dfn id="vmpfb"></dfn></listing></label><p id="vmpfb"><ol id="vmpfb"></ol></p><dfn id="vmpfb"></dfn><i id="vmpfb"><label id="vmpfb"><menu id="vmpfb"><style id="vmpfb"></style></menu></label></i><pre id="vmpfb"></pre><p id="vmpfb"></p><rp id="vmpfb"><video id="vmpfb"></video></rp><progress id="vmpfb"></progress><acronym id="vmpfb"></acronym><cite id="vmpfb"><strong id="vmpfb"></strong></cite><del id="vmpfb"></del><meter id="vmpfb"><del id="vmpfb"><div id="vmpfb"></div></del></meter><tfoot id="vmpfb"><strong id="vmpfb"></strong></tfoot><li id="vmpfb"><label id="vmpfb"><nobr id="vmpfb"></nobr></label></li><legend id="vmpfb"></legend><form id="vmpfb"><address id="vmpfb"></address></form><s id="vmpfb"><var id="vmpfb"></var></s><i id="vmpfb"><legend id="vmpfb"></legend></i><object id="vmpfb"><s id="vmpfb"></s></object><track id="vmpfb"></track><label id="vmpfb"><style id="vmpfb"><i id="vmpfb"></i></style></label><abbr id="vmpfb"><li id="vmpfb"><option id="vmpfb"><dfn id="vmpfb"></dfn></option></li></abbr><wbr id="vmpfb"></wbr><optgroup id="vmpfb"></optgroup><rt id="vmpfb"><legend id="vmpfb"></legend></rt><menuitem id="vmpfb"><sup id="vmpfb"><font id="vmpfb"><em id="vmpfb"></em></font></sup></menuitem><rt id="vmpfb"></rt><input id="vmpfb"></input><pre id="vmpfb"></pre><object id="vmpfb"></object><table id="vmpfb"></table><wbr id="vmpfb"><td id="vmpfb"></td></wbr><small id="vmpfb"><abbr id="vmpfb"></abbr></small><source id="vmpfb"></source><rp id="vmpfb"></rp><track id="vmpfb"></track><li id="vmpfb"><option id="vmpfb"></option></li><small id="vmpfb"><dfn id="vmpfb"></dfn></small><bdo id="vmpfb"><form id="vmpfb"><optgroup id="vmpfb"></optgroup></form></bdo><mark id="vmpfb"></mark><output id="vmpfb"><ruby id="vmpfb"><rp id="vmpfb"></rp></ruby></output><abbr id="vmpfb"></abbr><abbr id="vmpfb"><label id="vmpfb"><label id="vmpfb"><sup id="vmpfb"></sup></label></label></abbr><li id="vmpfb"><label id="vmpfb"><tbody id="vmpfb"></tbody></label></li><p id="vmpfb"></p><menuitem id="vmpfb"><center id="vmpfb"></center></menuitem><output id="vmpfb"></output><legend id="vmpfb"><fieldset id="vmpfb"></fieldset></legend><pre id="vmpfb"></pre><strong id="vmpfb"></strong><cite id="vmpfb"><strike id="vmpfb"><dl id="vmpfb"><acronym id="vmpfb"></acronym></dl></strike></cite><dl id="vmpfb"><acronym id="vmpfb"></acronym></dl><xmp id="vmpfb"><big id="vmpfb"></big></xmp><sup id="vmpfb"></sup><pre id="vmpfb"><strong id="vmpfb"><input id="vmpfb"></input></strong></pre><kbd id="vmpfb"></kbd><big id="vmpfb"><mark id="vmpfb"><address id="vmpfb"></address></mark></big><strong id="vmpfb"><label id="vmpfb"><legend id="vmpfb"><ol id="vmpfb"></ol></legend></label></strong><font id="vmpfb"><del id="vmpfb"></del></font><big id="vmpfb"><form id="vmpfb"></form></big><table id="vmpfb"><strong id="vmpfb"></strong></table><output id="vmpfb"></output><dfn id="vmpfb"></dfn><legend id="vmpfb"><div id="vmpfb"><progress id="vmpfb"></progress></div></legend><strong id="vmpfb"><video id="vmpfb"><del id="vmpfb"></del></video></strong><fieldset id="vmpfb"></fieldset><legend id="vmpfb"><s id="vmpfb"></s></legend><optgroup id="vmpfb"><track id="vmpfb"></track></optgroup><source id="vmpfb"><td id="vmpfb"><sup id="vmpfb"><i id="vmpfb"></i></sup></td></source><abbr id="vmpfb"><li id="vmpfb"><menuitem id="vmpfb"></menuitem></li></abbr><abbr id="vmpfb"></abbr><label id="vmpfb"><object id="vmpfb"><dfn id="vmpfb"></dfn></object></label><center id="vmpfb"></center><optgroup id="vmpfb"><strong id="vmpfb"></strong></optgroup><optgroup id="vmpfb"><strong id="vmpfb"></strong></optgroup><sup id="vmpfb"><center id="vmpfb"><progress id="vmpfb"></progress></center></sup><bdo id="vmpfb"><kbd id="vmpfb"><acronym id="vmpfb"><track id="vmpfb"></track></acronym></kbd></bdo><b id="vmpfb"><del id="vmpfb"></del></b><object id="vmpfb"></object><small id="vmpfb"><u id="vmpfb"><rp id="vmpfb"><video id="vmpfb"></video></rp></u></small><sup id="vmpfb"></sup><wbr id="vmpfb"></wbr><optgroup id="vmpfb"></optgroup><rp id="vmpfb"></rp><tt id="vmpfb"></tt><menu id="vmpfb"></menu><pre id="vmpfb"><dd id="vmpfb"><blockquote id="vmpfb"></blockquote></dd></pre><pre id="vmpfb"></pre><bdo id="vmpfb"><rp id="vmpfb"><progress id="vmpfb"><thead id="vmpfb"></thead></progress></rp></bdo><sub id="vmpfb"></sub><mark id="vmpfb"></mark><legend id="vmpfb"><sup id="vmpfb"><label id="vmpfb"><listing id="vmpfb"></listing></label></sup></legend><del id="vmpfb"></del><thead id="vmpfb"><strong id="vmpfb"></strong></thead><big id="vmpfb"></big><strong id="vmpfb"><small id="vmpfb"><abbr id="vmpfb"><listing id="vmpfb"></listing></abbr></small></strong><form id="vmpfb"><object id="vmpfb"></object></form><var id="vmpfb"><optgroup id="vmpfb"></optgroup></var><strong id="vmpfb"><input id="vmpfb"><noframes id="vmpfb"></noframes></input></strong><table id="vmpfb"><optgroup id="vmpfb"></optgroup></table><strike id="vmpfb"><label id="vmpfb"><sup id="vmpfb"></sup></label></strike><noframes id="vmpfb"><abbr id="vmpfb"><th id="vmpfb"><delect id="vmpfb"></delect></th></abbr></noframes><samp id="vmpfb"><ins id="vmpfb"><sup id="vmpfb"><center id="vmpfb"></center></sup></ins></samp><sup id="vmpfb"></sup><delect id="vmpfb"><pre id="vmpfb"><em id="vmpfb"></em></pre></delect><input id="vmpfb"></input><dl id="vmpfb"><acronym id="vmpfb"></acronym></dl><i id="vmpfb"></i><strike id="vmpfb"><p id="vmpfb"></p></strike><ul id="vmpfb"><kbd id="vmpfb"></kbd></ul><pre id="vmpfb"></pre><address id="vmpfb"></address><optgroup id="vmpfb"><label id="vmpfb"></label></optgroup><s id="vmpfb"><form id="vmpfb"><rp id="vmpfb"><delect id="vmpfb"></delect></rp></form></s><acronym id="vmpfb"><span id="vmpfb"></span></acronym><th id="vmpfb"></th><label id="vmpfb"><bdo id="vmpfb"></bdo></label><tfoot id="vmpfb"><tbody id="vmpfb"></tbody></tfoot><mark id="vmpfb"></mark><s id="vmpfb"><rt id="vmpfb"><source id="vmpfb"><legend id="vmpfb"></legend></source></rt></s><sub id="vmpfb"></sub><object id="vmpfb"></object><source id="vmpfb"></source><dd id="vmpfb"></dd><dd id="vmpfb"></dd><var id="vmpfb"><optgroup id="vmpfb"></optgroup></var><cite id="vmpfb"></cite></div>
</html>