Was ist MVC?
MVC ist eine Architektur, die Geschäftslogik, Präsentation und Daten trennt. In MVC
- M steht für Model
- V steht für View
- C steht für Controller.
MVC ist eine systematische Methode zur Verwendung der Anwendung, bei der der Fluss von der Ansichtsebene ausgeht, wo die Anforderung in der Controller-Ebene ausgelöst und verarbeitet und an die Modellebene gesendet wird, um Daten einzufügen und die Erfolgs- oder Fehlermeldung zurückzugewinnen.
Modellebene:
- Dies ist die Datenschicht, die aus der Geschäftslogik des Systems besteht.
- Es besteht aus allen Daten der Anwendung
- Es repräsentiert auch den Status der Anwendung.
- Es besteht aus Klassen, die die Verbindung zur Datenbank haben.
- Der Controller stellt eine Verbindung zum Modell her, ruft die Daten ab und sendet sie an die Ansichtsebene.
- Das Modell stellt auch eine Verbindung mit der Datenbank her und speichert die Daten in einer Datenbank, die mit dieser verbunden ist.
Ebene anzeigen:
- Dies ist eine Präsentationsschicht.
- Es besteht aus HTML, JSP usw. darin.
- Normalerweise wird die Benutzeroberfläche der Anwendung angezeigt.
- Es wird verwendet, um die Daten anzuzeigen, die von der Steuerung abgerufen werden, die wiederum Daten aus Modellschichtklassen abruft.
- Diese Ansichtsebene zeigt die Daten auf der Benutzeroberfläche der Anwendung.
Controller-Schicht:
- Es fungiert als Schnittstelle zwischen Ansicht und Modell.
- Es fängt alle Anforderungen ab, die von der Ansichtsebene kommen.
- Es empfängt die Anforderungen von der Ansichtsebene und verarbeitet die Anforderungen und führt die erforderliche Validierung für die Anforderung durch.
- Diese Anforderungen werden zur Datenverarbeitung weiter an die Modellschicht gesendet. Sobald die Anforderung verarbeitet ist, werden sie mit den erforderlichen Informationen an die Steuerung zurückgesendet und in der Ansicht entsprechend angezeigt.
Das Diagramm ist unten dargestellt:
Die Vorteile von MVC sind:
- Pflegeleicht
- Einfach zu erweitern
- Einfach zu testen
- Die Navigationssteuerung ist zentralisiert
Beispiel für eine MVC-Architektur
In diesem Beispiel zeigen wir, wie die MVC-Architektur in JSP verwendet wird.
- Wir nehmen das Beispiel eines Formulars mit zwei Variablen "E-Mail" und "Passwort", das unsere Ansichtsebene ist.
- Sobald der Benutzer eine E-Mail und ein Kennwort eingibt und auf Senden klickt, wird die Aktion in mvc_servlet übergeben, wo E-Mail und Kennwort übergeben werden.
- Dieses mvc_servlet ist eine Controller-Schicht. Hier in mvc_servlet wird die Anforderung an das Bean-Objekt gesendet, das als Modellebene fungiert.
- Die E-Mail- und Passwortwerte werden in die Bean gesetzt und für weitere Zwecke gespeichert.
- Von der Bean wird der Wert abgerufen und in der Ansichtsebene angezeigt.
Mvc_example.jsp
<% @ page language = "java" contentType = "text / html; Zeichensatz = ISO-8859-1"pageEncoding = "ISO-8859-1"%>MVC Guru-Beispiel </ title></ head><body><form action = "Mvc_servlet" method = "POST">E-Mail: <input type = "text" name = "email"><br />Passwort: <input type = "text" name = "password" /><input type = "submit" value = "Submit" /></ form></ body></ html></pre> <p><strong>Erläuterung des Codes:</strong></p> <p><strong>Ebene anzeigen:</strong></p> <p><strong>Codezeile 10-15:</strong> Hier nehmen wir ein Formular an, das zwei Felder als Parameter "E-Mail" und "Passwort" enthält. Diese Anforderung muss an einen Controller Mvc_servlet.java weitergeleitet werden, der in Aktion übergeben wird. Die Methode, über die er ausgeführt wird übergeben wird ist POST-Methode.</p> <p>Mvc_servlet.java</p> <pre translate="no">Paket Demotest;import java.io.IOException;import javax.servlet.RequestDispatcher;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/ *** Servlet-Implementierungsklasse Mvc_servlet* /öffentliche Klasse Mvc_servlet erweitert HttpServlet {private static final long serialVersionUID = 1L;/ *** @see HttpServlet # HttpServlet ()* /public Mvc_servlet () {Super();// TODO Automatisch generierter Konstruktor-Stub}}protected void doPost (HttpServletRequest-Anforderung, HttpServletResponse-Antwort) löst ServletException, IOException {aus// TODO Automatisch generierter MethodenstubString email = request.getParameter ("email");String password = request.getParameter ("Passwort");TestBean testobj = new TestBean ();testobj.setEmail (E-Mail);testobj.setPassword (Passwort);request.setAttribute ("gurubean", testobj);RequestDispatcher rd = request.getRequestDispatcher ("mvc_success.jsp");rd.forward (Anfrage, Antwort);}}}}</pre> <p><strong>Erläuterung des Codes:</strong></p> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <p><strong>Controller-Schicht</strong></p> <p>Codezeile <strong>14:</strong> mvc_servlet erweitert HttpServlet.<strong> </strong></p> <p>Codezeile <strong>26:</strong> Da die verwendete Methode POST ist, kommt die Anforderung in eine doPost-Methode des Servlets, die die Anforderungen verarbeitet und als testobj im Bean-Objekt speichert.</p> <p>Codezeile <strong>34:</strong> Mit dem Anforderungsobjekt setzen wir das Attribut als gurubean, dem der Wert von testobj zugewiesen wird.</p> <p>Codezeile <strong>35:</strong> Hier verwenden wir das Request Dispatcher-Objekt, um die Erfolgsmeldung an mvc_success.jsp zu übergeben</p> <p>TestBean.java</p> <pre translate="no">Paket Demotest;import java.io.Serializable;öffentliche Klasse TestBean implementiert Serializable {public String getEmail () {E-Mail zurücksenden;}}public void setEmail (String email) {this.email = email;}}public String getPassword () {Passwort zurückgeben;}}public void setPassword (String password) {this.password = password;}}private String email = "null";private String password = "null";}}</pre> <p><strong>Erläuterung des Codes:</strong></p> <p><strong>Modellebene:</strong></p> <p><strong>Codezeile 7-17:</strong> Enthält die Getter und Setter von E-Mail und Passwort, die Mitglieder der Test Bean-Klasse sind</p> <p><strong>Codezeile 19-20:</strong> Definiert die Mitglieder-E-Mail-Adresse und das Kennwort des Zeichenfolgentyps in der Bean-Klasse.</p> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <p>Mvc_success.jsp</p> <pre translate="no"><% @ page language = "java" contentType = "text / html; Zeichensatz = ISO-8859-1"pageEncoding = "ISO-8859-1"%><% @ page import = "demotest.TestBean"%><! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // DE" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv = "Inhaltstyp" content = "text / html; Zeichensatz = ISO-8859-1"><title> Guru-Erfolg </ title></ head><body><%TestBean testguru = (TestBean) request.getAttribute ("gurubean");out.print ("Willkommen" + testguru.getEmail ());%></ body></ html></pre> <p><strong>Erläuterung des Codes:</strong></p> <p>Codezeile <strong>12:</strong> Wir erhalten das Attribut mithilfe des Anforderungsobjekts, das in der doPost-Methode des Servlets festgelegt wurde.</p> <p><strong>Codezeile 13:</strong> Wir drucken die Begrüßungsnachricht und die E-Mail-ID, die im Bean-Objekt gespeichert wurden</p> <p><strong>Ausgabe:</strong></p> <p>Wenn Sie den obigen Code ausführen, erhalten Sie die folgende Ausgabe:</p> <p>Wenn Sie auf mvc_example.jsp klicken, erhalten Sie das Formular mit E-Mail und Passwort über die Schaltfläche "Senden".<strong> </strong></p> <p>Sobald Sie E-Mail und Passwort in das Formular eingegeben haben, klicken Sie auf Senden</p> <p>Nach dem Klicken auf Senden wird die Ausgabe wie folgt angezeigt</p> <p><strong>Ausgabe:</strong></p> <p>Wenn Sie E-Mail und Passwort in den Bildschirm eingeben und dann auf Senden klicken, werden die Details in TestBean gespeichert und von der TestBean auf dem nächsten Bildschirm abgerufen, um die Erfolgsmeldung zu erhalten.</p> <p><strong>Zusammenfassung:</strong></p> <p>In diesem Artikel haben wir etwas über die MVC, dh die Model View Controller-Architektur, gelernt.</p> <p>JSP spielt die Rolle der Präsentation der Daten und des Controllers. Es ist eine Schnittstelle zwischen Modell und Ansicht, während das Modell sowohl mit dem Controller als auch mit der Datenbank verbunden ist. Die Hauptgeschäftslogik ist in der Modellebene vorhanden. </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Beliebte Beiträge</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003486-cross-browser-inline-block" title="Browserübergreifender Inline-Block - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/7237187/cross_browser_inline-block_css-tricks.png.webp" loading="lazy" alt="Browserübergreifender Inline-Block - CSS-Tricks" title="Browserübergreifender Inline-Block - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003486-cross-browser-inline-block" title="Browserübergreifender Inline-Block - CSS-Tricks" rel="bookmark">Browserübergreifender Inline-Block - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003487-cross-browser-min-height" title="Browserübergreifende Mindesthöhe - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/3402795/cross-browser_min_height_css-tricks.png.webp" loading="lazy" alt="Browserübergreifende Mindesthöhe - CSS-Tricks" title="Browserübergreifende Mindesthöhe - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003487-cross-browser-min-height" title="Browserübergreifende Mindesthöhe - CSS-Tricks" rel="bookmark">Browserübergreifende Mindesthöhe - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003488-corner-ribbon" title="Eckband - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/3621182/corner_ribbon_css-tricks.png.webp" loading="lazy" alt="Eckband - CSS-Tricks" title="Eckband - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003488-corner-ribbon" title="Eckband - CSS-Tricks" rel="bookmark">Eckband - CSS-Tricks 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Die besten Bewertungen für den Monat</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003984-php-date-parameters" title="PHP-Datumsparameter - CSS-Tricks" rel="bookmark">PHP-Datumsparameter - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003985-quick-alphabetic-navigation" title="Schnelle alphabetische Navigation - CSS-Tricks" rel="bookmark">Schnelle alphabetische Navigation - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003986-random-hex-color" title="Zufällige Hex-Farbe - CSS-Tricks" rel="bookmark">Zufällige Hex-Farbe - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003987-randomize-file-name" title="Dateinamen zufällig auswählen - CSS-Tricks" rel="bookmark">Dateinamen zufällig auswählen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003988-randomize-background-image" title="Hintergrundbild randomisieren - CSS-Tricks" rel="bookmark">Hintergrundbild randomisieren - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003989-random-slogan-displayer" title="Zufälliger Slogan Displayer - CSS-Tricks" rel="bookmark">Zufälliger Slogan Displayer - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003990-random-string-from-pre-determined-characters" title="Zufällige Zeichenfolge aus vordefinierten Zeichen - CSS-Tricks" rel="bookmark">Zufällige Zeichenfolge aus vordefinierten Zeichen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003991-readwrite-files" title="Dateien lesen / schreiben - CSS-Tricks" rel="bookmark">Dateien lesen / schreiben - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003992-return-only-one-variable-from-mysql-query" title="Geben Sie nur eine Variable aus MySQL Query - zurück CSS-Tricks" rel="bookmark">Geben Sie nur eine Variable aus MySQL Query - zurück CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003993-rss-generator" title="RSS Generator - CSS-Tricks" rel="bookmark">RSS Generator - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003994-sanitize-database-inputs" title="Datenbankeingänge bereinigen - CSS-Tricks" rel="bookmark">Datenbankeingänge bereinigen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003995-send-a-text-message" title="Senden Sie eine Textnachricht - CSS-Tricks" rel="bookmark">Senden Sie eine Textnachricht - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003996-separate-first-and-last-name" title="Vor- und Nachname trennen - CSS-Tricks" rel="bookmark">Vor- und Nachname trennen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003997-send-email" title="E-Mail senden - CSS-Tricks" rel="bookmark">E-Mail senden - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003998-test-if-string-starts-with-certain-characters-in-php" title="Testen Sie, ob der String mit bestimmten Zeichen in PHP - beginnt CSS-Tricks" rel="bookmark">Testen Sie, ob der String mit bestimmten Zeichen in PHP - beginnt CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Top Artikel</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003079-transition-property" title="Übergangseigenschaft - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/9381198/transition-property_css-tricks.png.webp" loading="lazy" alt="Übergangseigenschaft - CSS-Tricks" title="Übergangseigenschaft - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003079-transition-property" title="Übergangseigenschaft - CSS-Tricks" rel="bookmark">Übergangseigenschaft - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003080-transition-timing-function" title="Übergangszeitfunktion - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/9557538/transition-timing-function_css-tricks.png.webp" loading="lazy" alt="Übergangszeitfunktion - CSS-Tricks" title="Übergangszeitfunktion - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003080-transition-timing-function" title="Übergangszeitfunktion - CSS-Tricks" rel="bookmark">Übergangszeitfunktion - CSS-Tricks 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003081-unicode-range" title="Unicode-Bereich - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/9846126/unicode-range_css-tricks.png.webp" loading="lazy" alt="Unicode-Bereich - CSS-Tricks" title="Unicode-Bereich - CSS-Tricks" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003081-unicode-range" title="Unicode-Bereich - CSS-Tricks" rel="bookmark">Unicode-Bereich - CSS-Tricks 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Beliebte Beiträge</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004141-106-use-browserstack-for-live-web-based-cross-browser-testing" title="# 106: Verwenden Sie BrowserStack für webbasierte Live-Cross-Browser-Tests - CSS-Tricks" rel="bookmark"># 106: Verwenden Sie BrowserStack für webbasierte Live-Cross-Browser-Tests - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004142-103-integrating-fitvids-js-into-wordpress" title="# 103: Integration von FitVids.js in WordPress - CSS-Tricks" rel="bookmark"># 103: Integration von FitVids.js in WordPress - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004143-107-livereload-a-menu-bar-app-for-preprocessors-and-speedy-development" title="# 107: LiveReload, eine Menüleisten-App für Präprozessoren und schnelle Entwicklung - CSS-Tricks" rel="bookmark"># 107: LiveReload, eine Menüleisten-App für Präprozessoren und schnelle Entwicklung - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004144-108-using-chartwell" title="# 108: Verwenden von Chartwell - CSS-Tricks" rel="bookmark"># 108: Verwenden von Chartwell - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004145-10-fixed-width-fluid-width-and-elastic-width" title="# 10: Feste Breite, Flüssigkeitsbreite und elastische Breite - CSS-Tricks" rel="bookmark"># 10: Feste Breite, Flüssigkeitsbreite und elastische Breite - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Tipp Der Redaktion</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224285-transfer-posting-of-goods-in-sap-mb1b" title="Umbuchung von Waren in SAP MB1B" rel="bookmark">Umbuchung von Waren in SAP MB1B</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224286-top-21-sap-mm-interview-questions-and-answers" title="Top 21 Fragen zum SAP MM-Interview & Antworten" rel="bookmark">Top 21 Fragen zum SAP MM-Interview & Antworten</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224287-how-to-create-goods-receipt-in-sap-migo-mb1c-mb03" title="So erstellen Sie einen Wareneingang in SAP: MIGO, MB1C, MB03" rel="bookmark">So erstellen Sie einen Wareneingang in SAP: MIGO, MB1C, MB03</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224288-sap-mm-module-pdf-material-management-tutorial" title="SAP MM Modul PDF: Material Management Tutorial" rel="bookmark">SAP MM Modul PDF: Material Management Tutorial</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224289-introduction-to-sap-qm" title="Einführung in SAP QM" rel="bookmark">Einführung in SAP QM</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Top Artikel</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003064-text-orientation" title="Textorientierung - CSS-Tricks" rel="bookmark">Textorientierung - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003067-text-underline-position" title="Text-Unterstreichungsposition - CSS-Tricks" rel="bookmark">Text-Unterstreichungsposition - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003069-text-underline-offset" title="Text-Unterstreichungs-Offset - CSS-Tricks" rel="bookmark">Text-Unterstreichungs-Offset - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003070-transform-origin" title="Transformationsursprung - CSS-Tricks" rel="bookmark">Transformationsursprung - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003071-transform-style" title="Transformationsstil - CSS-Tricks" rel="bookmark">Transformationsstil - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright de.css-code.org, 2025 April | <a href="https://de.css-code.org/about-site" title="Über Site">Über Site</a> | <a href="https://de.css-code.org/contacts" title="Kontakte">Kontakte</a> | <a href="https://de.css-code.org/privacy-policy" title="Datenschutz-Bestimmungen">Datenschutz-Bestimmungen</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>