recherche

Maison  >  Article  >  interface Web  >  div définir html

div définir html

PHPz
PHPzoriginal
2023-05-21 17:47:07757parcourir

Dans le développement front-end, nous devons souvent utiliser HTML pour créer la structure des pages Web, tandis que CSS est utilisé pour embellir et styliser les pages Web. En CSS, l'utilisation de balises div est un moyen très courant de diviser les éléments d'une page Web en différents blocs pour faciliter la définition du style et la mise en page. Cet article explique comment utiliser les balises div pour définir la structure et le style des pages Web en HTML.

1. Qu'est-ce qu'une balise div ?

La balise div est une balise conteneur en HTML qui peut être utilisée pour diviser d'autres éléments HTML en différents blocs. Ces blocs peuvent avoir différents styles et mises en page, comme l'en-tête de la page Web, la barre de navigation, la zone de contenu principale, la barre latérale, etc. Par rapport aux autres balises HTML, la balise div n'a pas de sémantique spécifique. Il s'agit d'une balise conteneur générale.

2. Utilisez les balises div pour configurer la structure de la page Web

L'utilisation des balises div en HTML est très simple. Il vous suffit d'ajouter une balise dc6dce4a544fdca2df29d5ac0ea9906b Par exemple, dans une page Web, nous devrons peut-être séparer la zone d'en-tête de la page et la zone de contenu. Cela peut être exprimé comme ceci : 

<!DOCTYPE html>
<html>
<head>
    <title>使用div标签设置网页结构</title>
    <style>
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        .content {
            margin: 0 auto;
            width: 80%;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>
        <header>
            <h1>这是网页的头部</h1>
        </header>
        <div class="content">
            <p>这是网页的内容区域。</p>
        </div>
    </div>
</body>
</html>

Dans le code ci-dessus, nous utilisons une couche externe dc6dce4a544fdca2df29d5ac0ea9906b pour envelopper les éléments 1aa9e5d373740b65a0cc8f0a02150c53 et .content, les divisant ainsi en deux blocs différents. La balise 1aa9e5d373740b65a0cc8f0a02150c53 représente la zone d'en-tête et .content représente la zone de contenu. Dans les styles CSS, nous implémentons des paramètres de style pour différents blocs en ciblant différents noms de classe.

3. Utilisez les balises div pour la mise en page des pages Web

En plus de la division structurelle, les balises div peuvent également être utilisées pour implémenter la mise en page des pages Web. Par exemple, nous pouvons réaliser la mise en page globale de la page Web en définissant les styles des différents div. Plus précisément, il existe deux méthodes de mise en page courantes :

(1) Disposition du modèle de boîte

La disposition du modèle de boîte traite différentes zones de la page Web comme des boîtes différentes, en définissant la largeur, la hauteur, la marge et d'autres propriétés de la boîte. mise en page. Par exemple, nous définissons une zone d'en-tête et une zone de contenu dans la page Web : 

<!DOCTYPE html>
<html>
<head>
    <title>使用div标签进行网页布局</title>
    <style>
        .header {
            height: 100px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }

        .content {
            margin: 0 auto;
            width: 80%;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="header">这是网页的头部</div>
    <div class="content">
        <h2>这是网页的内容区域。</h2>
        <p>在这里填写网页内容……</p>
    </div>
</body>
</html>

Dans le code ci-dessus, nous définissons les styles de deux classes : .header et .content correspond à la zone d'en-tête, et .content. correspond à la zone de contenu . Parmi eux, la hauteur du .header est de 100 pixels et des attributs tels que la couleur d'arrière-plan, le centrage et le style du texte sont définis. La largeur du .content est de 80 %, alignée au centre et le remplissage est défini. Avec ce paramètre, nous pouvons implémenter une mise en page simple.

(2) Disposition en grille

En plus de la disposition du modèle de boîte, vous pouvez également utiliser la disposition en grille CSS pour implémenter la disposition des pages Web. La disposition en grille divise toute la zone de la page Web en plusieurs grilles. Nous pouvons placer différents éléments dans différentes grilles pour obtenir une disposition globale.

Par exemple, nous pouvons configurer une mise en page de page Web avec un en-tête, une barre de navigation et une zone de contenu comme ceci : 

<!DOCTYPE html>
<html>
<head>
    <title>使用div标签进行网页布局</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 200px auto;
            grid-template-rows: 100px auto;
            grid-template-areas:
                "header header"
                "nav content";
            grid-gap: 10px;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            background-color: #f6f6f6;
        }

        .header {
            grid-area: header;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }

        .nav {
            grid-area: nav;
            background-color: #777;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        .content {
            grid-area: content;
            padding: 20px;
            background-color: #fff;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">这是头部</div>
        <div class="nav">这是导航栏</div>
        <div class="content">这是内容区域</div>
    </div>
</body>
</html>

Dans le code ci-dessus, nous utilisons la disposition en grille pour obtenir la mise en page globale de la page Web. La classe .container définit une disposition en grille pour l'ensemble de la page Web, qui est divisée en deux colonnes et deux lignes. La taille de chaque grille est automatiquement calculée. Dans le même temps, nous définissons également une position de grille spécifique pour chaque bloc, qui est définie via l'attribut grid-area. Grâce à une mise en page aussi détaillée, nous pouvons obtenir une page Web avec un en-tête, une barre de navigation et une zone de contenu.

Résumé

La balise div est une balise de conteneur générale utilisée pour diviser les blocs en HTML. En utilisant des balises div, nous pouvons implémenter rapidement et facilement la configuration et la mise en page des pages Web. Dans les styles CSS, nous pouvons définir les styles de différents blocs via différents noms de classe et obtenir la disposition globale via une disposition de modèle de boîte ou une disposition de grille. Maîtriser les compétences d'utilisation des balises div pour le développement Web peut nous aider à réaliser le travail de développement Web plus efficacement.

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：problème HTML tronquéArticle suivant：problème HTML tronqué

Articles Liés

Voir plus