• St"/>
  • St">

    단계 표시줄 CSS

    WBOY
    WBOY원래의
    2023-05-21 09:50:071744검색

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

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

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

    <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组件,并使用了activedata-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>activedata-toggle 속성을 ​​사용하여 선택한 상태와 클릭 효과를 정의합니다. 필요에 따라 nav-pills 구성 요소의 스타일을 제어하여 디자인 요구 사항을 충족할 수 있습니다. 🎜🎜요약: 🎜🎜스텝 바를 만들려면 다양한 스타일 효과가 필요하며 CSS 기술을 사용하여 이를 구현할 수 있습니다. HTML 구조를 정의한 다음 CSS를 사용하여 스타일을 제어하기만 하면 됩니다. 정렬되지 않은 목록, 플렉스 레이아웃 또는 부트스트랩 프레임워크를 사용하든 단계 막대를 만드는 것은 간단하고 효과적입니다. 이 기사의 소개를 통해 웹 페이지에 아름다운 단계 표시줄 요소를 쉽게 추가할 수 있기를 바랍니다. 🎜

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

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.