简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment corriger les marges
P粉893457026
P粉893457026 2023-09-05 12:35:23
0
1
455
<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>
P粉893457026
P粉893457026

répondre à tous(1)
P粉155551728
P粉1555517282023-09-06 00:39:04 1 plancher

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>

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！