CSS를 사용하여 세트 박스 내의 링크만 클릭하여 점프하는 방법

이 글에서는 CSS를 사용하여 세트 박스 내의 링크만 클릭하여 점프하는 방법를 사용하여 세트 박스 내의 링크만 클릭하여 점프를 달성하는 방법을 소개합니다.

먼저 예제를 살펴보겠습니다.

HTML

<a href="http://www.php.cn/">
  <div class="toko">
    <h1>php中文网</h1>
  </div>
</a>

CSS를 사용하여 세트 박스 내의 링크만 클릭하여 점프하는 방법

.toko{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #389bc2;
  color: #ffffff;
  text-align: center;
}
.toko:hover{
  opacity: 0.5;
}

a{
  text-decoration: none;
}

브라우저에 표시되는 효과는 다음과 같습니다.

위 코드에서 " post" 상자를 선택하고 상자 전체를 링크로 만듭니다. 이렇게 하면 상자가 URL이 되어야 하는데 상자의 왼쪽이나 오른쪽 바깥쪽을 클릭하면 링크도 점프하게 됩니다. 박스 범위 내에서만 링크를 적용하려면 어떻게 해야 하나요?

다음으로 구체적인 구현 방법을 살펴보겠습니다

가장 먼저 알아야 할 것은 a 태그의 상자 안의 표시가 화면 너비로 확장되기 때문입니다

를 통해 다음 CSS를 사용하여 세트 박스 내의 링크만 클릭하여 점프하는 방법를 사용하면 링크 응용 프로그램 범위를 제한할 수 있습니다.

a{
  text-decoration: none;
  margin: 0 auto;
  display: block;
  width: 600px;
}

margin: 0 auto; 여백 대신 태그를 지정하는 데 사용됩니다. 따라서 a 태그를 블록 요소로 변경하려면 display:block을 사용하세요. 또한 너비를 해당 너비(400px)로 지정합니다. 태그가 있는 주변 블록 요소에는 장단점이 있지만 실제로는 좋은 접근 방식입니다.

위 내용은 이 기사의 전체 내용입니다. 더 많은 관련 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 CSS를 사용하여 세트 박스 내의 링크만 클릭하여 점프하는 방법 비디오 튜토리얼 및 HTML 비디오 튜토리얼을 방문하여 자세히 알아볼 수 있습니다. ! !

위 내용은 CSS를 사용하여 세트 박스 내의 링크만 클릭하여 점프하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!