So korrigieren Sie Ränder
P粉893457026
2023-09-05 12:35:23
<p><strong>Dies ist ein Torplakat</strong></p>
<p><strong>Das ist mein Poster</strong></p>
<p>Kannst du meinen Code lesen und mir sagen, was ich falsch mache/ob es einen einfacheren Weg gibt?
Das Projekt besteht darin, eine motivierende Poster-Website zu erstellen. </p>
<blockquote>
<p>TODO: Erstellen Sie eine Website mit inspirierenden Beiträgen.
Stylen Sie es, wie Sie möchten.
Schauen Sie sich die Zielbilder zur Inspiration an.
Es muss aber folgende Eigenschaften aufweisen: </p>
<ol>
<li>Der Haupttext in h1 sollte die Schriftart „Regular Libre Baskerville“ von Google Fonts verwenden:
https://fonts.google.com/specimen/Libre+Baskerville</li>
<li>Der Text sollte weiß und der Hintergrund schwarz sein. </li>
<li>Fügen Sie Ihre eigenen Bilder zum Bilderordner innerhalb der Assets hinzu. Es sollte einen weißen Rand von 5 Pixeln haben. </li>
<li>Der Text sollte zentriert sein. </li>
<li>Erstellen Sie ein Div, das die Elemente h1, p und image enthält. Passen Sie die Ränder so an, dass Bilder und Text auf der Seite zentriert sind.
Tipp: Zentrieren Sie das Div horizontal, indem Sie seine Breite auf 50 % und seinen linken Rand auf 25 % einstellen.
Tipp: Stellen Sie die Bildbreite auf 100 % ein, um das Div auszufüllen. </li>
<li>Lesen Sie die text-transform-Eigenschaft in der MDN-Dokumentation für h1 in Großbuchstaben mithilfe von CSS.https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform</li>
</ol>
</blockquote>
<p>
<pre class="brush:css;toolbar:false;">h1 {
Farbe weiß;
Schriftfamilie: „Libre Baskerville“, kursiv;
}
P {
Farbe weiß
}
Körper {
Hintergrund: schwarz;
}
#texte {
Texttransformation: Großbuchstaben;
}
#box1 {
Rand: 5 Pixel fest;
Textausrichtung: Mitte;
Farbe weiß;
Breite: 450px;
Höhe: 500px;
Polsterung oben: 50px;
}
div {
Breite: 50 %;
Höhe: 100 %;
Rand links: 25 %;
Margin-Top: 25 %;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<Kopf>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<Link
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
rel="stylesheet"
/>
</head>
<Körper>
<div id="box1">
<!-- <img src="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> -->
<img src="https://picsum.photos/640/480" alt="" width="100%" height="50%" />
<h1 id="texts">los geht's!!!</h1>
<p id="texts">wir haben es geschafft</p>
</div>
</body>
</html></pre>
</p>
<p> 。</p>
<p><em>我才刚刚开始学习, 所以我只知道 html 和 CSS 的最基本的</em>*</p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这就是你想要的吗？我已将 添加到
text-align: center;添加到#texts以使两个文本元素居中。我已将父级#box1并添加display: flex; justify-content: center;所以基本上我已经使用 Flexbox 水平居中#box1。看起来就像你想要的。h1 { color: white; font-family: "Libre Baskerville", cursive; } p { color: white; } body { background: black; } #texts { text-transform: uppercase; text-align: center; } #box1 { border: 5px solid; color: white; width: 450px; } .container { display: flex; justify-content: center; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet" /> </head> <body> <div class="container"> <div id="box1"> <!-- <img src="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> --> <img src="https://picsum.photos/640/480" alt="" width="100%" height="100%" /> </div> </div> <h1 id="texts">let's a go!!!</h1> <p id="texts">we did it</p> </body> </html>