barre de marche CSS

Dans le processus de conception Web, les barres d'étapes sont souvent utilisées comme éléments de navigation pour les opérations des utilisateurs, en particulier dans les formulaires en plusieurs étapes et les processus d'achat. La création de barres d'étape nécessite généralement l'utilisation de la technologie CSS. Cet article présentera plusieurs méthodes CSS pour créer des barres d'étape, vous permettant d'obtenir facilement l'effet des barres d'étape sur les pages Web.

Méthode 1 : Utiliser une liste non ordonnée

La liste non ordonnée (<ul>) est l'une des méthodes courantes pour créer des barres d'étape. Le code est le suivant : <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

En CSS, nous pouvons utiliser le code suivant pour contrôler le style de la barre d'étape :

rrreee

Ce code contrôle le texte et l'état sélectionné de la barre de pas respectivement. Parmi eux, la partie .step li définit le style des éléments de liste non ordonnés, y compris l'affichage sous forme d'éléments de niveau bloc en ligne, la largeur et la hauteur, la couleur d'arrière-plan, le centrage horizontal et vertical du texte, les coins arrondis et l'espacement. , etc. ; .step li.active:before et .step li.active:after définissent le style de l'élément d'étape sélectionné. Avec les sélecteurs :before et :after, nous pouvons ajouter des flèches et des points à gauche de l'élément sélectionné.

Méthode 2 : Utiliser la mise en page flexible #🎜🎜##🎜🎜#La mise en page flexible est une technologie de mise en page CSS moderne qui peut mieux répondre aux exigences de mise en page complexes dans la conception Web. Utilisez la disposition Flex pour créer des barres d'étape, le code est le suivant : #🎜🎜#rrreee#🎜🎜#Le code CSS est le suivant : #🎜🎜#rrreee#🎜🎜#Dans ce code, nous utilisons la disposition Flex et ajoutons justifier-contenu est défini sur espace-entre, c'est-à-dire que l'espacement de chaque cercle est uniformément réparti dans l'espace restant du conteneur. Contrôlez le style du cercle via les sélecteurs .circle et .circle.active, et utilisez le sélecteur :after pour l'afficher sur la zone sélectionnée. cercle Un petit point. #🎜🎜##🎜🎜#Méthode 3 : Utiliser le framework Bootstrap #🎜🎜##🎜🎜#Bootstrap est un framework frontal populaire qui fournit de nombreux composants CSS et JavaScript utiles, y compris la possibilité de créer des barres d'étape. Pour créer une barre d'étapes à l'aide du framework Bootstrap, vous devez inclure les fichiers CSS et JS Bootstrap dans le code, puis utiliser le code suivant pour créer la barre d'étapes : #🎜🎜#rrreee#🎜🎜#Ce code utilise le Bootstrap Le composant nav-pills du framework et utilise les attributs active et data-toggle pour définir l'état sélectionné et l'effet de clic. Selon vos besoins, vous pouvez contrôler le style du composant nav-pills pour répondre aux besoins de conception. #🎜🎜##🎜🎜#Résumé : #🎜🎜##🎜🎜#La création de barres d'étape nécessite différents effets de style, et nous pouvons utiliser la technologie CSS pour les réaliser. Il vous suffit de définir la structure HTML puis d'utiliser CSS pour contrôler son style. Que vous utilisiez une liste non ordonnée, une mise en page flexible ou le framework Bootstrap, créer des barres d'étapes est simple et efficace. J'espère que grâce à l'introduction de cet article, vous pourrez facilement ajouter de magnifiques éléments de barre d'étape à vos pages Web. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!