Beispiel:CSS-mehrspaltige Layouts-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <style>
.media {
list-style-type: none; max-width: 30em;
}
.media li {
display: grid; grid-template-columns: 7em 1fr; grid-template-rows: 2em 3em; gap: 1em;
margin-bottom: 1em; }
.media li>img {
grid-row: 1 / 3; width: 6em;
}
.media h3 {
font: bold 1.2em/1.5 Helvetica, Verdana, sans-serif;
margin-top: 0; }
.media p {
font: 100 0.75em/1.5 Georgia, Times New Roman, serif;
margin: 0; }
li:hover {
background: #F1F3F4; cursor: pointer;
}
</style> <title>Media-Objekt</title>
</head> <body>
Inhaltsverzeichnis
Media-Objekt im Grid Layout
-
<img src="https://wiki.selfhtml.org/images/f/f1/Fr%C3%BChling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
Frühling
Endlich wird es wieder ein bisschen sonniger und wärmer. Wer jetzt spazieren geht, sieht schon die ersten grünen Knospen sprießen.
<footer> optionaler Footer </footer> -
<img src="https://wiki.selfhtml.org/images/8/8f/Sommer.png" alt="Sonnenuntergang am Strand, Quelle Wikipedia">
Sommer
Abends bleibt es länger hell und man kann draußen sitzen und die Abkühlung von der Tageshitze genießen.
-
<img src="https://wiki.selfhtml.org/images/5/59/Herbst.png" alt="Bild eines Ahorns im Herbst, Quelle Wikipedia">
Herbst
Hier kommt noch Text hin. ein ganzer Satz oder vielleicht auch mehr. In die zweite Zeile könnte auch noch etwas.
-
<img src="https://wiki.selfhtml.org/images/a/a7/Winter.png" alt="Schneelandschaft, Quelle Wikipedia">
Winter
Hier kommt noch Text hin. ein ganzer Satz oder vielleicht auch mehr. In die zweite Zeile könnte auch noch etwas.
</body> </html>
