Maison >interface Web >tutoriel HTML >Qu'est-ce qu'une configuration à double aile volante ? Partagez un exemple de code de disposition à double aile volante
Qu'est-ce qu'une configuration à double aile volante ? Partagez un exemple de code de disposition à double aile volante
- 零下一度original
- 2017-05-11 15:33:521688parcourir
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>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;}[Recommandations associées]1.Tutoriel vidéo HTML en ligne gratuit
2.3.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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de code pour un saut intra-page (exercice d'ancrage)Article suivant：Exemple de code pour un saut intra-page (exercice d'ancrage)