当前位置:Gxlcms > html代码 > 什么是双飞翼布局?分享一个双飞翼布局的实例代码

什么是双飞翼布局?分享一个双飞翼布局的实例代码

时间:2021-07-01 10:21:17 帮助过:20人阅读

什么是双飞翼布局?分享一个双飞翼布局的实例代码,还是挺好用的,感兴趣的朋友们来看一下

代码如下:

<!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预处理器代码:

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

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上就是什么是双飞翼布局?分享一个双飞翼布局的实例代码的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行