Home > Article > Web Front-end > What is a double flying wing layout? Share an example code of double flying wing layout
What is a double flying wing layout? Share an example code of double flying wing layout
- 零下一度Original
- 2017-05-11 15:33:521664browse
What is a double flying wing layout? Sharing an example code of double flying wing layout, it is quite easy to use. Friends who are interested can take a look at the
code as follows:
<!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 preprocessor code:
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;}[Related recommendations]
1. Free html online video tutorial
##3.php.cn original html5 video tutorial
The above is the detailed content of What is a double flying wing layout? Share an example code of double flying wing layout. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Example code for intra-page jump (anchor exercise)Next article：Example code for intra-page jump (anchor exercise)