"Shuangfeiji 레이아웃"과 비교하여 성배 레이아웃의 DOM 구조는 더 간단하고 우아합니다. 최종 렌더링: 
다음은 성배 레이아웃의 핵심 코드입니다.
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
세션을 저장하기 위해 데이터베이스를 사용하면 어떤 장점이 있습니까?Apr 24, 2025 am 12:16 AM데이터베이스 스토리지 세션 사용의 주요 장점에는 지속성, 확장 성 및 보안이 포함됩니다. 1. 지속성 : 서버가 다시 시작 되더라도 세션 데이터는 변경되지 않아도됩니다. 2. 확장 성 : 분산 시스템에 적용하여 세션 데이터가 여러 서버간에 동기화되도록합니다. 3. 보안 : 데이터베이스는 민감한 정보를 보호하기 위해 암호화 된 스토리지를 제공합니다.
PHP에서 사용자 정의 세션 처리를 어떻게 구현합니까?Apr 24, 2025 am 12:16 AMSessionHandlerInterface 인터페이스를 구현하여 PHP에서 사용자 정의 세션 처리 구현을 수행 할 수 있습니다. 특정 단계에는 다음이 포함됩니다. 1) CustomsessionHandler와 같은 SessionHandlerInterface를 구현하는 클래스 만들기; 2) 인터페이스의 방법 (예 : Open, Close, Read, Write, Despare, GC)의 수명주기 및 세션 데이터의 저장 방법을 정의하기 위해 방법을 다시 작성합니다. 3) PHP 스크립트에 사용자 정의 세션 프로세서를 등록하고 세션을 시작하십시오. 이를 통해 MySQL 및 Redis와 같은 미디어에 데이터를 저장하여 성능, 보안 및 확장 성을 향상시킬 수 있습니다.
세션 ID 란 무엇입니까?Apr 24, 2025 am 12:13 AMSessionId는 웹 애플리케이션에 사용되는 메커니즘으로 사용자 세션 상태를 추적합니다. 1. 사용자와 서버 간의 여러 상호 작용 중에 사용자의 신원 정보를 유지하는 데 사용되는 무작위로 생성 된 문자열입니다. 2. 서버는 쿠키 또는 URL 매개 변수를 통해 클라이언트로 생성하여 보낸다. 3. 생성은 일반적으로 임의의 알고리즘을 사용하여 독창성과 예측 불가능 성을 보장합니다. 4. 실제 개발에서 Redis와 같은 메모리 내 데이터베이스를 사용하여 세션 데이터를 저장하여 성능 및 보안을 향상시킬 수 있습니다.
무국적 환경 (예 : API)에서 세션을 어떻게 처리합니까?Apr 24, 2025 am 12:12 AMJWT 또는 쿠키를 사용하여 API와 같은 무국적 환경에서 세션을 관리 할 수 있습니다. 1. JWT는 무국적자 및 확장 성에 적합하지만 빅 데이터와 관련하여 크기가 크다. 2. 쿠키는보다 전통적이고 구현하기 쉽지만 보안을 보장하기 위해주의해서 구성해야합니다.
세션과 관련된 크로스 사이트 스크립팅 (XSS) 공격으로부터 어떻게 보호 할 수 있습니까?Apr 23, 2025 am 12:16 AM세션 관련 XSS 공격으로부터 응용 프로그램을 보호하려면 다음 조치가 필요합니다. 1. 세션 쿠키를 보호하기 위해 Httponly 및 Secure 플래그를 설정하십시오. 2. 모든 사용자 입력에 대한 내보내기 코드. 3. 스크립트 소스를 제한하기 위해 컨텐츠 보안 정책 (CSP)을 구현하십시오. 이러한 정책을 통해 세션 관련 XSS 공격을 효과적으로 보호 할 수 있으며 사용자 데이터가 보장 될 수 있습니다.
PHP 세션 성능을 어떻게 최적화 할 수 있습니까?Apr 23, 2025 am 12:13 AMPHP 세션 성능을 최적화하는 방법 : 1. 지연 세션 시작, 2. 데이터베이스를 사용하여 세션을 저장, 3. 세션 데이터 압축, 4. 세션 수명주기 관리 및 5. 세션 공유 구현. 이러한 전략은 높은 동시성 환경에서 응용의 효율성을 크게 향상시킬 수 있습니다.
SESSION.GC_MAXLIFETIME 구성 설정은 무엇입니까?Apr 23, 2025 am 12:10 AMTHESESSION.GC_MAXLIFETIMESETTINGINSTTINGTINGSTINGTERMINESTERMINESTERSTINGSESSIONDATA, SETINSECONDS.1) IT'SCONFIGUDEDINPHP.INIORVIAINI_SET ()
PHP에서 세션 이름을 어떻게 구성합니까?Apr 23, 2025 am 12:08 AMPHP에서는 Session_Name () 함수를 사용하여 세션 이름을 구성 할 수 있습니다. 특정 단계는 다음과 같습니다. 1. Session_Name () 함수를 사용하여 Session_Name ( "my_session")과 같은 세션 이름을 설정하십시오. 2. 세션 이름을 설정 한 후 세션을 시작하여 세션을 시작하십시오. 세션 이름을 구성하면 여러 응용 프로그램 간의 세션 데이터 충돌을 피하고 보안을 향상시킬 수 있지만 세션 이름의 독창성, 보안, 길이 및 설정 타이밍에주의를 기울일 수 있습니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
