단계 표시줄 CSS-프런트엔드 Q&A-php.cn

단계 표시줄 CSS

WBOY

풀어 주다： 2023-05-21 09:50:07

원래의

1703명이 탐색했습니다.

웹 디자인 프로세스에서 단계 막대는 특히 다단계 양식 및 쇼핑 프로세스에서 사용자 작업을 위한 탐색 요소로 자주 사용됩니다. 스텝 바를 만들려면 일반적으로 CSS 기술을 사용해야 합니다. 이 기사에서는 웹 페이지에서 단계 막대의 효과를 쉽게 얻을 수 있도록 단계 막대를 만드는 몇 가지 CSS 방법을 소개합니다.

방법 1: 순서가 없는 목록 사용

순서가 없는 목록(<ul>)은 단계 막대를 만드는 일반적인 방법 중 하나입니다. 코드는 다음과 같습니다. <ul>）是制作步骤条的常用方法之一。代码如下：

<ul class="step">
  <li class="active">Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ul>

로그인 후 복사

在CSS中，我们可以用以下代码对步骤条进行样式控制：

.step li{
  list-style:none;
  display:inline-block;
  width:30px;
  height:30px;
  background:#fff;
  color:#555;
  text-align:center;
  line-height:30px;
  border-radius:50%;
  margin-right:10px;
  position:relative;
}
.step li.active:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid #3c8dbc;
  position:absolute;
  top:10px;
  left:-10px;
}
.step li.active:after {
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#3c8dbc;
  top:7px;
  left:7px;
}

로그인 후 복사

这段代码分别对步骤条文字和选中状态进行了样式控制。其中，.step li部分定义了无序列表项的样式，包括显示为行内块级元素、宽高、背景颜色、文本水平和垂直居中、圆角和间距等；.step li.active:before和.step li.active:after则定义了选中步骤条项的样式。通过:before和:after选择器，我们可以在选中项的左侧添加箭头和圆点。

方法二：使用flex布局

flex布局是一种现代的CSS布局技术，能够更好地实现网页设计中的复杂布局需求。使用flex布局来制作步骤条，代码如下：

<div class="step flex">
  <div class="circle active">1</div>
  <div class="circle">2</div>
  <div class="circle">3</div>
</div>

로그인 후 복사

CSS代码如下：

.step.flex{
  display:flex;
  justify-content:space-between;
}
.circle{
  width:25px;
  height:25px;
  background:#fff;
  color:#555;
  border:2px solid #ccc;
  border-radius:50%;
  text-align:center;
  line-height:25px;
  position:relative;
}
.circle:after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ccc;
  top:9px;
  left:9px;
  display:none;
}
.circle.active{
  background:#3c8dbc;
  color:#fff;
  border-color:#3c8dbc;
}
.circle.active:after{
  display:block
}

로그인 후 복사

在这段代码中，我们使用了Flex布局，并将justify-content设置为space-between，即在容器剩余空间中平均分配每个圆圈的间距。通过.circle和.circle.active选择器对圆圈的样式进行控制，并使用:after选择器在选中的圆圈上显示一个小圆点。

方法三：使用Bootstrap框架

Bootstrap是一种流行的前端框架，提供了许多有用的CSS和JavaScript组件，其中包括制作步骤条的选项。要使用Bootstrap框架创建步骤条，需要在代码中包含Bootstrap CSS和JS文件，然后使用以下代码创建步骤条：

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-step1-tab" data-toggle="pill" href="#pills-step1" role="tab" aria-controls="pills-step1" aria-selected="true">Step 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-step2-tab" data-toggle="pill" href="#pills-step2" role="tab" aria-controls="pills-step2" aria-selected="false">Step 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-step3-tab" data-toggle="pill" href="#pills-step3" role="tab" aria-controls="pills-step3" aria-selected="false">Step 3</a>
  </li>
</ul>

로그인 후 복사

这段代码使用了Bootstrap框架的nav-pills组件，并使用了active和data-toggle属性来定义选中状态和点击效果。根据需要，可以对nav-pillsrrreee

CSS에서는 다음 코드를 사용하여 단계 표시줄의 스타일을 제어할 수 있습니다.

rrreee

이 코드는 단계 표시줄 텍스트와 선택한 상태의 스타일을 각각 제어합니다. 그 중 .step li 부분은 인라인 블록 수준 요소로 표시, 너비 및 높이, 배경색, 가로 및 세로 텍스트 가운데 맞춤, 둥근 모서리 및 간격을 포함하여 순서가 지정되지 않은 목록 항목의 스타일을 정의합니다. 등. .step li.active:before 및 .step li.active:after는 선택한 단계 항목의 스타일을 정의합니다. :before 및 :after 선택기를 사용하면 선택한 항목 왼쪽에 화살표와 점을 추가할 수 있습니다.

방법 2: 플렉스 레이아웃 사용🎜🎜플렉스 레이아웃은 웹 디자인의 복잡한 레이아웃 요구 사항을 더 잘 실현할 수 있는 최신 CSS 레이아웃 기술입니다. flex 레이아웃을 사용하여 스텝 바를 만듭니다. 🎜rrreee🎜 CSS 코드는 다음과 같습니다. 🎜rrreee🎜 이 코드에서는 Flex 레이아웃을 사용하고 justify-content를 로 설정합니다. > space-between, 즉 컨테이너의 나머지 공간에서 각 원 사이의 간격을 균등하게 분배합니다. .circle 및 .circle.active 선택기를 통해 원의 스타일을 제어하고, :after 선택기를 사용하여 선택한 항목에 표시합니다. 원 작은 점. 🎜🎜방법 3: 부트스트랩 프레임워크 사용 🎜🎜Bootstrap은 단계 막대를 만드는 옵션을 포함하여 많은 유용한 CSS 및 JavaScript 구성 요소를 제공하는 인기 있는 프런트 엔드 프레임워크입니다. Bootstrap 프레임워크를 사용하여 단계 표시줄을 만들려면 코드에 Bootstrap CSS 및 JS 파일을 포함시킨 후 다음 코드를 사용하여 단계 표시줄을 만들어야 합니다. 🎜rrreee🎜이 코드는 nav-pills 구성 요소, 그리고 <code>active 및 data-toggle 속성을 사용하여 선택한 상태와 클릭 효과를 정의합니다. 필요에 따라 nav-pills 구성 요소의 스타일을 제어하여 디자인 요구 사항을 충족할 수 있습니다. 🎜🎜요약: 🎜🎜스텝 바를 만들려면 다양한 스타일 효과가 필요하며 CSS 기술을 사용하여 이를 구현할 수 있습니다. HTML 구조를 정의한 다음 CSS를 사용하여 스타일을 제어하기만 하면 됩니다. 정렬되지 않은 목록, 플렉스 레이아웃 또는 부트스트랩 프레임워크를 사용하든 단계 막대를 만드는 것은 간단하고 효과적입니다. 이 기사의 소개를 통해 웹 페이지에 아름다운 단계 표시줄 요소를 쉽게 추가할 수 있기를 바랍니다. 🎜

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