3 Layoutbeispiele für Rock Solid-Websites codiert

Kürzlich haben wir bei Design Shack einen Artikel mit dem Titel? 10 Rock Solid Website Layout Examples? Vorgestellt, in dem einige gängige Layouts in einfache Silhouette-Drahtgitter unterteilt wurden, sodass Sie diese problemlos in Ihrer Arbeit anwenden können.

Heute habe ich drei dieser Layouts ausgewählt und sie in live reagierende Webseiten mit etwas HTML und CSS konvertiert. Sie sind alle sehr einfach und leicht genug für viele Anfänger, und wir werden ein tolles Framework verwenden, um das schwere Heben zu erledigen.

Skelett: Eine Boilerplate für Responsive Web Design

In einem weiteren kürzlich erschienenen Artikel habe ich die Verwendung des Skeleton Framework zum Erstellen von "responsive" Webseiten beschrieben, was bedeutet, dass sie gut auf alle Browserfenster jeder Größe reagieren. Responsive Webseiten sehen auf großen Flachbildschirmen, winzigen Smartphone-Bildschirmen und allem, was dazwischen ist, gut aus.

Da es mir Spaß gemacht hat, verwenden wir Skeleton heute noch einmal, um diese einfachen Layouts in vollständig reagierende Webseiten umzuwandeln. Es wird so einfach sein, dass wir drei in einem einzigen Beitrag abdecken können.

Wenn Sie mitmachen, sollten Sie unbedingt die Skeleton Boilerplate herunterladen!

Drei Boxen

Der erste ist eine unglaublich einfache und dennoch effektive Möglichkeit, Bilder zum echten Helden Ihrer Homepage zu machen. Der Großteil der Seite besteht aus drei großen Fotos, die entweder statische Bilder oder dynamische Diashows sein können.

Das HTML

Das Bild oben hat fünf offensichtliche Elemente, die wir erstellen müssen: das Logo (oben links), die Navigation (oben rechts), ein großes Bild und zwei kleinere Bilder. Das erste, was wir tun müssen, ist, für jedes ein div zu erstellen und einige Breiten zu bestimmen.

Die Skeleton Boilerplate verwendet ein Sechzehn-Säulensystem, um den Bereich in zwei Abschnitte aufzuteilen, verwenden wir die Klassen? Acht? und? Spalten ?. In ähnlicher Weise, wenn der Inhalt so ausgedehnt werden soll, wie wir nur "sechzehn" verwenden. stattdessen.

Jetzt müssen wir unsere Divs mit Inhalten füllen. Wir verwenden nur Text für den Logobereich und werfen für die Navigation eine ungeordnete Liste, die wir nach links verschieben können, um die Elemente in ein horizontales Layout zu bringen. Schließlich brauchen wir für die anderen nur ein paar Platzhalterbilder.

<h2>Design Shack</h2> <ul> <li>Zuhause</li> <li>Über</li> <li>Kontakt</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_3.jpg"> <h2>3D-Screenshots</h2> <p>Dieser verwendet einen sehr häufigen Effekt, bei dem Sie ein paar Screenshots Ihrer Website erstellen und diese so anordnen, dass sie wie ein 3D-Raum wirken. Das Modell für die Screenshots wird in Photoshop erstellt, so dass Sie wirklich nur ein großes Bild und etwas Text benötigen. Einfacher geht es nicht!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_4.jpg"> <h3>HTML</h3> <p>Dieses ist dem letzten ziemlich ähnlich, also werde ich die Dinge ein wenig von der ursprünglichen Gliederung unterscheiden. Am Ende haben wir eine etwas andere Seite als die letzte. </p> <textarea wrap="soft" readonly="">

Wie Sie sehen, gibt es hier einen Curveball in Form eines zusätzlichen Wrappers. Dies ermöglicht uns, die dunkle Leiste hinter dem Inhalt oben auf der Seite einzufügen. Danach ist alles schön und einfach und wir brauchen nur zwei Divs mit voller Breite.

<h3>DS</h3> <ul> <li>Zuhause</li> <li>Über</li> <li>Kontakt</li> </ul> <h1>Lorem Ipsum Doller Set</h1> <p>Lorem ipsum dolor sitzen amet? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_5.jpg"> <h2>Vorgestellte Grafik</h2> <p>Hier können Sie Symbole, Screenshots, Logos oder andere Elemente anzeigen, die in einem großen Kreis gut aussehen. Wieder werden wir feststellen, dass die Layoutarbeit fast mühelos ist und das Ergebnis einzigartig und interessant erscheint.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_6.jpg"> <h3>HTML</h3> <p>Bei diesem Vorgang setzen wir das Logo und die Navigation auf verschiedene Linien und teilen dann die Breite der nächsten Reihe zwischen dem großen Kreisbild und dem Text auf.</p> <p>Beachten Sie, dass der Inhalt nicht mit zwei "acht Spalten" geteilt wird. Klassen, die ich benutzte und acht und sieben. Dann habe ich eine leere Stelle mit einem? Versetzt um eins? Klasse.</p> <textarea wrap="soft" readonly="">

Der Inhalt ist alles, was wir zuvor gesehen haben, ein Header-Tag für das Logo, ul für die Navigation, ein paar Absatz-Tags und ein Bild. Das ist alles was man braucht, ein wenig Styling und wir werden diesen Beitrag zusammenfassen!

<h3>Design Shack</h3> <ul> <li>Zuhause</li> <li>Über</li> <li>Portfolio</li> <li>Kontakt</li> </ul> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sitzen amet? </p> <p>Lorem ipsum dolor sitzen amet? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_7.jpg"> <h2>Fazit</h2> <p>Wie Sie sehen, können unsere grundsoliden Layout-Beispiele mit sehr geringem Aufwand in HTML und CSS konvertiert werden. Durch die Verwendung von Skeleton war es sogar möglich, die Layouts mit nur wenigen zusätzlichen Codezeilen auf unterschiedliche Browsergrößen anzupassen.</p> <p>Ich hoffe, dass Ihnen dieses Tutorial gefallen hat und es für zukünftige Projekte nützlich ist. Fühlen Sie sich frei, meinen Code zu stehlen und verwenden Sie ihn, wie Sie es für richtig halten!</p>