Heim >Web-Frontend >CSS-Tutorial >Was ist flüssiges Layout in CSS?
Was ist flüssiges Layout in CSS?
- 王林Original
- 2020-11-13 13:44:372585Durchsuche
Flüssiges Layout in CSS bedeutet, dass sich das Webseitenlayout beim Verkleinern oder Vergrößern der Webseite mit der Größe des Browsers ändert. Der Vorteil eines flüssigen Layouts besteht darin, dass die Seite verkleinert wird, damit sie in das Fenster passt, wenn das Fenster des Benutzers klein ist, ohne dass seitwärts gescrollt werden muss.
Flüssiges Layout:
Einfach ausgedrückt ändert sich das Layout der Webseite mit der Größe des Browsers, wenn die Webseite verkleinert und vergrößert wird!
(Lernvideo-Sharing: CSS-Video-Tutorial)
Vorteile:
Die Seite erstreckt sich über das gesamte Browserfenster, sodass selbst auf einem großen Bildschirm kein leerer Raum um die Seite herum vorhanden ist Wenn das Fenster klein ist, wird die Seite verkleinert, sodass sie in das Fenster passt, ohne dass horizontal gescrollt werden muss.
Selbst wenn die vom Benutzer festgelegte Schriftart größer ist als die Voreinstellung des Designers, kann sich dieses Design anpassen (da die Seite gedehnt werden kann).
Nachteile:
Wenn die Breite jedes Teils der Seite nicht kontrolliert wird, weicht das Seitendesign stark vom erwarteten Effekt ab. Beispielsweise werden einige Elemente oder Elemente zusammengedrückt und es entstehen unerwartete Lücken um sie herum
Wenn sich ein Element mit fester Breite in einer Box befindet, die es nicht aufnehmen kann, läuft das Element über die Box hinaus.
Beispiel:
Der folgende Code zeigt ein flüssiges Layout. Die Schlüsseltechnologie besteht darin, die Breiteneinheit als Prozentsatz festzulegen.
<!DOCTYPE html>
<html>
<head>
<title>Liquid Layout</title>
<style type="text/css">
* {
color: #fff;
text-align: center;}
body {
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;}
#nav, #feature, #footer {
margin: 1%;}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;}
.column3 {
margin-right: 0%;}
li {
display: inline;
padding: 0.5em;}
#nav, #footer {
padding: 0.5em 0;}
#feature, .article {
color:#fff;
height: 10em;
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1 style="color:#706fd3">软件开发，成就梦想</h1>
<h2><a href="https://www.liyongzhen.com/" style="color:#000">学编程，上利永贞网</a></h2>
<div id="header">
<h1>Logo</h1>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">产品</a></li>
<li><a href="">服务</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>功能</p>
</div>
<div class="article column1">
<p>第一列</p>
</div>
<div class="article column2">
<p>第二列</p>
</div>
<div class="article column3">
<p>第三列</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2019</p>
</div>
</body>
</html>Verwandte Empfehlungen:
CSS-TutorialDas obige ist der detaillierte Inhalt vonWas ist flüssiges Layout in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!