Herausforderung: Grundlegendes Layoutverständnis
Diese Herausforderung wird Ihr Wissen über die Layout-Features testen, die wir bisher in diesem Modul behandelt haben, nämlich Flexbox, Floats, Grid und Positionierung. Am Ende werden Sie ein Webseiten-Layout entwickelt haben, das alle diese grundlegenden Werkzeuge nutzt.
Ausgangspunkt
Wir werden Sie dazu bringen, diese Herausforderung in Ihrer lokalen Entwicklungsumgebung zu lösen; idealerweise sollten Sie das Beispiel in einem vollständigen Browserfenster ansehen, um sicherzustellen, dass die Layout-Funktionen wie erwartet funktionieren.
-
Erstellen Sie einen neuen Ordner auf Ihrem Computer namens
layout-challenge. -
Erstellen Sie innerhalb des Ordners eine Datei
index.htmlund fügen Sie folgenden Inhalt ein:html<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Layout Task</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="logo">My exciting website!</div> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About us</a></li> <li><a href="">Our history</a></li> <li><a href="">Contacts</a></li> </ul> </nav> <main class="grid"> <article> <h1>An Exciting Blog Post</h1> <img src="images/square6.jpg" alt="placeholder" class="feature" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non justo at erat egestas porttitor vel nec tortor. Mauris in molestie ipsum. Vivamus diam elit, ornare ornare nisi vitae, ullamcorper pharetra ligula. In vel lacus quis nulla sollicitudin pellentesque. </p> <p> Nunc vitae eleifend odio, eget tincidunt sem. Cras et varius justo. Nulla sollicitudin quis urna vitae efficitur. Pellentesque hendrerit molestie arcu sit amet lacinia. Vivamus vulputate sed purus at eleifend. Phasellus malesuada sem vel libero hendrerit, sed finibus massa porta. Vestibulum luctus scelerisque libero, sit amet sagittis eros sollicitudin ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <p> Phasellus tincidunt eros iaculis, feugiat mi at, eleifend mauris. Quisque porttitor lacus eu massa condimentum, eu tincidunt nisl consequat. Nunc egestas lacus dolor, id scelerisque ante tincidunt ac. In risus massa, sodales ac enim eu, iaculis eleifend lorem. </p> <p> Maecenas euismod condimentum enim, non rhoncus neque tempor ut. Vestibulum eget nisi ornare, vehicula felis id, aliquet nibh. Donec in mauris in diam aliquam commodo nec ac nunc. Aliquam nisl risus, eleifend a iaculis id, tempor vel tortor. Nam ullamcorper dictum tellus id rhoncus. Sed quis nulla in mi aliquam euismod nec eu metus. </p> <p> Nam orci nulla, convallis aliquet ante ut, lobortis hendrerit risus. Nulla malesuada porta turpis in consequat. Duis suscipit nulla a mauris pellentesque vehicula. Fusce euismod, mi malesuada venenatis vestibulum, metus erat faucibus dui, vel rutrum turpis nibh ut diam. </p> <p> Nam ornare et mauris eget tincidunt. Nam ornare et mauris eget tincidunt. Donec et ipsum a orci elementum commodo et ut ex. Vivamus porttitor sem in purus maximus, eu imperdiet felis lobortis. </p> <p> Pellentesque ullamcorper dolor ut ullamcorper convallis. Duis a orci aliquet, pretium neque ut, auctor purus. Proin viverra tincidunt nisi id fringilla. Maecenas interdum risus in ultricies finibus. Vestibulum volutpat tincidunt libero, a feugiat leo suscipit in. Sed eget lacus rutrum, semper ligula a, vestibulum ipsum. Mauris in odio fringilla, accumsan eros blandit, mattis odio. Ut viverra mollis augue, vitae ullamcorper velit hendrerit eu. Curabitur mi lacus, condimentum in auctor sed, ornare sed leo. </p> </article> <aside> <h2>Photography</h2> <ul class="photos"> <li><img src="images/square1.jpg" alt="placeholder" /></li> <li><img src="images/square2.jpg" alt="placeholder" /></li> <li><img src="images/square3.jpg" alt="placeholder" /></li> <li><img src="images/square4.jpg" alt="placeholder" /></li> <li><img src="images/square5.jpg" alt="placeholder" /></li> </ul> </aside> </main> </body> </html> -
Erstellen Sie innerhalb des Ordners eine Datei
style.cssund fügen Sie folgenden Inhalt ein:css* { box-sizing: border-box; } body { background-color: white; color: #333333; margin: 0; font: 1.2em / 1.6 sans-serif; } img { max-width: 100%; display: block; border: 1px solid black; } .logo { font-size: 200%; padding: 50px 20px; margin: 0 auto; max-width: 980px; } .grid { margin: 0 auto; max-width: 980px; } nav { background-color: black; padding: 0.5em; } nav ul { margin: 0; padding: 0; list-style: none; } nav a { color: white; text-decoration: none; padding: 0.5em 1em; } .photos { list-style: none; margin: 0; padding: 0; } .feature { width: 200px; } -
Erstellen Sie innerhalb des Ordners einen Unterordner namens
imagesund speichern Sie die folgenden Bilddateien darin: -
Speichern Sie Ihre Dateien und laden Sie
index.htmlin einem Browser, um bereit zu testen. Der Ausgangspunkt der Seite hat eine grundlegende Formatierung, aber kein Layout und sollte in etwa so aussehen:
Projektanleitung
Sie haben etwas Roh-HTML, grundlegendes CSS und Bilder erhalten — jetzt müssen Sie ein Layout für das Design erstellen.
Die Aufgaben, die Sie erledigen müssen, sind:
- Die Navigationspunkte in einer Reihe anzeigen, mit einem gleichen Abstand zwischen den Elementen und einem kleineren Abstand an beiden Enden der Reihe.
- Die Navigationsleiste so gestalten, dass sie sich normal mit dem Inhalt scrollt, aber dann oben am Ansichtsfenster haften bleibt, wenn sie dieses erreicht.
- Das "Feature"-Bild im Artikel so gestalten, dass der Text darum herum rechts und unten umbrochen wird, mit einem geeigneten Abstand zwischen dem Bild und dem Text.
- Die
<article>und<aside>Elemente als zweispaltiges Layout anzeigen, wobei das erstere dreimal so breit ist wie das letztere. Die Spalten sollten flexibel sein, sodass sie schmaler werden, wenn das Browserfenster schmaler wird. Eine Lücke von 20 Pixeln zwischen den beiden Spalten einfügen. - Die Fotos sollten als zweispaltiges Raster mit gleich großen Spalten und einem Abstand von 5 Pixeln zwischen den Bildern angezeigt werden.
Hinweise und Tipps
- Sie müssen das HTML nicht bearbeiten, um diese Herausforderung abzuschließen.
- Es gibt einige Wege, um einige der Aufgaben aus der Projektanleitung zu erreichen, und oft gibt es keinen einzigen richtigen oder falschen Weg. Versuchen Sie verschiedene Ansätze und sehen Sie, was am besten funktioniert. Machen Sie sich Notizen, während Sie experimentieren.
Beispiel
Der folgende Screenshot zeigt ein Beispiel dafür, wie das fertige Layout des Designs aussehen sollte:
Klicken Sie hier, um eine mögliche Lösung anzuzeigen
Das fertige CSS sieht folgendermaßen aus:
css
* {
box-sizing: border-box;
}
body {
background-color: white;
color: #333333;
margin: 0;
font: 1.2em / 1.6 sans-serif;
}
img {
max-width: 100%;
display: block;
border: 1px solid black;
}
.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
max-width: 980px;
}
.grid {
margin: 0 auto;
max-width: 980px;
/* Solution: Display <article> and <aside> as two flexible
columns, with <article> three times the width of <aside>,
and a 20px gap */
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
}
nav {
background-color: black;
padding: 0.5em;
/* Solution: Make navigation bar scroll with content normally but
then stick to top of viewport */
top: 0;
position: sticky;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
/* Solution: Display the navigation items in a row with equal space
in between and less space at the ends */
display: flex;
justify-content: space-around;
}
nav a {
color: white;
text-decoration: none;
padding: 0.5em 1em;
}
.photos {
list-style: none;
margin: 0;
padding: 0;
/* Solution: Display photos in two-column grid with equal columns
and a 5px gap */
display: grid;
gap: 5px;
grid-template-columns: 1fr 1fr;
}
.feature {
width: 200px;
/* Solution: Wrap text around the "feature" image to the right and bottom,
with suitable space between image and text */
float: left;
margin: 8px 30px 20px 0;
}