Home > Developer > JavaScript
Dual-flying wing layout (exercises) and flying wing layout exercises
<! 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 ;}
/* # Sourcemappingurl1_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> I am a ghost bird. I want to fly very high. It is my dream. I stick to it and never give up. Although sometimes it will be miserable, I am not afraid. One day I will fly high. </p> </div>
</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: $;
@ 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
