집 > 기사 > 백엔드 개발 > 성배의 고전적인 3열 레이아웃에 대한 단계별 튜토리얼

성배의 고전적인 3열 레이아웃에 대한 단계별 튜토리얼

天蓬老师원래의: 2018-08-18 13:55:152184검색

"Shuangfeiji 레이아웃"과 비교하여 성배 레이아웃의 DOM 구조는 더 간단하고 우아합니다. 최종 렌더링:
성배의 고전적인 3열 레이아웃에 대한 단계별 튜토리얼

다음은 성배 레이아웃의 핵심 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯</title>
    <style>
 .header, .footer {
            width: 100%;
 height: 60px;
 background-color: #aaa;
 }
        .content {
            width: 1000px;
 min-height: 100%;
 margin: auto;
 text-align: center;
 line-height: 60px;
 background-color: #eee;
 }

        .container {
            width: 600px;
 margin: auto;
 overflow: hidden;
 padding: 0 200px;
 background-color: yellow;
 }

        .main {
            width: 100%;
 min-height: 650px;
 background-color: #66CCFF;
 float:left;
 }

        .left {
            width: 200px;
 min-height: 650px;
 background-color: #FD6FCF;
 float:left;
 margin-left: -100%;
 position: relative;
 left: -200px;
 }

        .right {
            width: 200px;
 min-height: 650px;
 background-color: #FC0107;
 float:left;
 margin-left: -200px;
 position: relative;
 right: -200px;
 }
    </style>
</head>
<body>
<div class="header">
    <div class="content">header</div>
</div>

<div class="container">
    <div class="main">主要内容区</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

<div class="footer">
    <div class="content">footer</div>
</div>
</body>

아래 I 코드 내용을 하나씩 나열합니다. 모두에게 설명합니다:

1단계: DOM 구조 만들기:
기본 원칙은 다음과 같습니다.
1. 머리 + 가운데 + 아래 세 부분 중 가운데 부분이 주요 부분입니다. 3열 레이아웃으로 완성된 페이지 본문
2. 중간 3열에서 중간은 사용자 경험을 개선하기 위해 우선 렌더링되는 디스플레이 본문입니다. 2단계: 페이지의 헤드와 테일에 공통 스타일을 작성합니다. [현재 문서의

<!--1.头部:-->
<div class="header">
   <div class="content">header</div>
</div>
<!--2.中间主体:-->
<div class="container">
   <div class="main">主要内容区</div>
   <div class="left">左边</div>
   <div class="right">右边</div>
</div>
<!--3.底部:-->
<div class="footer">
   <div class="content">footer</div>
</div>

자세한 설명:1. 헤더 및 하단:

(1) 너비: 100%; 너비는 페이지 너비와 동일합니다: 100%, 자동으로 확장됩니다.

(2) 높이:60px; 높이는 일시적으로 60픽셀로 설정됩니다. 충분하지 않으면 조정하세요.
(3) background-color: #aaa 배경 참조 색상을 설정하고 필요에 따라 유지할지 여부를 결정할 수 있습니다.
2 스타일:
(1) 너비: 1000px; 콘텐츠 채우기를 용이하게 하기 위해 공개 콘텐츠 영역을 더 작게 만들고 고정 너비로 설정합니다.
(2) 최소 높이: 100% 완전한 페이지 레이아웃을 보장하고 자동으로 사용합니다. 상위 컨테이너의 높이는 60px입니다.
(3)margin: auto; 공개 콘텐츠 영역 콘텐츠도 블록입니다. 상위 컨테이너의 중앙에 배치하려면 margin을 사용해야 합니다.
(4)text-align:center; 내부 텍스트는 가로 중앙에 있습니다.
(5)line-height: 60%; 내부 단일 행 텍스트는 세로 중앙에 있습니다.
(6) background-color:#eee; 배경 참조 색상을 설정하고 그에 따라 유지할지 결정합니다. 상황에 맞게

3단계: 중간 몸체 컨테이너 스타일 설정:

 .header, .footer {
           width: 100%;
           height: 60px;
           background-color: #aaa;
       }
       .content {
           width: 1000px;
           min-height: 100%;
           margin: auto;
           text-align: center;
           line-height: 60px;
           background-color: #eee;
       }

자세한 설명:
1.width: 600px

3열 레이아웃의 상위 컨테이너 전체 너비를 다음으로 설정합니다. 600픽셀인데 왜 600픽셀인가요? 내 페이지의 전체 너비가 1000픽셀이고 왼쪽과 오른쪽의 너비가 200픽셀이므로

가운데 부분이 600픽셀로 설정되면 두 가지 기능이 있습니다. : 1. 중간 블록에서 상속을 위해 사용됩니다. 2. 패딩을 통해 확장할 수 있습니다.
그러므로 600px는 3개를 덮을 수 없으므로 걱정하지 마세요.
2.margin: auto;
3.overflow: Hidden; 콘텐츠의 다음 세 열에 대해 부동 소수점을 사용해야 하기 때문에 상위 컨테이너가 하위 블록을 래핑할 수 있도록 하려면 높이 붕괴가 발생하면 됩니다. 오버플로 숨기기는 여기에서 설정해야 합니다.
4.padding: 0 200px;
이 문에는 두 가지 기능이 있습니다.
(1) 현재 컨테이너의 왼쪽과 오른쪽 너비를 200px까지 확장할 수 있는 내부 여백 패딩을 설정합니다. 즉, 400px이고 현재 컨테이너의 총 너비는 1000px입니다.
(2) 컨테이너 너비가 확장된 후의 공간은 실제로 사이드바의 왼쪽 및 오른쪽 열을 위해 예약된 공간입니다. 그렇지 않으면 왼쪽 및 오른쪽 열은 확장되지 않습니다.
5.ground -color: yellow; 현재 3열 레이아웃을 확인하기 위해 배경 참조 색상을 설정합니다. 이는 최종적으로 삭제되거나 변경됩니다.

4단계: 3열의 중간 콘텐츠 영역을 설정합니다.

.container {
           width: 600px;
           margin: auto;
           overflow: hidden;
           padding: 0 200px;
           background-color: yellow;
       }

자세한 설명: 1.width: 100%; 중간 너비는 100%로, 실제로는 600px로, 현재 컨테이너의 전체 콘텐츠 영역을 차지합니다(400px 패딩 제외). min-height: 650px; 콘텐츠가 없을 때 최소 높이를 설정합니다. 오랫동안 페이지의 전반적인 아름다움과 사용자 경험에 영향을 주지 않고 충분한 높이를 표시할 수 있습니다. 참조 배경색을 지정하고 필요에 따라 유지할지 결정합니다.

4.float: left; 이때 가장 중요한 것은 중간 블록을 문서 흐름에서 벗어나 전체 콘텐츠 영역을 차지하는 것입니다. 왼쪽 및 오른쪽 블록이 자동으로 채워지고 위로 이동합니다.

5단계: 왼쪽 열의 표시 스타일 설정

.main {
       width: 100%;
       min-height: 650px;
       background-color: #6CF;
       float:left;
     }

자세한 설명:

1.width: 200px; , 이는 컨테이너에 예약된 패딩 너비와 동일합니다. 2.min-height: 650px; 너비는 중간 열과 일치합니다. 물론 일관성이 없을 수도 있습니다. 배경 참조 색상은 상황에 따라 유지할지 결정합니다. 4.float: left 매우 중요합니다. 중간 블록의 너비가 100%이므로 아래로 압축됩니다. ;

5.margin-left: -100%; 음수 여백을 설정하여 왼쪽 열을 상위 컨테이너가 예약한 왼쪽 패딩으로 이동합니다.

현재 상위 컨테이너가 -100%와 동일하다는 점에 유의하세요. .container 너비는 600입니다. 음수 값을 설정한다는 것은 요소를 반대 방향으로 당기는 것을 의미합니다. 그러나 이때 왼쪽 열은 중간 콘텐츠 영역의 왼쪽에 있는 200px 위치를 차지합니다. 왼쪽 열의 요소 위치 지정 방법: 원래 위치를 기준으로 여전히 문서 흐름에 있는 상대 위치 지정.
7.left: -200px 음수 값은 왼쪽 열을 패딩 왼쪽으로 이동하는 것을 의미합니다. 참고로
컨테이너의 패딩을 설정하지 않으면 왼쪽 열이 보이지 않습니다.

6단계: 오른쪽 열의 표시 스타일을 설정합니다

.right {
   width: 200px;
   min-height: 650px;
   background-color: #FC0107;
   float:left;
   margin-left: -200px;
   position: relative;
   right: -200px;
}

1.right: 200px; 宽度与左列相同,均为200px;
2.min-height: 650px; 最小高度与左列一致;
3.background-color: #fc0107; 设置参考背景色;
4.float: left; 设置左浮动,脱离文档流后,对它重新进行排列;
5.margin-left: -200px; 向反方向上移200px,其实就是与中间列并排显示;
6.position: relative; 设置相对定位
7.right: -200px; 将右列移动到容器的padding-right区域内

到此为止,圣杯布局完成~~
聪明的你,学会了吗?

위 내용은 성배의 고전적인 3열 레이아웃에 대한 단계별 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：PHP의 _initialize() 함수와 __construct() 함수의 차이점 설명다음 기사：PHP의 _initialize() 함수와 __construct() 함수의 차이점 설명