단계 탐색 CSS: 웹 탐색을 더욱 간결하고 명확하게 만듭니다.-프런트엔드 Q&A-php.cn

단계 탐색 CSS: 웹 탐색을 더욱 간결하고 명확하게 만듭니다.

PHPz

풀어 주다： 2023-04-24 15:19:33

원래의

732명이 탐색했습니다.

오늘날의 인터넷 시대에 페이지 탐색은 웹 디자인에서 없어서는 안 될 부분이 되었습니다. 단계 탐색은 페이지 콘텐츠를 여러 단계로 나누어 사용자에게 명확한 안내를 제공하는 탐색 방법입니다. 이를 통해 사용자는 페이지 구조를 더 잘 이해할 수 있을 뿐만 아니라 사용자 작업의 유창성을 향상하고 사용자 작업의 어려움을 줄일 수 있습니다. 이 기사에서는 단계 탐색의 프런트 엔드 구현인 CSS 기반 단계 탐색에 대해 설명합니다.

1. 배경

단계 탐색은 페이지 콘텐츠를 여러 단계로 나누어 사용자에게 명확한 안내를 제공하는 탐색 방법입니다. 이 탐색 방법은 일련의 복잡한 작업을 통해 사용자를 안내하는 데 자주 사용됩니다. 등록과정, 주문과정, 결제과정 등 인터넷 애플리케이션에서 자주 등장하는 시나리오.

사용자에게 현재 단계와 다음 단계가 무엇인지 명확하게 알려주는 것이 단계 탐색의 가장 중요한 기능입니다. 사용자가 프로세스의 어떤 단계에 있는지 명확하게 인식하면 해당 단계가 어떤 역할을 하는지, 다른 단계와 어떤 관련이 있는지 더 잘 이해할 수 있으며 다음 단계로 진행하기 전에 이를 확인할 수 있습니다.

이 목표를 달성하기 위해 개발자는 일반적으로 페이지의 헤더나 사이드바에 단계 탐색을 표시합니다. 그리고 각 단계에 대해 선택 가능한 버튼을 제공하여 단계가 진행 중이거나 완료되었음을 사용자에게 알립니다.

2. 프런트 엔드 구현 - CSS 기반 단계 탐색

CSS에서 이 스타일을 사용하여 완전한 단계 탐색을 구현할 수 있습니다. 이 섹션에서는 HTML과 CSS를 사용하여 CSS 기반 단계 탐색을 만드는 방법을 알아봅니다.

HTML

HTML 코드를 생성할 때 다음 기본 구조를 채택할 수 있습니다.

<div class="steps-navigation">
  <ul>
    <li class="active">
      <div class="step">
        <span>步骤1</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤2</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤3</span>
      </div>
    </li>
    <li>
      <div class="step">
        <span>步骤4</span>
      </div>
    </li>
  </ul>
</div>

로그인 후 복사

이 코드 조각에서는 ul 태그로 묶인 단계 탐색을 생성했습니다. li에서는 각 단계가 "step x"라는 이름으로 표시됩니다. 그 중 x는 단계 수를 나타냅니다. 또한 단계 이름을 담기 위해 내부에 범위가 중첩된 "step"이라는 div를 만들었습니다.

CSS에서는 다음 스타일을 사용하여 아름다운 단계 탐색을 만들 수 있습니다.

.steps-navigation {
  margin: 0;
  padding: 0;
}
.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}
.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}
.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}
.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}
.steps-navigation ul li:last-child:before {
  display: none;
}
.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}
.steps-navigation ul li:first-child .step {
  margin-left: 0;
}
.steps-navigation ul li:last-child .step {
  margin-right: 0;
}

로그인 후 복사

위 코드에는 각각 특정 목적을 가진 다양한 스타일이 포함되어 있습니다. 이는 CSS 단계 탐색을 이해하는 부분입니다.

스타일 설명

여기에서는 스타일을 하나씩 설명해드립니다.

.steps-navigation {
  margin: 0;
  padding: 0;
}

로그인 후 복사

이 부분의 기능은 단계 탐색의 여백과 패딩을 설정하는 것입니다.

.steps-navigation ul {
  list-style-type: none;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}

로그인 후 복사

이 부분의 기능은 단계 탐색과 외부 ul 요소 간의 호환성을 설정하는 것입니다.

.steps-navigation ul li {
  display: table-cell;
  text-align: center;
  position: relative;
}

로그인 후 복사

이 부분의 기능은 각 단계에 포함된 li 요소를 설정하는 것입니다. li 요소를 인라인 요소로 만들기 위해 display:table-cell 스타일을 사용합니다.

.steps-navigation ul li .step {
  display: block;
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  border: 3px solid #999;
  border-radius: 50%;
  background-color: #fff;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

로그인 후 복사

이 부분의 기능은 각 단계에서 "step x" 및 "span" 요소를 설정하는 것입니다. 요소 너비, 높이, 테두리, 배경 등을 포함한 속성을 설정하기 위해 다양한 스타일을 사용합니다.

.steps-navigation ul li.active .step {
  color: #fff;
  background-color: #00bcd4;
  border-color: #00bcd4;
}

로그인 후 복사

이 부분의 기능은 선택한 단계의 스타일을 설정하는 것입니다. 단계가 활성화되면(즉, 현재 단계) 배경색, 글꼴 색상 등도 변경됩니다.

.steps-navigation ul li:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ccc;
}

로그인 후 복사

이 부분의 기능은 각 단계마다 가로 구분선을 추가하는 것입니다.

.steps-navigation ul li.active~li:before {
  background-color: #00bcd4;
}

로그인 후 복사

이 부분의 기능은 단계가 활성화될 때(즉, 현재 단계) 선행 수평 구분선의 배경색을 수정하는 것입니다.

4. 요약

이 기사에서는 CSS를 사용하여 단계 탐색의 프런트 엔드 구현을 만드는 방법에 대해 설명했습니다. 단계 탐색은 인터넷 애플리케이션에서 일반적으로 사용되는 탐색 방법으로, 사용자가 페이지 구조를 더 잘 이해하고 조작의 유창성을 향상시키며 조작의 어려움을 줄일 수 있습니다. 위의 기술을 사용하여 당사는 웹사이트나 애플리케이션에 대한 원활한 사용자 인터페이스를 만들고 사용자 경험을 향상시킬 수 있습니다. CSS 단계 탐색을 기반으로 JavaScript를 사용하여 애니메이션이나 대화형 효과를 추가하는 등 구현을 더욱 확장할 수 있습니다. 귀하의 웹 네비게이션 디자인을 위한 좋은 선택이 되리라 믿습니다!

위 내용은 단계 탐색 CSS: 웹 탐색을 더욱 간결하고 명확하게 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!