단계 표시줄 CSS

웹 디자인에서 단계 막대는 사용자가 현재 위치와 다음에 취해야 할 단계를 더 잘 이해하는 데 도움이 되는 일반적인 탐색 요소입니다. 이 글에서는 CSS를 사용하여 간단한 단계 표시줄을 만드는 방법을 보여 드리겠습니다.

먼저 다음과 같은 단계가 포함된 목록이 필요합니다.

<ul>
  <li>步骤一</li>
  <li>步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

다음으로 단계 표시줄에 스타일을 추가해야 합니다. 먼저 목록에 다음 기본 스타일을 추가합니다.

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

이 CSS 코드는 목록의 기본 스타일을 제거하고 플렉스 레이아웃으로 설정합니다. 동시에 목록 항목이 컨테이너에 고르게 분포되도록 justify-content 속성을 space-between으로 설정했습니다.

다음으로 목록 항목에 원과 숫자를 추가하여 스타일을 지정해야 합니다. 스타일 코드는 다음과 같습니다.

li {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #fff;
  position: relative;
}
li:before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  height: 1px;
  width: 50%;
  background-color: #ccc;
}
li:first-child:before {
  display: none;
}
li.active {
  background-color: #f00;
}
li.active:before {
  background-color: #f00;
}

여기서 목록 항목의 너비와 높이를 설정하고 원으로 설정합니다. 또한 텍스트 정렬, 글꼴 굵기, 색상 및 줄 높이와 같은 속성을 설정합니다. 또한 각 단계를 구분하기 위해 CSS :before 의사 요소를 통해 각 목록 항목 앞에 점선을 추가했습니다.

마지막으로 .active 클래스를 사용하여 현재 단계의 목록 항목을 표시하고 특정 스타일을 통해 여기에 빨간색 배경과 전면 아이콘을 추가합니다.

최종 단계 표시줄 스타일은 다음과 같습니다.

단계 표시줄을 사용할 때 해당 목록 항목에 .active 클래스만 추가하면 됩니다. 예를 들어 현재 두 번째 단계에 있는 경우 다음과 같이 코드를 수정할 수 있습니다.

<ul>
  <li>步骤一</li>
  <li class="active">步骤二</li>
  <li>步骤三</li>
  <li>步骤四</li>
</ul>

위의 CSS 스타일 설정을 사용하면 사용자가 현재 단계 표시줄을 더 잘 이해할 수 있도록 사용자 정의 스타일 단계 표시줄을 쉽게 만들 수 있습니다. 그리고 다음 단계.

위 내용은 단계 표시줄 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!