首頁 > 開發者 > JavaScript
雙飛翼布局（練習），飛翼布局練習
<!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>
<div class="bigbox">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<br />
<div class="four"><p>我是一隻小小鳥，我要飛的很高很高，那是我一隻以來的夢想，我堅持著，永不放棄。雖然有時候會摔得很慘，但是我不怕，總有一天我會展翅高飛的</p></div>
</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;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
