欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

[點晴永久免費OA]純CSS實現一個簡單又不失優雅的步驟條

freeflydom
2023年8月26日 14:54 本文熱度 923

   步驟條是一種用于引導用戶按照特定流程完成任務的導航條,在各種分步表單交互場景中廣泛應用。先來看一下幾個主流前端 UI 框架中步驟條組件的樣子:

確定結構

對于步驟條這種呈現順序的列表結構,在 HTML 標簽選擇上,使用 ul 或 ol 標簽可以讓語義更加清晰,這里我們使用了 ol 標簽,HTML 代碼如下:

<ol class="steps">

  <li>注冊</li>

  <li>域認證</li>

  <li>身份校驗</li>

  <li>風險等級評估</li>

  <li>開通賬號</li>

</ol>

.steps {

  --normal-color: #666;

  --active-color: #06e;


  display: flex;

  justify-content: space-between;

  padding: 0;

  margin: 0;

  counter-reset: order;

}


/* 步驟項 */

.steps > li {

  flex: auto;

  display: inline-flex;

  align-items: center;

  counter-increment: order;

  color: var(--active-color);

}

.steps > li:last-child {flex: none;}


/* 步驟編號(帶圈數字) */

.steps > li::before {

  content: counter(order);

  flex-shrink: 0;

  width: 1.4em;

  line-height: 1.4em;

  margin-right: .5em;

  text-align: center;

  border-radius: 50%;

  border: 1px solid;

}


/* 步驟項引導線 */

.steps > li:not(:last-child)::after {

  content: '';

  flex: 1;

  margin: 0 1em;

  border-bottom: 1px solid;

  opacity: .6;

}


/* 步驟狀態 */

.steps > .active {color: var(--active-color);}

.steps > .active::before {

  color: #fff;

  background: var(--active-color);

  border-color: var(--active-color);

}

.steps > .active::after,

.steps > .active ~ li {color: var(--normal-color);}

知識點總結

  • flex 容器的 justify-content: space-between; 可令子元素按顯示方向均勻分布,兩端分散對齊,實在是居家旅行之必備神器;

  • inline-flex 的盒子既能像 flex 容器那樣輕松拿捏其子元素的布局,又能像行內塊元素一樣平易近人;

  • CSS 計數器洗剪吹一條龍:counter-reset、counter-increment、counter(xxx);

  • flex: <number>對于寬度(或高度)能占盡占,該是我的就是我的,能剩一點算我輸;

  • flex: auto 從自身實際情況出發應占盡占,大家共同富裕不香嗎;

  • flex-shrink 用來設置 flex 元素的可壓榨基準,與它對應的是 flex-basis,用來設置可膨脹基準;

  • IE 都亡了,CSS 變量,放心用起來吧;

  • 強大的 CSS 偽類選擇器,可以讓代碼更精簡,還可以打出組合拳:li:not(:last-child)::after

  • 平平無奇關鍵時刻又能打能抗的兄弟選擇器:.active ~ li。




該文章在 2023/8/26 14:55:56 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved