> 웹 프론트엔드 > CSS 튜토리얼 > CSS를 사용하여 프런트엔드 웹 페이지 레이아웃을 개선하기 위한 실용적인 팁

CSS를 사용하여 프런트엔드 웹 페이지 레이아웃을 개선하기 위한 실용적인 팁

青灯夜游
풀어 주다: 2018-09-07 17:12:09
원래의
1352명이 탐색했습니다.

CSS 프런트엔드 웹 페이지 레이아웃에는 다양한 기술이 있습니다. 다음은 초보자에게 적합한 CSS 프런트 엔드 웹 페이지 레이아웃 팁을 요약한 것입니다. 이 팁은 보다 실용적인 참조 값이 될 수 있습니다.

1. Mozilla에서는 ul 태그에 기본적으로 패딩 값이 있지만 IE에서는 여백만 있습니다. 값.

2. 동일한 클래스 선택기는 문서에 반복적으로 나타날 수 있지만 ID 선택기는 CSS 정의에서 레이블에 대해 클래스와 ID를 모두 사용합니다. ID의 가중치가 CLASS보다 크기 때문에 유효합니다.

3. 호환성을 조정하는 어리석은 방법(IE 및 Mozilla):
초보자는 다음과 같은 상황에 직면할 수 있습니다. IE에서는 동일한 레이블 속성이 A로 표시되는 것이 정상이지만 Mozilla에서는 표시되어야 합니다. 정상적으로 표시하려면 B로 설정해야 하며, 그렇지 않으면 둘이 반대로 표시됩니다.
임시 해결 방법:

选择符{属性名:B !important;属性名:A}
로그인 후 복사

4. 중첩할 라벨 그룹 사이에 간격이 있는 경우 외부에 있는 라벨의 패딩을 정의하는 대신 내부에 있는 라벨의 여백 속성에 그대로 두세요
5. li 태그 앞의 아이콘에는 목록 스타일 이미지 대신 배경 이미지를 사용하는 것이 좋습니다.
6. IE는 상속관계와 부자관계를 구분하지 못합니다. 모두 상속관계입니다.
7. 태그에 선택기를 추가할 때 CSS의 선택기에 주석을 추가하는 것을 잊지 마세요. 나중에 CSS를 수정하면 왜 이렇게 하는지 알게 될 것입니다.

8. 라벨에 어두운 배경 이미지와 밝은 텍스트 효과를 설정하는 경우. 이때 라벨의 배경색을 어두운 색으로 설정하는 것이 좋습니다.

9. 링크의 4가지 상태를 정의할 때 순서에 주의하세요.

Link Visited Hover Active
로그인 후 복사

10. 내용과 관련 없는 사진에는 배경을 사용하세요.

11. 축약형 #8899FF=#89F

12. 테이블은 일부 측면에서 다른 태그보다 성능이 훨씬 뛰어납니다. 열 정렬이 필요한 곳에 사용하세요.

13.

인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿