우리는 시간을 많이 절약할 수 있는 몇 가지 고전적인 CSS 기술을 기억해야 합니다. 아래에서 Zero는 모두를 위한 몇 가지 더 나은 CSS 기술을 권장합니다.

1. 다른 페이지에 동일한 탐색 코드

많은 웹 페이지에는 탐색 메뉴가 있습니다. 특정 페이지에 들어가면 메뉴의 해당 항목이 회색으로 바뀌고 다른 페이지는 켜집니다. 일반적으로 이 효과를 얻으려면 각 페이지에 대해 특별히 프로그램이나 디자인을 작성해야 합니다. 이제 CSS를 사용하여 이 효과를 얻을 수 있습니다.

먼저 탐색 코드에서 CSS 클래스를 사용합니다.

<ul> 
<li><a href="#" class="home">首页</a></li> 
<li><a href="#" class="about">关于我们</a></li> 
<li><a href="#" class="contact">联系我们</a></li> 
</ul>

그런 다음 각 페이지의 본문을 별도로 지정합니다. 위 클래스와 동일한 이름을 가진 ID입니다. 예를 들어 입니다.

그런 다음 CSS를 다음과 같이 디자인합니다.

#home .home, #about .about, #contact .contact 
{ 
commands for highlighted navigation go here 
}

여기서 ID가 home으로 설정되면 .home 시작됩니다. 클래스가 홈으로 설정된 탐색 모음 행에 특수 효과가 표시되는 효과가 있습니다. 다른 페이지도 마찬가지다.

아주 간단하지 않나요?

2. 블록 요소와 인라인 요소의 비교

모든 HTML 요소는 블록 요소와 인라인 요소 중 하나에 속합니다. 블록 요소의 특징은 다음과 같습니다.

항상 새 줄에서 시작합니다.

높이, 줄 높이 및 위쪽 및 아래쪽 여백을 모두 제어할 수 있습니다.

기본 너비는 다음과 같습니다. 너비가 설정되지 않은 경우 컨테이너의 100%

,

,

,