Was ist ein Doppelflügler-Layout? Es ist sehr nützlich, einen Beispielcode für das Layout eines doppelten fliegenden Flügels zu teilen. Interessierte Freunde können sich den
-Code wie folgt ansehen:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; padding: 0; }
.bigbox .one { margin: 0 200px 0 300px; }
.bigbox .one { background: red; height: 500px; }.bigbox .two { background: blue; width: 300px; height: 500px; position: absolute; left: 0px; top: 0; }.bigbox .three { background: pink; width: 200px; height: 500px; position: absolute; right: 0; top: 0; }
p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.four { width: 600px; height: 10px; }
/*# sourceMappingURL=style.css.map */
</style></head><body> <p class="bigbox"> <p class="one"></p> <p class="two"></p> <p class="three"></p> </p>
<br />
<p class="four"><p>我是一只小小鸟，我要飞的很高很高，那是我一只以来的梦想，我坚持着，永不放弃。虽然有时候会摔得很惨，但是我不怕，总有一天我会展翅高飞的</p></p></body></html>scss-Präprozessorcode:
body{ margin:0; padding:0;}$a:red;$b:blue;$c:pink;
%m{ margin:0 200px 0 300px;}@mixin d($h:500px){ height:$h;}.bigbox{ .one {background:$a; @include d(); @extend %m; } .two{ background:$b; width:300px;
@include d(); position:absolute; left:0px; top:0; } .three{ background:$c; width:200px; @include d();
position:absolute; right:0; top:0; }}p{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}.four{
width:600px; height:10px;}[Verwandte Empfehlungen]
1. Kostenloses HTML-Online-Video-Tutorial
3. php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWas ist ein Doppelflügel-Layout? Teilen Sie einen Beispielcode für das Layout eines doppelten Nurflüglers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Welche Mobiltelefone unterstützt Hongmeng OS?
Verwendung des Befehls „net use'.
Was ist eine URL?
Tutorial zum Ausführen von C++-Code
Es gibt mehrere Möglichkeiten, die CSS-Position zu positionieren
Was soll ich tun, wenn sich mein Computer nicht einschalten lässt?
Bitcoin-Kauf- und -Verkaufsprozess auf Huobi.com
So verwenden Sie das HttpCanary-Paketerfassungstool
