CSS를 사용하여 간단한 단계 탐색을 만드는 방법-프런트엔드 Q&A-php.cn

CSS를 사용하여 간단한 단계 탐색을 만드는 방법

PHPz

풀어 주다： 2023-04-25 13:50:04

원래의

656명이 탐색했습니다.

단계 탐색은 특히 다단계 작업을 완료할 때 사용자의 작업을 용이하게 할 수 있습니다. 단계 탐색은 사용자가 현재 진행 상황을 더 잘 이해하고 작업 프로세스를 마스터하는 데 도움이 됩니다. 이 문서에서는 CSS를 사용하여 간단한 단계 탐색을 만드는 방법을 다룹니다.

먼저 HTML 파일을 연 다음 파일에 단계 탐색이 포함된 div 요소를 만들어야 합니다. 이 div 요소의 클래스 이름은 "step-nav"입니다.

<div class="step-nav">

</div>

로그인 후 복사

다음으로 각 단계에 대한 사용자 정의 단계 요소를 만들어야 합니다. 이 예에서는 4단계 탐색을 만듭니다.

<div class="step-nav">
  <div class="step">
    <span>步骤1</span>
  </div>
  <div class="step">
    <span>步骤2</span>
  </div>  
  <div class="step">
    <span>步骤3</span>
  </div>
  <div class="step">
    <span>步骤4</span>
  </div>
</div>

로그인 후 복사

각 단계는 클래스 이름이 "step"인 맞춤 div 요소와 단계 이름이 포함된 범위 요소입니다.

다음으로 CSS를 사용하여 단계 탐색을 사용자 정의해야 합니다. 먼저 "step-nav" 및 "step" 클래스에 대한 기본 스타일을 정의합니다.

.step-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  margin: 0 10px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
}

로그인 후 복사

여기에서는 Flexbox를 사용하여 단계 탐색을 중앙에 배치하고 단계 요소를 가로로 펼쳤습니다. 또한 단계 요소의 너비, 배경색, 여백, 텍스트 정렬, 줄 높이, 글꼴 크기, 텍스트 색상 및 테두리 반경과 같은 스타일 속성을 정의합니다.

이제 활성 단계(즉, 사용자가 현재 진행 중인 단계)에 스타일을 추가하고 싶습니다. 단계의 첫 번째 요소를 선택하려면 의사 클래스 선택기 ":nth-child"를 사용할 수 있습니다.

.step:nth-child(1) {
  background-color: #007aff;
}

로그인 후 복사

여기서는 단계 탐색의 첫 번째 요소 배경색을 파란색으로 변경하여 활성 단계임을 나타냅니다.

다음으로 각 단계에 호버 스타일을 추가해야 합니다. 사용자가 step 요소 위에 마우스를 올리면 CSS를 통해 밝은 색상을 추가하여 사용자의 관심을 끌 수 있습니다.

.step:hover {
  background-color: #ff4a57;
}

로그인 후 복사

이제 단계 탐색에 이미 몇 가지 기본 스타일이 있음을 알 수 있습니다. 그러나 단계 사이의 흐름을 더 잘 표현하려면 단계 사이에 연결을 추가해야 합니다. 의사 요소 선택기 "::before" 및 "::after"를 사용하여 직사각형 모양의 선을 만들 수 있습니다.

.step::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 20px solid #ccc;
  left: -20px;
  z-index: -1;
}

.step:first-child::before {
  display: none;
}

.step:last-child::after {
  display: none;
}

.step::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 20px solid #ccc;
  right: -20px;
  z-index: -1;
}

로그인 후 복사

여기에서는 절대 위치 지정을 사용하여 각 단계에 의사 요소를 추가하고 "content" 속성을 ""로 설정하여 텍스트가 생성되지 않도록 했습니다. 또한 "테두리" 속성을 사용하여 직사각형 모양의 선을 만들었습니다.

마지막으로 "first-child" 및 "last-child" 의사 클래스를 사용하여 첫 번째와 마지막 단계를 선택하고 "::before" 및 "::after" 의사 요소를 숨겨 중복된 수평선을 방지합니다. 단계 탐색의 양쪽 끝에 있습니다.

이제 사용자 정의 단계 탐색을 위한 모든 스타일링이 완료되었습니다. 브라우저에서 최종 결과를 볼 수 있습니다.

<html>
  <head>
    <style>
      .step-nav {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .step {
        width: 100px;
        height: 50px;
        background-color: #ccc;
        margin: 0 10px;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        color: #fff;
        border-radius: 5px;
        position: relative;
      }

      .step:nth-child(1) {
        background-color: #007aff;
      }

      .step:hover {
        background-color: #ff4a57;
      }

      .step::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-right: 20px solid #ccc;
        left: -20px;
        z-index: -1;
      }

      .step:first-child::before {
        display: none;
      }

      .step::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
        border-left: 20px solid #ccc;
        right: -20px;
        z-index: -1;
      }

      .step:last-child::after {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="step-nav">
      <div class="step">
        <span>步骤1</span>
      </div>
      <div class="step">
        <span>步骤2</span>
      </div>  
      <div class="step">
        <span>步骤3</span>
      </div>
      <div class="step">
        <span>步骤4</span>
      </div>
    </div>
  </body>
</html>

로그인 후 복사

일반적으로 단계 탐색은 웹 디자인에서 매우 실용적인 요소 중 하나이며, 특히 다단계 작업을 완료할 때 사용자가 조작하기 편리하게 할 수 있습니다. CSS를 사용하여 간단한 단계별 탐색을 만드는 것은 상대적으로 쉽습니다. 스타일 세부 사항만 주의하면 됩니다.

위 내용은 CSS를 사용하여 간단한 단계 탐색을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!