Heim > Artikel > Web-Frontend > Was ist ein Doppelflügel-Layout? Teilen Sie einen Beispielcode für das Layout eines doppelten Nurflüglers
Was ist ein Doppelflügel-Layout? Teilen Sie einen Beispielcode für das Layout eines doppelten Nurflüglers
- 零下一度Original
- 2017-05-11 15:33:521670Durchsuche
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!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielcode für einen Intra-Page-Sprung (Ankerübung)Nächster Artikel：Beispielcode für einen Intra-Page-Sprung (Ankerübung)