Was ist ein Doppelflügel-Layout? Teilen Sie einen Beispielcode für das Layout eines doppelten Nurflüglers-HTML-Tutorial-php.cn

Was ist ein Doppelflügel-Layout? Teilen Sie einen Beispielcode für das Layout eines doppelten Nurflüglers

零下一度

Freigeben： 2017-05-11 15:33:52

Original

1710 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;}

Nach dem Login kopieren

[Verwandte Empfehlungen]

1. Kostenloses HTML-Online-Video-Tutorial

2. HTML-Entwicklungshandbuch

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!