Maison >interface Web >tutoriel HTML >Comment utiliser HTML et CSS pour implémenter une mise en page à largeur fixe et centrée

Comment utiliser HTML et CSS pour implémenter une mise en page à largeur fixe et centrée

王林original: 2023-10-20 19:12:18730parcourir

Dans la conception Web, une mise en page à largeur fixe et centrée permet à la page de conserver un style et une mise en page unifiés sur des moniteurs de différentes tailles. Cette mise en page peut être réalisée en utilisant HTML et CSS. Cet article donnera un exemple spécifique pour montrer comment utiliser HTML et CSS pour implémenter une mise en page à largeur fixe et centrée.

Tout d'abord, nous devons créer un fichier HTML. Vous pouvez utiliser n'importe quel éditeur de texte, tel que Notepad++, pour créer un nouveau fichier HTML. Entrez le contenu suivant dans le fichier :

<!DOCTYPE html>
<html>
<head>
  <title>定宽居中布局示例</title>
  <style>
    body {
      width: 100%;
      background-color: #f3f3f3;
      font-family: Arial, sans-serif;
    }

    .container {
      width: 800px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>这是一个定宽居中布局示例</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus ante ac dapibus interdum. Sed faucibus, erat eget laoreet consequat, metus mi tincidunt lorem, nec tincidunt ex magna at arcu. Sed consequat tincidunt ante vel laoreet. Pellentesque ultrices est non elit tincidunt, nec rutrum quam efficitur. Fusce euismod orci in laoreet semper. Donec gravida magna id erat maximus sollicitudin eget ac turpis. Nulla suscipit augue ac pretium tincidunt. Sed vestibulum, tellus vel molestie iaculis, est tellus consectetur nisi, id rutrum urna turpis vel ligula.</p>
    <p>Sed bibendum vehicula est, et pellentesque ex laoreet id. Cras ut ligula vitae mi tincidunt imperdiet vitae sit amet lorem. Morbi porta justo et lacinia elementum. Praesent eu dapibus neque. Ut mollis quis risus eget rutrum. Aliquam erat volutpat. Aliquam tristique ultrices vestibulum. Nulla facilisi.</p>
  </div>
</body>
</html>

Dans le code ci-dessus, nous définissons un élément div nommé conteneur, qui sera utilisé pour envelopper le contenu de la page. Dans le CSS, nous définissons une largeur de 800 pixels pour le conteneur et définissons la marge sur "0 auto", ce qui signifie qu'elle sera centrée horizontalement sur la page. Nous avons également ajouté des effets de couleur d'arrière-plan, de remplissage et d'ombre au conteneur pour augmenter l'esthétique de la page.

Enfin, nous utilisons h1 et deux paragraphes pour afficher du contenu qui sera affiché dans le conteneur.

Enregistrez le fichier en tant que fichier .html et double-cliquez pour l'ouvrir. Vous verrez que la page est enveloppée dans une largeur fixe et affichée horizontalement au centre. La couleur d'arrière-plan de la page est grise et la couleur d'arrière-plan de la zone de contenu est blanche. Le titre et le texte sont également centrés.

À travers cet exemple, nous pouvons voir comment utiliser HTML et CSS pour implémenter une mise en page à largeur fixe et centrée. Vous pouvez modifier cet exemple en fonction de votre propre projet.

J'espère que cet article vous sera utile !

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!

css html auto 内边距 margin

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：Conseils de mise en page HTML : Comment utiliser l'attribut position pour contrôler les éléments en cascadeArticle suivant：Conseils de mise en page HTML : Comment utiliser l'attribut position pour contrôler les éléments en cascade

Articles Liés

Voir plus