이것이 DIV 레이아웃 코드를 만드는 방법입니다. 명확한지 아닌지는 모르겠지만 한번 살펴보자
내 생각은 미래에는 표준 부품을 사용하여 웹 페이지 DIV 레이아웃을 조합할 수 있다는 것입니다.
클래스를 레이아웃 클래스와 스타일 클래스의 두 가지 유형으로 나눕니다. 레이아웃 클래스는 뼈대이고 스타일 클래스는 옷입니다.
예를 들어:
예를 들어 레이아웃의 왼쪽 열은
우선 속성은 왼쪽 열, 너비, 배경색, 글꼴 색상 등입니다.
1. 먼저 페이지의 전체 크기를 제어하는 데 주로 사용되는 .layout과 같은 클래스를 정의합니다.
.layout{width:98%;margin:0 auto;text-align:left;}
2. 그런 다음 3개의 기본 레이아웃 클래스(l,m,r)가 정의됩니다.
.l{부동:왼쪽}
.m{너비:자동}
.r{플로트:오른쪽}
2열 레이아웃도 3열 레이아웃으로 분류하는데, 3열 레이아웃에서는 왼쪽과 오른쪽 열의 너비가 0이 되면 3열이 2열이 되기 때문입니다.
기본 레이아웃 코드를 작성할 때는 3열 형식으로 작성하는 것이 가장 좋습니다.
3. 레이아웃 클래스에 해당하여 너비, 높이, 배경색 등 필요한 스타일 클래스를 정의합니다. 이는 모두 스타일 요소입니다.
.class_l{배경:#ff0;여백-오른쪽: -150px;너비:150px;}
.class_m{배경:#f00;여백:0 140px 0 150px;}
.class_r{배경:#00f;여백-왼쪽: -140px;너비:140px;}
레이아웃 클래스 세트는 하나만 있지만 스타일 클래스는 여러 개 정의할 수 있습니다.
예를 들어, 중간 열에 작은 2열 레이아웃을 만들고 싶습니다.
다른 스타일 클래스를 정의할 수 있습니다.
.mid_l{배경:#ff0;여백-오른쪽: -100px;너비:100px;}
.mid_m{배경:#f00;여백:0 0 0 100px;}
4. 레이아웃 클래스와 스타일 클래스를 결합하고 다음과 같이 코드에서 참조합니다.
<div 클래스=l 클래스_l></div>
<div 클래스=l mid_l></div>
두 클래스를 공백으로 구분하여 인용합니다. 첫 번째는 레이아웃 클래스이고 두 번째는 스타일 클래스입니다. 특별히 정의해야 하는 경우 이 div에 공백을 사용하여 계속해서 인용할 수 있습니다. 정의할 ID입니다.
일반적으로 사용되는 다른 스타일 클래스도 범용으로 작성할 수 있습니다. 예를 들어 암시적 스타일 클래스는 다음과 같이 정의할 수 있습니다.
.hide{표시:없음}
그런 다음 필요할 때 class=xxx hide를 사용하여 참조하면 매우 편리합니다.
암호: