웹 페이지 레이아웃에 CSS 클래스를 유연하게 적용

CSS를 공부한 친구들은 다 CLASS를 알고 있을 거라 생각합니다. 웹 페이지를 만들 때 어떻게 사용하는지 모르겠습니다. DIV 레이아웃 코드를 만드는 방법입니다. 명확할지 모르겠지만

유형

나눕니다

. 레이아웃 클래스는 뼈대이고 스타일 클래스는 옷입니다.

레이아웃의

첫 번째 열에는 해당 속성이 있습니다. : 왼쪽 열, 너비, 배경색, 글꼴 색상 등입니다

. 먼저 페이지의 전체 크기를 제어하는 ​​데 주로 사용되는 .layout과 같은 클래스를 정의

합니다

.

그러면 3가지 기본 레이아웃 Class(l,m,r)

.l{float:left}

.m{width:auto}

.r{float:right}

저도 2열 레이아웃을 3열 레이아웃으로 분류합니다. 3열 레이아웃에서는 왼쪽과 오른쪽 열의 너비가 각각 0일 때 3열이 2열이 됩니다.

기본 레이아웃 코드를 작성할 때는 3열 형식으로 작성하는 것이 가장 좋습니다.

3. 레이아웃 클래스에 해당하여 너비, 높이, 배경색 등 필요한 스타일 클래스를 정의합니다. 이는 모두 스타일 요소

입니다

.

{배경:# f00;margin:0 140px 0 150px;}

.class_r{배경:#00f;margin-left: -140px;width:140px;}

레이아웃 클래스 세트는 하나만 있지만 많은 스타일 클래스를 정의할 수 있습니다. 예를 들어, 중간 열에서 수행해야 합니다. 작은 2열 레이아웃은 다른 스타일 클래스를 정의할 수

있습니다

.

f00;margin:0 0 0 100px;}

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

두 클래스를 공백으로 구분하여 인용합니다. 첫 번째는 레이아웃 클래스이고 두 번째는 스타일 클래스입니다. 특별히 정의해야 하는 경우 이 div에 공백을 사용하여 계속해서 인용할 수 있습니다. 기타

일반적으로 사용되는 스타일 클래스 중 일부는 universal로 작성할 수도 있습니다. 예를 들어 implicit는

.hide{display:none}으로 정의할 수 있습니다.

이 경우 class="xxx hide"를 사용하여 직접 참조할 수 있습니다

매우 편리한 곳이지 않나요? 좋은 경험을 적어서 공유할 수도 있습니다.