Herausforderung: Fundamentales Layout-Verständnis
Diese Herausforderung wird Ihr Wissen über die bisher im Modul behandelten Layout-Funktionen testen, nämlich flexbox, floats, grid und positioning. Am Ende werden Sie ein Webseiten-Layout mit all diesen grundlegenden Werkzeugen entwickelt haben.
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 betrachten, um sicherzustellen, dass die Layout-Funktionen wie erwartet funktionieren.
-
Erstellen Sie einen neuen Ordner auf Ihrem Computer namens
layout-challenge. -
Erstellen Sie in diesem Ordner eine Datei namens
index.htmlund fügen Sie den 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 in dem Ordner eine Datei namens
style.cssund fügen Sie den 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 in dem Ordner einen Unterordner namens
imagesund speichern Sie die folgenden Bilddateien darin: -
Speichern Sie Ihre Dateien und laden Sie
index.htmlin einem Browser, um zu testen. Der Ausgangspunkt der Seite hat eine grundlegende Gestaltung, jedoch kein Layout und sollte in etwa so aussehen:
Projektbrief
Sie haben rohes HTML, grundlegendes CSS und Bilder erhalten — nun müssen Sie ein Layout für das Design erstellen.
Die Aufgaben, die Sie erreichen müssen, sind:
- Die Navigationspunkte in einer Reihe anzeigen, mit gleichem Abstand zwischen den Punkten und einem kleineren Abstand an beiden Enden der Reihe.
- Die Navigationsleiste so gestalten, dass sie sich bei normalen Scrollen mit dem Inhalt bewegt, aber dann am oberen Rand des Ansichtsfensters kleben bleibt, wenn sie diesen erreicht.
- Das "Feature"-Bild innerhalb des Artikels soll von Text rechts und unten umgeben sein, mit einem geeigneten Abstand zwischen dem Bild und dem Text.
- Die
articleundasideElemente als ein zweispaltiges Layout darstellen, wobei das erstere dreimal so breit wie das letztere ist. Die Spalten sollten eine flexible Größe haben, sodass sie schmaler werden, wenn das Browserfenster schmaler wird. Ein 20-Pixel-Abstand sollte zwischen den beiden Spalten vorhanden sein. - Die Fotos sollten als zweispaltiges Raster mit gleich großen Spalten und einem 5-Pixel-Abstand zwischen den Bildern angezeigt werden.
Hinweise und Tipps
- Sie müssen das HTML nicht bearbeiten, um diese Herausforderung abzuschließen.
- Es gibt einige Möglichkeiten, um einige der Aufgaben im Projektbrief zu erreichen, und es gibt oft nicht nur einen richtigen oder falschen Weg, Dinge zu tun. Probieren Sie einige verschiedene Ansätze aus und sehen Sie, was am besten funktioniert. Machen Sie sich Notizen, während Sie experimentieren.
Beispiel
Der folgende Screenshot zeigt ein Beispiel, wie das fertige Layout für das Design aussehen sollte:
Klicken Sie hier, um eine mögliche Lösung anzuzeigen
Das fertige CSS sieht so 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;
/* 4. Display <article> and <aside> as two flexible columns */
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
}
nav {
background-color: black;
padding: 0.5em;
/* 2. Make navigation bar stick to top of viewport */
top: 0;
position: sticky;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
/* 1. Lay out navigation items in a row with space
in between and 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;
/* 5. Display photos in two-column grid */
display: grid;
gap: 5px;
grid-template-columns: 1fr 1fr;
}
.feature {
width: 200px;
/* 3. Wrap text around feature image to the right and bottom */
float: left;
margin: 8px 30px 20px 0;
}