Qu'est-ce qu'une configuration à double aile volante ? Partagez un exemple de code de disposition à double aile volante-tutoriel HTML-php.cn

Qu'est-ce qu'une configuration à double aile volante ? Partagez un exemple de code de disposition à double aile volante

零下一度

Libérer： 2017-05-11 15:33:52

original

1667 Les gens l'ont consulté

Qu'est-ce qu'une disposition à double aile ? En partageant un exemple de code de disposition à double aile volante, c'est très utile. Les amis intéressés peuvent jeter un œil au

code comme suit :

<!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>

Copier après la connexion

code du préprocesseur 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;}

Copier après la connexion

[Recommandations associées]

Tutoriel vidéo HTML en ligne gratuit

Manuel de développement HTML

Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!