cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk membetulkan margin

<p><strong>Ini ialah poster gol</strong></p> <p><strong>Ini poster saya</strong></p> <p>Bolehkah anda membaca kod saya dan beritahu saya apa yang saya lakukan salah/jika ada cara yang lebih mudah Projek ini adalah untuk mencipta laman web poster motivasi. </p> <blockquote> <p>TODO: Buat tapak web siaran inspirasi. Gayakannya mengikut apa yang anda mahukan. Lihat imej sasaran untuk inspirasi. Tetapi ia mesti mempunyai ciri-ciri berikut: </p> <ol> <li>Teks h1 utama hendaklah menggunakan fon Regular Libre Baskerville daripada Google Font: https://fonts.google.com/specimen/Libre+Baskerville</li> <li>Teks hendaklah berwarna putih dan latar belakang hitam. </li> <li>Tambahkan imej anda sendiri pada folder imej dalam aset. Ia sepatutnya mempunyai sempadan putih 5 piksel. </li> <li>Teks hendaklah ditengahkan. </li> <li>Buat div untuk mengandungi elemen h1, p dan imej. Laraskan jidar supaya imej dan teks berpusat pada halaman. Petua: Pusatkan div secara mendatar dengan menetapkan lebarnya kepada 50% dan jidar kirinya kepada 25%. Petua: Tetapkan lebar imej kepada 100% untuk mengisi div. </li> <li>Baca sifat transformasi teks pada dokumentasi MDN untuk h1 huruf besar menggunakan CSS.https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform</li> </ol> </blockquote> <p> <pre class="brush:css;toolbar:false;">h1 { warna: putih; font-family: 'Libre Baskerville', kursif; } p { warna: putih } badan { latar belakang: hitam; } #teks { text-transform: huruf besar; } #box1 { sempadan: 5px pepejal; text-align: tengah; warna: putih; lebar: 450px; ketinggian: 500px; padding-top: 50px; } div { lebar: 50%; ketinggian: 100%; margin-kiri: 25%; margin atas: 25%; }</pre> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <kepala> <link rel="stylesheet" href="style.css" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <pautan href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet" /> </head> <badan> <div id="box1"> <!-- <img src="max-harlynking-UdCNVHNgHdI-unsplash.jpg" alt="" width="100%" height="50%" /> --> <img src="https://picsum.photos/640/480" alt="" lebar="100%" tinggi="50%" /> <h1 id="texts">jom!!!</h1> <p id="texts">kami melakukannya</p> </div> </badan> </html></pre> </p> <p>图片在最小化时应居中（占据屏幕的一半），看起来不错，但在充满时，充满时。 lt;/p> <p><em>我才刚刚开始学习，所以我只知道 html 和 CSS 的最基本的</em>*</p>
P粉893457026P粉893457026456 hari yang lalu543

membalas semua(1)saya akan balas

  • P粉155551728

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

    Adakah ini yang anda mahukan? Saya dah tambah text-align: center; 添加到 #texts 以使两个文本元素居中。我已将父级

    添加到 #box1 并添加 display: flex; justify-content: center; 所以基本上我已经使用 Flexbox 水平居中 #box1 . Nampak seperti apa yang anda mahukan. 

    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>

    balas
    0
  • Batalbalas