Bagaimana untuk membetulkan margin
P粉893457026
2023-09-05 12:35:23
<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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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>