CLASS를 결합하여 웹페이지 레이아웃 스타일 완성

CLASS를 결합하여 웹페이지 레이아웃 스타일 완성_CSS/HTML

WBOY

풀어 주다： 2016-05-16 12:11:03

원래의

1819명이 탐색했습니다.

DIV 레이아웃 코드를 만드는 방법은 다음과 같습니다. 명확한지 아닌지는 모르겠지만 같이 살펴봅시다
내 생각은 미래에는 표준 부품을 사용하여 웹페이지 DIV 레이아웃 조립

I 클래스를 2가지 유형으로 나누어 레이아웃 클래스, 스타일 클래스, 레이아웃 클래스는 스켈레톤, 스타일 클래스는 옷
예:
예를 들어 레이아웃의 왼쪽 열
우선 해당 속성 은: 왼쪽 열, 너비, 배경색, 글꼴 색상 등

1. 먼저 페이지의 전체 크기를 제어하는 데 주로 사용되는 .layout과 같은 클래스를 정의합니다.
.layout{width:98%;margin:0 auto;text-align:left;}

2. 그런 다음 3가지 기본 레이아웃 Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
2를 넣었습니다. 3열 레이아웃에서는 왼쪽과 오른쪽 열의 너비가 각각 0일 때 3열이 2열이 되기 때문에 열 레이아웃도 3열 레이아웃으로 분류됩니다.
기본 레이아웃 코드를 작성할 때는 3열 형식으로 작성하는 것이 가장 좋습니다.

3. 레이아웃 클래스에 해당하여 너비, 높이, 배경색 등 필요한 스타일 클래스를 정의합니다. 이는 모두 스타일 요소입니다
.class_l{배경:#ff0;margin-right: -150px;width:150px; }
.class_m{배경:#f00;margin:0 140px 0 150px;}
.class_r{Background:#00f;margin-left: -140px;width:140px;}

여기 하나의 레이아웃 클래스 집합이므로 많은 스타일 클래스를 정의할 수 있습니다.
예를 들어 중간 열에 작은 2열 레이아웃을 만들고 싶다면
다른 스타일 클래스를 정의할 수 있습니다
. mid_l{Background:#ff0;margin-right: - 100px;width:100px;}
.mid_m{Background:#f00;margin:0 0 0 100px;}

4. 레이아웃 클래스를 결합합니다. 스타일 클래스를 추가하고 다음과 같이 코드에서 참조합니다.

두 클래스를 모두 인용하고 공백으로 구분합니다. 앞이 레이아웃 클래스이고 후자가 스타일 클래스이며 나중에 특별히 정의해야 하는 경우 공백을 계속해서 사용할 수 있습니다. div는 정의할 ID입니다.

일반적으로 사용되는 다른 스타일 클래스도 있습니다. 예를 들어 암시적은
.hide{display:none}
으로 정의할 수 있습니다. 그런 다음 필요할 때 class="xxx hide"를 사용하여 참조할 수 있으므로 매우 편리합니다.