Trittleiste CSS-Front-End-Fragen und Antworten-php.cn

Trittleiste CSS

WBOY

Freigeben： 2023-05-21 09:50:07

Original

1703 Leute haben es durchsucht

Im Webdesign-Prozess werden Schrittleisten häufig als Navigationselemente für Benutzeroperationen verwendet, insbesondere in mehrstufigen Formularen und Einkaufsprozessen. Die Herstellung von Trittleisten erfordert in der Regel den Einsatz der CSS-Technologie. In diesem Artikel werden verschiedene CSS-Methoden zum Erstellen von Schrittleisten vorgestellt, mit denen Sie den Effekt von Schrittleisten auf Webseiten problemlos erzielen können.

Methode 1: Verwenden Sie eine ungeordnete Liste

Ungeordnete Liste (<ul>) ist eine der gängigen Methoden zum Erstellen von Stufenleisten. Der Code lautet wie folgt: <ul>）是制作步骤条的常用方法之一。代码如下：

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

Nach dem Login kopieren

在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;
}

Nach dem Login kopieren

这段代码分别对步骤条文字和选中状态进行了样式控制。其中，.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>

Nach dem Login kopieren

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
}

Nach dem Login kopieren

在这段代码中，我们使用了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>

Nach dem Login kopieren

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

In CSS können wir den folgenden Code verwenden, um den Stil der Schrittleiste zu steuern:

rrreee

Dieser Code steuert den Stil des Schrittleistentextes bzw. des ausgewählten Status. Unter anderem definiert der Teil .step li den Stil der ungeordneten Listenelemente, einschließlich der Anzeige als Inline-Elemente auf Blockebene, Breite und Höhe, Hintergrundfarbe, horizontale und vertikale Textzentrierung, abgerundete Ecken und Abstände usw.; .step li.active:before und .step li.active:after definieren den Stil des ausgewählten Schrittelements. Mit den Selektoren :before und :after können wir links vom ausgewählten Element Pfeile und Punkte hinzufügen.

Methode 2: Flex-Layout verwenden🎜🎜Flex-Layout ist eine moderne CSS-Layout-Technologie, mit der komplexe Layout-Anforderungen im Webdesign besser umgesetzt werden können. Verwenden Sie das Flex-Layout, um Schrittbalken zu erstellen. Der Code lautet wie folgt: 🎜rrreee🎜Der CSS-Code lautet wie folgt: 🎜rrreee🎜In diesem Code verwenden wir Flex-Layout und setzen justify-content auf space-between, d. h. den Abstand zwischen den einzelnen Kreisen gleichmäßig im verbleibenden Raum des Containers verteilen. Steuern Sie den Stil des Kreises über die Selektoren .circle und .circle.active und verwenden Sie den Selektor :after, um ihn auf der ausgewählten Seite anzuzeigen Kreis Ein kleiner Punkt. 🎜🎜Methode Drei: Verwenden Sie das Bootstrap-Framework 🎜🎜Bootstrap ist ein beliebtes Front-End-Framework, das viele nützliche CSS- und JavaScript-Komponenten bereitstellt, einschließlich der Option zum Erstellen von Schrittleisten. Um eine Schrittleiste mit dem Bootstrap-Framework zu erstellen, müssen Sie die Bootstrap-CSS- und JS-Dateien in Ihren Code einbinden und dann den folgenden Code verwenden, um die Schrittleiste zu erstellen: 🎜rrreee🎜Dieser Code verwendet den nav-pills-Komponente des Bootstrap-Frameworks und verwenden Sie die Attribute <code>active und data-toggle, um den ausgewählten Status und den Klickeffekt zu definieren. Bei Bedarf können Sie den Stil der nav-pills-Komponente steuern, um den Designanforderungen gerecht zu werden. 🎜🎜Zusammenfassung: 🎜🎜Das Erstellen von Trittleisten erfordert unterschiedliche Stileffekte, und wir können CSS-Technologie verwenden, um diese zu erreichen. Sie müssen lediglich die HTML-Struktur definieren und dann CSS verwenden, um den Stil zu steuern. Unabhängig davon, ob Sie eine ungeordnete Liste, ein Flex-Layout oder das Bootstrap-Framework verwenden, ist die Erstellung von Schrittleisten einfach und effektiv. Ich hoffe, dass Sie durch die Einführung in diesem Artikel ganz einfach schöne Step-Bar-Elemente zu Ihren Webseiten hinzufügen können. 🎜

Das obige ist der detaillierte Inhalt vonTrittleiste CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!