Maison > Article > interface Web > Comment écrire un divcss

Comment écrire un divcss

PHPzoriginal: 2023-05-21 11:38:08555parcourir

Div (Division) et CSS (Cascading Style Sheets) sont deux éléments très importants dans la conception Web. Ils nous permettent de mieux mettre en page et styliser les pages Web. Dans cet article, nous verrons comment écrire une mise en page div en utilisant CSS.

En CSS, nous pouvons utiliser des balises div pour définir différentes zones de la page. Ces zones peuvent contenir des éléments tels que du texte, des images, des tableaux, des vidéos, etc. À l'aide de balises div, nous pouvons définir la mise en page et le style de la page, la rendant plus belle et plus professionnelle.

Ce qui suit est le code d'une simple page HTML, qui contient trois balises div :

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        .container {
            width: 90%;
            margin: 0 auto;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
        }

        .header {
            background-color: #eee;
            text-align: center;
            padding: 20px;
        }

        .footer {
            background-color: #eee;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>欢迎来到我的网页！</h1>
        </div>
        <div class="content">
            <p>这是我的第一个网页，希望大家喜欢！</p>
        </div>
        <div class="footer">
            <p>版权所有 &copy; 2021</p>
        </div>
    </div>
</body>
</html>

Dans cet exemple, nous avons trois balises div :

container : Cette balise contient la page entière et définit certains styles de base tels que largeur de page, couleur d'arrière-plan et bordures.
header : Cette balise contient le titre de la page et définit certains styles, tels que la couleur d'arrière-plan, le centrage du texte et le remplissage.
pied de page : cette balise contient des informations sur les droits d'auteur et définit certains styles, tels que la couleur d'arrière-plan, le centrage et le remplissage du texte.

Nous utilisons CSS pour définir le style de ces balises div. Dans l'exemple ci-dessus, nous utilisons un sélecteur de classe pour sélectionner chaque div et définir les styles individuellement.

Dans la classe .container, nous définissons la largeur de la page Web à 90 % et la centrons. Nous définissons également la couleur d’arrière-plan, la couleur de la bordure et le remplissage. Cela rend la page entière plus propre et plus facile à lire.

Dans la classe .header, nous définissons la couleur d'arrière-plan, le centrage du texte et le remplissage de l'en-tête. Cela rend le titre plus facile à lire et cliquer sur le titre vous ramène en haut de la page.

Dans la classe .footer, nous définissons également la couleur d'arrière-plan, le centrage et le remplissage du texte. Cela rend les informations sur les droits d'auteur plus faciles à lire et peuvent être trouvées au bas de la page.

En plus de l'exemple ci-dessus, nous pouvons également utiliser différents sélecteurs CSS tels que le sélecteur de position et le sélecteur d'identifiant pour sélectionner et définir le style des balises div. Par exemple, nous pouvons utiliser le code suivant pour positionner deux balises div sur les côtés gauche et droit de la page :

<style>
    .left {
        float: left;
        width: 50%;
        background-color: #eee;
        padding: 20px;
    }

    .right {
        float: right;
        width: 50%;
        background-color: #eee;
        padding: 20px;
    }
</style>

<div class="left">
    <p>这个div位于页面的左侧。</p>
</div>
<div class="right">
    <p>这个div位于页面的右侧。</p>
</div>

Dans cet exemple, nous avons utilisé le sélecteur de position (float) et l'attribut width pour positionner les divs gauche et droit. Les divs latéraux sont placés des deux côtés de la page. Nous définissons également la couleur d'arrière-plan et le remplissage de chaque balise div.

Enfin, il y a quelques bonnes pratiques auxquelles nous devons prêter attention lors de l'utilisation de divs et CSS :

Utilisez le moins possible les balises div. Utiliser trop de balises div rendra le code encombré et difficile à maintenir.
Utilisez des balises sémantiques au lieu des balises div. Les balises sémantiques incluent l'en-tête, la navigation, la section, l'article, l'aparté, le pied de page, etc. Leur but est de définir clairement la structure et le contenu de la page.
Attribuez toujours une classe ou un identifiant aux balises div afin de les styliser.
N’utilisez pas trop de balises !important en CSS, cela encombrerait le code et rendrait sa maintenance difficile.
Suivez toujours les meilleures pratiques CSS telles que le regroupement de styles associés, l'utilisation de sélecteurs imbriqués, etc. Cela rend le code plus propre et plus facile à lire et à comprendre.

Dans cet article, nous avons expliqué comment écrire une mise en page div en utilisant CSS. Nous avons examiné comment sélectionner et styliser les balises div à l'aide de sélecteurs CSS tels que les sélecteurs de classe, les sélecteurs de position et les sélecteurs d'identifiant, ainsi que quelques bonnes pratiques. Avec ces connaissances, vous pouvez utiliser les balises div et CSS pour créer des pages Web meilleures, plus belles et plus professionnelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：javascript void ne peut pas ouvrir la page WebArticle suivant：javascript void ne peut pas ouvrir la page Web

Articles Liés

Voir plus