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="/8223787-how-to-create-a-new-cost-center-sap-ks01" title="So erstellen Sie ein neues KOSTENZENTRUM: SAP KS01" rel="bookmark"><img src="https://cdn.css-code.org/1905234/how_to_create_a_new_cost_center_sap_ks01.png.webp" loading="lazy" alt="So erstellen Sie ein neues KOSTENZENTRUM: SAP KS01" title="So erstellen Sie ein neues KOSTENZENTRUM: SAP KS01" 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="/8223787-how-to-create-a-new-cost-center-sap-ks01" title="So erstellen Sie ein neues KOSTENZENTRUM: SAP KS01" rel="bookmark">So erstellen Sie ein neues KOSTENZENTRUM: SAP KS01 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="/8223788-all-about-internal-order-in-sap" title="Alles über den Innenauftrag in SAP" rel="bookmark"><img src="https://cdn.css-code.org/6206195/all_about_internal_order_in_sap.png.webp" loading="lazy" alt="Alles über den Innenauftrag in SAP" title="Alles über den Innenauftrag in SAP" 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="/8223788-all-about-internal-order-in-sap" title="Alles über den Innenauftrag in SAP" rel="bookmark">Alles über den Innenauftrag in SAP 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="/8223789-settlement-of-internal-orders-tutorial-ko02-and-ko88-in-sap" title="Tutorial zur Abwicklung von Innenaufträgen: KO02 & KO88 in SAP" rel="bookmark"><img src="https://cdn.css-code.org/8156539/settlement_of_internal_orders_tutorial_ko02_ampamp_ko88_in_sap.png.webp" loading="lazy" alt="Tutorial zur Abwicklung von Innenaufträgen: KO02 & KO88 in SAP" title="Tutorial zur Abwicklung von Innenaufträgen: KO02 & KO88 in SAP" 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="/8223789-settlement-of-internal-orders-tutorial-ko02-and-ko88-in-sap" title="Tutorial zur Abwicklung von Innenaufträgen: KO02 & KO88 in SAP" rel="bookmark">Tutorial zur Abwicklung von Innenaufträgen: KO02 & KO88 in SAP 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="/8003438-83-building-the-wordpress-homepage-part-2" title="# 83: Erstellen der WordPress-Homepage, Teil 2 - CSS-Tricks" rel="bookmark"># 83: Erstellen der WordPress-Homepage, Teil 2 - 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="/8003439-157-immediate-post-launch-followup" title="# 157: Sofortiges Follow-up nach dem Start - CSS-Tricks" rel="bookmark"># 157: Sofortiges Follow-up nach dem Start - 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="/8003440-81-moving-the-header-to-wordpress" title="# 81: Verschieben des Headers nach WordPress - CSS-Tricks" rel="bookmark"># 81: Verschieben des Headers nach WordPress - 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="/8003441-155-going-through-the-pre-launch-checklist" title="# 155: Durchgehen der Checkliste vor dem Start - CSS-Tricks" rel="bookmark"># 155: Durchgehen der Checkliste vor dem Start - 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="/8003442-156-launching-the-site-part-1" title="# 156: Starten der Site, Teil 1 - CSS-Tricks" rel="bookmark"># 156: Starten der Site, Teil 1 - 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="/8003443-80-updating-local-content-by-running-the-sql" title="# 80: Aktualisieren lokaler Inhalte durch Ausführen von SQL - CSS-Tricks" rel="bookmark"># 80: Aktualisieren lokaler Inhalte durch Ausführen von SQL - 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="/8003444-158-a-month-later-final-wrapup" title="# 158: Einen Monat später: Final Wrapup - CSS-Tricks" rel="bookmark"># 158: Einen Monat später: Final Wrapup - 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="/8003445-85-blog-post-view-single-php-in-wordpress" title="# 85: Blog Post View (single.php) in WordPress - CSS-Tricks" rel="bookmark"># 85: Blog Post View (single.php) in WordPress - 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="/8003447-84-moving-footer-into-wordpress" title="# 84: Fußzeile in WordPress - verschieben CSS-Tricks" rel="bookmark"># 84: Fußzeile in WordPress - verschieben 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="/8003448-88-building-the-gallery-bar" title="# 88: Erstellen der Galerie-Leiste - CSS-Tricks" rel="bookmark"># 88: Erstellen der Galerie-Leiste - 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="/8003449-86-photoshopping-the-gallery" title="# 86: Photoshopping in der Galerie - CSS-Tricks" rel="bookmark"># 86: Photoshopping in der Galerie - 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="/8003450-89-tweaking-the-gallery-bar" title="# 89: Optimieren der Galerie-Leiste - CSS-Tricks" rel="bookmark"># 89: Optimieren der Galerie-Leiste - 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="/8003451-90-setting-up-individual-pages-in-the-gallery" title="# 90: Einrichten einzelner Seiten in der Galerie - CSS-Tricks" rel="bookmark"># 90: Einrichten einzelner Seiten in der Galerie - 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="/8003452-87-gallery-grid-izing" title="# 87: Galerie-Gitter - CSS-Tricks" rel="bookmark"># 87: Galerie-Gitter - 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="/8003453-91-photoshopping-individual-gallery-pages" title="# 91: Photoshopping einzelner Galerieseiten - CSS-Tricks" rel="bookmark"># 91: Photoshopping einzelner Galerieseiten - 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="/8003158-draggable-elements" title="Ziehbare Elemente - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/4078507/draggable_elements_css-tricks.png.webp" loading="lazy" alt="Ziehbare Elemente - CSS-Tricks" title="Ziehbare Elemente - 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="/8003158-draggable-elements" title="Ziehbare Elemente - CSS-Tricks" rel="bookmark">Ziehbare Elemente - 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="/8003159-flexible-grids" title="Flexible Gitter - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/6000139/flexible_grids_css-tricks.png.webp" loading="lazy" alt="Flexible Gitter - CSS-Tricks" title="Flexible Gitter - 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="/8003159-flexible-grids" title="Flexible Gitter - CSS-Tricks" rel="bookmark">Flexible Gitter - 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="/8003160-a-striped-barberpole-animation" title="Eine gestreifte Barberpole Animation - CSS-Tricks" rel="bookmark"><img src="https://cdn.css-code.org/5711509/a_striped_barberpole_animation_css-tricks.png.webp" loading="lazy" alt="Eine gestreifte Barberpole Animation - CSS-Tricks" title="Eine gestreifte Barberpole Animation - 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="/8003160-a-striped-barberpole-animation" title="Eine gestreifte Barberpole Animation - CSS-Tricks" rel="bookmark">Eine gestreifte Barberpole Animation - 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="/8226206-17-best-defrag-software-in-2021-freepaid" title="17 BESTE Defragmentierungssoftware im Jahr 2021 (kostenlos / bezahlt)" rel="bookmark">17 BESTE Defragmentierungssoftware im Jahr 2021 (kostenlos / bezahlt)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226207-find-and-remove-duplicate-files-on-windowsmac-18-best-tools" title="Suchen und Entfernen doppelter Dateien unter Windows / Mac: 18 Beste Tools" rel="bookmark">Suchen und Entfernen doppelter Dateien unter Windows / Mac: 18 Beste Tools</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226208-top-31-mvc-interview-questions-and-answers" title="Top 31 MVC Interview Fragen & Antworten" rel="bookmark">Top 31 MVC Interview Fragen & Antworten</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226209-top-50-software-engineering-interview-questions-and-answers" title="Top 50 Fragen und Antworten zum Interview mit Software Engineering" rel="bookmark">Top 50 Fragen und Antworten zum Interview mit Software Engineering</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8226210-web-scraping-with-vba" title="Web Scraping mit VBA" rel="bookmark">Web Scraping mit VBA</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="/8004315-70-random-pet-peeves" title="# 70: Zufällige Pet Peeves - CSS-Tricks" rel="bookmark"># 70: Zufällige Pet Peeves - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004316-69-first-ten-minutes-with-typekit" title="# 69: Die ersten zehn Minuten mit TypeKit - CSS-Tricks" rel="bookmark"># 69: Die ersten zehn Minuten mit TypeKit - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004317-71-building-a-website-1-of-3-photoshop-mockup" title="# 71: Erstellen einer Website (1 von 3): Photoshop Mockup - CSS-Tricks" rel="bookmark"># 71: Erstellen einer Website (1 von 3): Photoshop Mockup - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004318-74-editable-css3-image-gallery" title="# 74: Bearbeitbare CSS3-Bildergalerie - CSS-Tricks" rel="bookmark"># 74: Bearbeitbare CSS3-Bildergalerie - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8004319-73-building-a-website-3-of-3-wordpress-theme" title="# 73: Erstellen einer Website (3 von 3): WordPress Theme - CSS-Tricks" rel="bookmark"># 73: Erstellen einer Website (3 von 3): WordPress Theme - CSS-Tricks</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="/8003804-clear-a-file-input" title="Dateieingabe löschen - CSS-Tricks" rel="bookmark">Dateieingabe löschen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003806-clear-default-search-string-on-focus" title="Standard-Suchzeichenfolge im Fokus löschen - CSS-Tricks" rel="bookmark">Standard-Suchzeichenfolge im Fokus löschen - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003807-click-once-and-unbind" title="Klicken Sie auf Einmal und binden Sie - CSS-Tricks" rel="bookmark">Klicken Sie auf Einmal und binden Sie - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003809-combine-slide-and-fade-functions" title="Folien- und Überblendfunktionen kombinieren - CSS-Tricks" rel="bookmark">Folien- und Überblendfunktionen kombinieren - CSS-Tricks</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003810-compare-jquery-objects" title="Vergleichen Sie jQuery-Objekte - CSS-Tricks" rel="bookmark">Vergleichen Sie jQuery-Objekte - CSS-Tricks</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright de.css-code.org, 2025 August | <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>