열 레이아웃을 생성하려면
전체 문서의 여백과 안쪽 여백을 다음과 같이 설정합니다.
<style>
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>노란색 열을 정의하고 나중에 이 규칙을 다음에 추가합니다. -
<style>
<!--
#level0 {
background:#FC0;
}
-->
</style>이제 level0 내부에 다른 파티션을 정의합니다. -
<style>
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>및 다른 파티션을 중첩하면 전체 코드는 다음과 같습니다. -
<style>
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id="level0">
<div id="level1">
<div id="level2">
<div id="level3">
<div id="main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>위 내용은 CSS를 사용하여 열 레이아웃 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
