CSS 팁

우리는 시간을 많이 절약할 수 있는 몇 가지 고전적인 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입니다. 예를 들어 69aab999a64e75a9d5e7b7109fdc5db9입니다.

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

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

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

아주 간단하지 않나요?

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

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

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

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

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

,

,

,

,

및
• 는 블록 요소입니다. 반대로 인라인 요소의 특징은 다음과 같습니다.

  다른 요소는 같은 줄에 있습니다.

  높이, 줄 높이 및 위쪽 및 아래쪽 여백은 변경할 수 없습니다. 🎜> 너비는 텍스트나 이미지의 너비를 변경할 수 없습니다.

  , , , , , 및 은 인라인 요소의 예입니다.

  요소의 이 기능을 변경하려면 code class="inline">display: inline 또는 display: block 명령을 사용하세요. 언제 이 속성을 변경해야 합니까?

  인라인 요소가 새 줄에서 시작되도록 합니다.

  블록 요소와 기타 요소를 한 줄에 유지합니다.

  인라인 요소의 너비를 제어합니다(특히 탐색 모음에 유용). );

  인라인 요소의 높이를 제어합니다.

  너비를 설정하지 않고도 블록 요소의 텍스트와 동일한 너비로 배경색을 설정할 수 있습니다.

  CSS 기술과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!