So erstellen Sie ein flüssiges Layout mit adaptiver Breite mithilfe negativer CSS-Ränder

In diesem Artikel wird hauptsächlich die Implementierungsmethode zur Verwendung eines CSS-Negativrandes zum Erstellen eines adaptiven Breiten-Fluid-Layouts vorgestellt. Jetzt kann ich es mit Ihnen teilen.

Der sinnvolle Einsatz der Negativ-Margin-Technologie kann uns dabei helfen, viele interessante Layouts zu erstellen, beispielsweise flüssige Layouts, die sich an die Breite des Browsers anpassen.

Für ausländische technische Dokumente zur Verwendung negativer Ränder zum Erstellen dieser Art von Layout war das früheste, das ich gesehen habe, Ryan Brills „Creating Liquid Layouts with Negative Margins“, das 2004 auf A List Apart veröffentlicht wurde (2004 – -! Eine kleine Anzahl von Menschen in China hat gerade erst begonnen, der WEB-Standardisierung Aufmerksamkeit zu schenken. Dieser Artikel kann auch als eine chinesische Erklärungsversion davon angesehen werden.

Mit dem Aufkommen und der Beliebtheit immer größerer Browser ist die Art und Weise, wie die Website-Oberfläche die Browsing-Anforderungen von Browserbenutzern mit unterschiedlichen Auflösungen erfüllen kann, nach und nach zu einem Problem geworden, mit dem sich Front-End-Entwicklungsingenieure auseinandersetzen müssen. Derzeit wurden viele inländische Portale überarbeitet und haben die aktuelle Mainstream-Breite von etwa 960 Pixel übernommen.

Ich denke, dass es für weniger komplexe Websites eine gute Idee ist, Prozentsätze für die Architektur zu verwenden. Es gibt immer noch viele Anwendungen für adaptives Layout, z. B. Forenseiten, Blogseiten usw. In der Vergangenheit haben wir für diese Art von Architektur Tabellen verwendet. Es ist jedoch tatsächlich möglich, mit sehr kleinen Techniken ein adaptives Layout zu erstellen, das der WEB-Standardisierung entspricht.

Hier ist nur ein wichtiger technischer Punkt erforderlich: negative Margen.

【Einfaches Layout】

OK. Fangen wir jetzt an. Angenommen, Sie müssen jetzt den Frontdesk für Ihren Blog neu erstellen. Das Interface-Design ist abgeschlossen, aber die Codestruktur fehlt. Wir hoffen, dass die Blog-Oberfläche dies kann: Der Hauptteil auf der linken Seite ist der Inhalt des Blog-Beitrags, der sich an die Breite des Browsers unter verschiedenen Auflösungen anpassen muss, und auf der rechten Seite befindet sich die Seitenleiste, die wir fixieren möchten 250px Breite, das erwartete Rendering ist wie folgt:

Dies ist ein typisches zweispaltiges Layout, erstellen wir eine vorläufige Struktur

Zitat:

<p id=”header”>顶部区域</p>
<p id=”mainer”>
<h1>使用负边距创建自适应宽度的流体布局</h1>
<p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
</p>
<p id=”sideBar”>
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</p>
<p id=”footer”>底部区域</p>

Ansicht

Testseite 1, dies ist der Anzeigeeffekt der Seite ohne Stylesheet. Als nächstes fügen wir ein einfaches Stylesheet hinzu

Tipp: Sie können einen Teil des Codes ändern, bevor Sie ihn ausführen

Zitat:

body,p,h1,h2,ul {
margin:0;padding:0;
}
#header {
background-color: #A8A754;
}
#footer {
background-color: #A8A754;
clear: both;
}
#mainer {
width: 100%;
margin-right: -250px;
float: left;
}
#sideBar {
float: right;
width: 250px;
}

Definieren Sie den rechten Rand des Mainers auf -250 Pixel, sodass die Breite der Seitenleiste auf der rechten Seite geleert werden kann, um die Seitenleiste zu platzieren. Informationen zum Hinzufügen der Stylesheet-Seite finden Sie unter

Testseite 2. OK, jetzt sehen wir, dass der Inhaltsbereich auf der linken Seite den entsprechenden Platz für die Seitenleiste frei gemacht hat, sodass die Seitenleiste dort platziert ist, wo sie erscheinen soll.

Tipp: Sie können einen Teil des Codes ändern, bevor Sie

[Überlappende Teile entfernen] ausführen.

Zu diesem Zeitpunkt werden wir feststellen, dass der Text Der Inhalt auf der linken Seite überschneidet sich teilweise mit der Seitenleiste. Zu diesem Zeitpunkt benötigen wir eine weitere p-Ebene, um einen ausreichend großen rechten Rand für den linken Textteil festzulegen, damit dieser nicht mit der Seitenleiste überlappt. Und legen Sie unterschiedliche Hintergrundfarben für den linken Inhaltsteil und den Seitenleistenteil fest, um sie zu unterscheiden.

Zitat:

<p id=”mainer”>
<p id=”main”>
<h1>使用负边距创建自适应宽度的流体布局</h1>
<p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
</p>
</p>

CSS hinzugefügt

Zitat:

#sideBar {
color: #FFF;
background-color: #36361A;
}
#main {
margin-right: 250px;
background-color: #616030;
}

Anzeigen

Tipp: Sie können einen Teil des Codes ändern, bevor Sie

[Adaptive Höhe] ausführen.

Zu diesem Zeitpunkt haben wir ein weiteres Problem festgestellt: Wenn die Länge der linken Seite anhält zu verlängern, dann erscheint im unteren Teil der rechten Seitenleiste ein Leerzeichen. Wir hoffen, eine visuell adaptive gleiche Höhe der linken und rechten Spalte zu erreichen.

Hier können wir ein rechtsbündiges und vertikal wiederholtes hinteres statisches Bild für den äußeren Hauptbereich festlegen. Wir stellen die Breite des Bildes auf 250 Pixel ein, was der Breite der Seitenleiste entspricht.

Wir fügen

zum CSS-Teil hinzu:

#mainer {
background: url(bj1.jpg) repeat-y right bottom;
}

Meistens möchten wir nicht die gesamte Breite festlegen die Breite des Browsers. Manchmal legen wir einen Prozentsatz fest, der kleiner als die Bildschirmbreite ist. In diesem Fall können wir eine p-Ebene außerhalb des linken Inhalts und der rechten Seitenleiste hinzufügen und eine klare schwebende Ebene unter der Seitenleiste hinzufügen, um unser Ziel zu erreichen. Zu diesem Zeitpunkt wird unser XHTML so aussehen.

Zitat:

  <p id=”header”>顶部区域</p>
    <p id=”wrapper” class=”mid”>
    <p id=”mainer”>
    <p id=”main”>
    <h1>使用负边距创建自适应宽度的流体布局</h1>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    </p>
    </p>
    <p id=”sideBar”>
    <h2>最新文章</h2>
    <ul>
    <li>最新文章一</li>
    <li>最新文章二</li>
    <li>最新文章三</li>
    </ul>
    </p>
    <p class=”clear”></p>
    </p>
    <p id=”footer”>底部区域</p>

Entsprechendes CSS

Zitat:

#wrapper {width: 92%;}
.clearing {clear: both;}
.mid {margin:0 auto;}

Ansicht

Tipp: Sie können einen Teil des Codes vor der Ausführung ändern

Ryan Brill sagte in seinem Artikel, dass sowohl der äußere Wrapper als auch der innere Mainer einen Hintergrundhintergrund haben sollten, um einen Fehler im IE zu beheben. Aber ich habe hier nur den Hintergrund von Mainer P festgelegt und in IE6, IE7 und FF wurden keine Fehler gefunden. Möglicherweise bezieht er sich auf IE5.x, der hier ignoriert wird.

[Erweitertes, dreispaltiges Layout]

Nachdem wir die oben genannten Methoden gemeistert haben, werden wir feststellen, dass die Erstellung eines dreispaltigen Layouts auch sehr einfach ist! OK. Ändern wir das obige Beispiel. Wir benötigen ein dreispaltiges Layout mit fester Breite auf beiden Seiten und adaptiver Breite in der Mitte. Dazu muss nur ein wenig p hinzugefügt werden.

Zitat:

    <p id=”header” class=”mid”>顶部区域</p>
    <p id=”wrapper” class=”mid”>
    <p id=”mainer”>
    <p id=”main”>
    <p id=”leftBar”>
    <h2>栏目标题</h2>
    <ul>
    <li>文章标题</li>
    <li>文章标题</li>
    <li>文章标题</li>
    </ul>
    </p>
    <p id=”inmain”>
    <h1>使用负边距创建自适应宽度的流体布局</h1>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p>
    </p>
    </p>
    </p>
    <p id=”sideBar”>
    <h2>最新文章</h2>
    <ul>
    <li>最新文章一</li>
    <li>最新文章二</li>
    <li>最新文章三</li>
    </ul>
    </p>
    <p class=”clear”> </p>
    </p>
    <p id=”footer” class=”mid”>底部区域</p>

以及另外一个背景图片

CSS部分增加：

引用:

#main {
margin-right: 250px;
background: url(bj2.jpg) #616030 repeat-y left bottom;
}
#leftBar {
float: left;
width: 150px;
}
#inmain {
margin-left: 150px;
}

现在来看看我们的页面。 

提示：您可以先修改部分代码再运行

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何利用CSS实现标题文字过长部分显示省略号

如何使用css实现任意大小及任意方向和任意角度的箭头

关于css实现右侧固定宽度和左侧宽度的自适应方法

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein flüssiges Layout mit adaptiver Breite mithilfe negativer CSS-Ränder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!