Ini ialah poster gol
Ini poster saya
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.
TODO: Buat tapak web siaran inspirasi. Gayakannya mengikut apa yang anda mahukan. Lihat imej sasaran untuk inspirasi. Tetapi ia mesti mempunyai ciri-ciri berikut:
- Teks h1 utama hendaklah menggunakan fon Regular Libre Baskerville daripada Google Font: https://fonts.google.com/specimen/Libre+Baskerville
- Teks hendaklah berwarna putih dan latar belakang hitam.
- Tambahkan imej anda sendiri pada folder imej dalam aset. Ia sepatutnya mempunyai sempadan putih 5 piksel.
- Teks hendaklah ditengahkan.
- 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.
- Baca sifat transformasi teks pada dokumentasi MDN untuk h1 huruf besar menggunakan CSS.https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
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%; } 
jom!!!
kami melakukannya
图片在最小化时应居中（占据屏幕的一半），看起来不错，但在充满时，充满时。 lt;/p>
我才刚刚开始学习，所以我只知道 html 和 CSS 的最基本的*
![[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; }