Web-Frontend
CSS-Tutorial
Zentrieren Sie das Layout_zentrieren Sie das Hintergrundbild_zentrieren Sie den Textinhalt in DIV+CSS
Zentrieren Sie das Layout_zentrieren Sie das Hintergrundbild_zentrieren Sie den Textinhalt in DIV+CSS
1. Führen Sie zunächst die Verwendung von CSS-Attributen ein, um das Gesamtlayout zu zentrieren:
Legen Sie hier den übergeordneten Inhalt des Objekts fest, das zentriert werden soll. Wir können uns vorstellen, dass der Inhalt der gesamten Seite aus und
body{text-aligh:center }. Aber auch das wird zu Problemen führen, da Sie die Breite des Layouts nicht festgelegt haben .“, sobald Sie das Float:-Attribut im äußersten CSS-Steuerelement in Ihrem Inhaltslayout festlegen, neigt sich das Layout in die von Ihnen festgelegte Float:-Richtung. Die Lösung besteht darin, das zentrierte CSS-Attribut des Körpers festzulegen Das Layoutobjekt ist auf die Mitte eingestellt und die Breite kann definiert werden. Wenn die Breite der Webseite 700 Pixel beträgt und der äußerste CSS-Stil class="weicheng" ist, sollte die Einstellung wie folgt lauten: ".weicheng{margin:0 auto ; width:700px;} " Das ist es. Dieses Element ist unter IE nützlich. Nach dem Testen kann unter Browsern wie Firefox nur das Festlegen von text-aligh:center; zusätzlich zum übergeordneten Element (Body) das Layout nicht zentrieren. Dann können wir auch Es muss ein „ „margin:0 auto; „Was bedeutet das? Es bedeutet, dass der Abstand zwischen Ober- und Unterseite des Inhalts 0 beträgt und der Abstand zwischen links und rechts automatisch „automatisch“ ist, sodass Sie die Webseite festlegen können Das Layout soll zentriert sein (margin:5px auto hier einstellen; derselbe Effekt hat keinen Einfluss auf das Experiment). Das vollständige Beispiel ist (Sie können den Code kopieren, um eine neue HTML-Datei zu erstellen, um den Effekt anzuzeigen):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.divcss5.com的CSS div的布局居中实例</title>
<style type="text/css">
<!--
body{ text-align:center; }
.waicheng {color: #0066CC; margin:5px auto; width:700px;
height:200px; border:1px solid #000000;}
-->
</style>
</head>
<body>
<div class="waicheng">我是css中的居中的实验;我的布局外层有一个边为1px黑色边，
我宽700px，高为200px,设置了与顶部内容距离为5PX</div>
</body>
</html>CSS-Layout-Zentrierungsbeispielansicht
2. Einführung in die Verwendung von CSS-Attributen um den Hintergrund der Webseite zu zentrieren:
Zentrierung umfasst hier die linke und rechte Zentrierung sowie die obere und untere Zentrierung. Der Zentrierungscode lautet wie folgt:
body{BACKGROUND: #FFF url(http://www.divcss5 .com/img/css-logo.gif) no-repeat center; } // Die Bedeutung dieser Passage besteht darin, den Hintergrund des css-logo.gif-Bildes auf nicht wiederholbar (no-repeat) festzulegen Zentrieren Sie es (Mitte). Die Zentrierung erfolgt links und rechts, und die vertikale Einstellung muss nicht festgelegt werden, sie wird automatisch zentriert.
3. Anleitung zum Zentrieren des Einleitungstexts und des Bildinhalts links, rechts, oben und unten in CSS:
Wir wissen, dass es einfach ist, links und rechts zu zentrieren und einfach Text zu verwenden. align:center; um den Text und den Bildinhalt zu zentrieren, aber wenn wir das Bild vertikal auf eine Höhe von 120 Pixel zentrieren, ist die Bildzentrierung das CSS-Attribut „vertikal-align:middle“, und die Textzentrierung erfordert das Festlegen der Zeilenhöhe Methode zum Zentrieren des Textinhalts. Hier legen wir die Höhe auf 120 Pixel fest. Zeilenhöhe: 120 Pixel. Auf diese Weise können Text und Bild über CSS-Attributstile nach oben, unten, links und rechts zentriert werden.
Der Code zur Zentrierung der gesamten Website lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.divcss5.com的CSS div的完整居中实例</title>
<style type="text/css">
<!--
body{ text-align:center; margin:0 auto;
background:url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;}
.waicheng {color: #0066CC; margin:5px auto;
width:700px; height:120px; line-height:120px; border:1px solid #000000; }
.waicheng img {vertical-align:middle;}
-->
</style>
</head>
<body>
<div class="waicheng">我是css中的居中的完整居中实例;
我的布局外层有一个边为1px
<img src="http://www.divcss5.com/img/css-logo.gif" alt="图片内容居中" /></div>
</body>
</html>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Wie verwenden Sie CSS, um Texteffekte wie Textschatten und Gradienten zu erstellen?
Mar 14, 2025 am 11:10 AM
In dem Artikel werden CSS für Texteffekte wie Schatten und Gradienten verwendet, diese für die Leistung optimiert und die Benutzererfahrung verbessert. Es listet auch Ressourcen für Anfänger auf (159 Zeichen)
Was zum Teufel haben NPM -Befehle?
Mar 15, 2025 am 11:36 AM
NPM-Befehle führen verschiedene Aufgaben für Sie aus, entweder als einmalige oder als kontinuierlich ausgeführter Vorgang für Dinge wie das Starten eines Servers oder das Kompilieren von Code.
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen
Mar 24, 2025 am 10:37 AM
Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und
