Heim > Artikel > Web-Frontend > So verwenden Sie HTML und CSS, um ein zentriertes Layout mit fester Breite zu implementieren

So verwenden Sie HTML und CSS, um ein zentriertes Layout mit fester Breite zu implementieren

王林Original: 2023-10-20 19:12:18710Durchsuche

Im Webdesign ermöglicht ein zentriertes Layout mit fester Breite, dass die Seite auf Monitoren unterschiedlicher Größe einen einheitlichen Stil und ein einheitliches Layout beibehält. Dieses Layout kann mit HTML und CSS erreicht werden. In diesem Artikel wird anhand eines konkreten Beispiels gezeigt, wie mithilfe von HTML und CSS ein zentriertes Layout mit fester Breite implementiert wird.

Zuerst müssen wir eine HTML-Datei erstellen. Sie können einen beliebigen Texteditor wie Notepad++ verwenden, um eine neue HTML-Datei zu erstellen. Geben Sie den folgenden Inhalt in die Datei ein:

<!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>

Im obigen Code definieren wir ein div-Element namens „container“, das zum Umschließen des Inhalts der Seite verwendet wird. Im CSS legen wir für den Container eine Breite von 800 Pixel fest und setzen den Rand auf „0 auto“, was bedeutet, dass er horizontal auf der Seite zentriert wird. Wir haben dem Container auch einige Hintergrundfarben, Füll- und Schatteneffekte hinzugefügt, um die Ästhetik der Seite zu verbessern.

Schließlich verwenden wir h1 und zwei Absätze, um einige Inhalte anzuzeigen, die im Container angezeigt werden.

Speichern Sie die Datei als .html-Datei und doppelklicken Sie, um sie zu öffnen. Sie werden sehen, dass die Seite in einer festen Breite umbrochen und horizontal in der Mitte angezeigt wird. Die Hintergrundfarbe der Seite ist grau und die Hintergrundfarbe des Inhaltsbereichs ist weiß. Sowohl der Titel als auch der Text sind ebenfalls zentriert.

Anhand dieses Beispiels können wir sehen, wie man HTML und CSS verwendet, um ein zentriertes Layout mit fester Breite zu implementieren. Sie können dieses Beispiel an Ihr eigenes Projekt anpassen.

Ich hoffe, dieser Artikel ist hilfreich für Sie!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie HTML und CSS, um ein zentriertes Layout mit fester Breite zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html auto 内边距 margin

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML-Layout-Tipps: So verwenden Sie das Positionsattribut, um kaskadierende Elemente zu steuernNächster Artikel：HTML-Layout-Tipps: So verwenden Sie das Positionsattribut, um kaskadierende Elemente zu steuern

In Verbindung stehende Artikel

Mehr sehen