이중 비행 날개 레이아웃이란 무엇입니까? 이중 비행 날개 레이아웃의 예시 코드 공유-HTML 튜토리얼-php.cn

이중 비행 날개 레이아웃이란 무엇입니까? 이중 비행 날개 레이아웃의 예시 코드 공유

零下一度

풀어 주다： 2017-05-11 15:33:52

원래의

1664명이 탐색했습니다.

이중 비행 날개 레이아웃이란 무엇입니까? 이중 비행 날개 레이아웃의 예제 코드를 공유하면 매우 유용합니다. 관심 있는 친구는 다음과 같은

코드를 살펴볼 수 있습니다.

<!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 개발 매뉴얼

3 . php.cn 원본 html5 비디오 튜토리얼

위 내용은 이중 비행 날개 레이아웃이란 무엇입니까? 이중 비행 날개 레이아웃의 예시 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!