포털 웹사이트용 CSS 프레임워크 구축 규칙_경험 교환

1부: CSS 프레임워크 구축 시 달성하고자 하는 것:

1. 메인스트림 플랫폼에 대한 적응성을 갖춘 표준화 및 프런트엔드 구현
2. 사이트 스타일이 결정된 후 프런트엔드가 전체 프로젝트의 병목 현상이 되어서는 안 됩니다. 3. 리팩토링 요구 사항, 클래스 및 블록 스타일을 최대한 재사용 가능하게 만듭니다.
4. 구조 및 성능 요구 사항을 분리하고, 의미 구조의 규칙을 준수합니다.
5. 금융 네트워크의.
6. 코드에 필요한 검색 엔진 최적화를 수행합니다.

2부: CSS 이름 지정에 대한 몇 가지 규칙:

1. 대문자 클래스 이름과 ID 이름을 사용하지 마세요.

2. 클래스 이름과 ID 이름은 설명적인 영어 단어를 조합하여 사용하세요.
3. 단어를 구분하려면 "_" 대시를 사용하세요.
4. 영역별 설명: main01_div01_ul01(본문 첫 번째 영역의 첫 번째 UL로 이해 가능)

다음으로 전체 웹사이트와 디자인 초안을 분석하여 우리 포털 구조의 특성에 맞는 CSS 프레임워크를 만들어야 합니다

Sina.com을 예로 들어 보겠습니다.

사이트 구조 분석 수행:

전체 페이지는 홈페이지, 추가 페이지, 콘텐츠 페이지, 주제 페이지, 데이터 센터, 뉴스 센터, 채널 페이지, 광고...

우리는 공통 부분을 찾기 위해 이러한 페이지를 구성합니다: CSS 스타일, 영역 및 모듈 조각 우리가 해야 할 일은 이러한 공통 부분을 추출하는 것입니다.

관찰 후 CSS를 다음 범주로 나눌 수 있습니다.

메인 스타일 시트: sjweb.css

font(글꼴 스타일, 글꼴 크기 및 색상 모음)
layout(프레임 구조 모음)
global(전역 기본 스타일 모음)
컴포넌트(컴포넌트 페이지 부분 스타일 시트, 모듈 조각 컬렉션)
이들은 모두 sjweb.css 메인 스타일 시트로 가져옵니다. 메인 스타일 시트는 다음과 같은 새로운 외부 스타일을 로드하는 로더 역할을 합니다.
광고 스타일 시트.
이러한 방식으로 이러한 페이지에서는 자신의 특별한 요구 사항을 충족하는 약간의 CSS 스타일 코드만 작성하면 됩니다.

이 CSS 프레임워크를 구축할 때 줄 간격, 모듈 간 간격 등 통일해야 할 세부 사항이 많습니다.

다음은 포털의 홈페이지 구조도입니다.

규칙:

1. 모든 영역, 상단, 하단, 왼쪽 및 오른쪽 사이의 간격은 8픽셀입니다.
2. 뉴스 목록 줄 간격; 20픽셀
…잠깐

환경 조정: IE7, ff, IE6, IE5.x, Opera.

PS: 사실 빌드할 때 세부적인 사항이 더 중요하므로 자세한 내용은 다루지 않겠습니다. ㅎㅎ