suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So korrigieren Sie Ränder

<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>
P粉893457026P粉893457026455 Tage vor541

Antworte allen(1)Ich werde antworten

  • P粉155551728

    P粉1555517282023-09-06 00:39:04

    这就是你想要的吗？我已将 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>

    Antwort
    0
  • StornierenAntwort