Comment corriger les marges
P粉893457026
2023-09-05 12:35:23
<p><strong> Ceci est une affiche d'objectif</strong></p>
<p><strong> Ceci est mon affiche</strong></p>
<p>Pouvez-vous lire mon code et me dire ce que je fais de mal/s'il existe un moyen plus simple
Le projet est de créer un site Web d'affiches de motivation. </p>
<blockquote>
<p>TODO : Créez un site Web contenant des publications inspirantes.
Coiffez-le comme vous le souhaitez.
Regardez les images cibles pour vous inspirer.
Mais il doit avoir les caractéristiques suivantes : </p>
<ol>
<li>Le texte principal h1 doit utiliser la police Regular Libre Baskerville de Google Fonts :
https://fonts.google.com/specimen/Libre+Baskerville</li>
<li>Le texte doit être blanc et l’arrière-plan noir. ≪/li>
<li>Ajoutez vos propres images au dossier images dans les ressources. Il devrait avoir une bordure blanche de 5 pixels. ≪/li>
<li>Le texte doit être centré. ≪/li>
<li>Créez un div pour contenir les éléments h1, p et image. Ajustez les marges pour que les images et le texte soient centrés sur la page.
Astuce : Centrez le div horizontalement en définissant sa largeur à 50 % et sa marge gauche à 25 %.
Astuce : définissez la largeur de l'image sur 100 % pour remplir le div. ≪/li>
<li>Lisez la propriété text-transform dans la documentation MDN pour h1 majuscule à l'aide de CSS.https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform</li>
</ol>
</blockquote>
<p>
<pre class="brush:css;toolbar:false;">h1 {
Couleur blanche;
famille de polices : « Libre Baskerville », cursive ;
}
p{
Couleur blanche
}
corps {
fond : noir ;
}
#des textes {
transformation de texte : majuscule ;
}
#boîte1 {
bordure : 5 px solide ;
alignement du texte : centre ;
Couleur blanche;
largeur : 450 px ;
hauteur : 500 px ;
rembourrage supérieur : 50 px ;
}
div{
largeur : 50 % ;
hauteur : 100 % ;
marge gauche : 25 % ;
marge supérieure : 25 % ;
}</pré>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<tête>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<lien
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
rel="feuille de style"
/>
≪/tête>
<corps>
<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">c'est parti !!!</h1>
<p id="texts">nous l'avons fait</p>
</div>
</corps>
</html></pre>
</p>
<p> 。</p>
<p><em>
Tutoriels populaires
Plus>
Recommandations populaires
Derniers téléchargements
Plus>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Est-ce ce que tu veux ? J'ai ajouté 添加到
text-align: center;添加到#texts以使两个文本元素居中。我已将父级#box1并添加display: flex; justify-content: center;所以基本上我已经使用 Flexbox 水平居中#box1. Cela ressemble à ce que vous voulez.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>