什麼是雙飛翼佈局？分享一個雙飛翼佈局的實例代碼
- 零下一度原創
- 2017-05-11 15:33:521614瀏覽
什麼是雙飛翼佈局？分享一個雙飛翼佈局的實例程式碼，還是挺好用的，有興趣的朋友們來看看
程式碼如下：
<!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開發手冊
#以上是什麼是雙飛翼佈局？分享一個雙飛翼佈局的實例代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：頁內跳轉（錨點練習）的實例代碼下一篇：頁內跳轉（錨點練習）的實例代碼