国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用css完成引導用戶按照流程完成任務的進度導航條

curlyCheng / 2729人閱讀

首先先看設計稿

圖中的12345便是主角進度條。

分析需求如下:
線的長度不固定,適應移動端和pc端
點平均地分布在一條線上
點的個數不固定,可能會改變
激活的點之間線的顏色是綠色的

兩種種方式 百分比寬度切分和flex布局

貼上代碼
HTML




  
  JS Bin


  
在群內累計布置3天作業,即可加入先鋒教師!
  • 1天
  • 1天
  • 1天
  • 1天
  • 1天
在群內累計布置3天作業,即可加入先鋒教師!
  • 1天
  • 1天
  • 1天
  • 1天
  • 1天

css

ul {
  margin:0;
  padding:0;
}
li {
  list-style: none;
}

.pub-wrap {
  position: relative;
  padding: 0 30px 10px;
  margin-top: 28px;
  border-radius: 6px;
  background-color: #edf2f2;
}

.pub-title {
  padding-top: 14px;
  margin-right: -20px;
  margin-left: -20px;
  font-size: 1.1875rem;
  text-align: center;
}

.pub-process {
  position: relative;
  height: 35px;
  margin-top: 28px;
  margin-left: 35px;
  font-size: 0;
  color: #fff;
}

.pub-process:after {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 99%;
  height: 4px;
  content: "";
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background-color: #d9d9d9;
}

.pub-process li {
  position: relative;
  z-index: 5;
  display: inline-block;
  width: 25%;
  height: 35px;
  font-size: .875rem;
}

.pub-process li:first-child {
  width: 35px;
  margin-left: -35px;
}

.pub-process .ball {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 7;
  width: 35px;
  height: 35px;
  line-height: 35px;
  content: "";
  text-align: center;
  border-radius: 50%;
  background-color: #d9d9d9;
}

.pub-process .active .ball {
  background-color: #11c2c2;
}

.pub-process .active + .active:after {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 6;
  width: 100%;
  height: 4px;
  content: "";
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  background-color: #11c2c2;
}

.process-3 li {
  width: 50%;
}

.process-5 li {
  width: 25%;
}


/* flex ver */
.pub-process-flex {
  display: -webkit-box;
}
.pub-process-flex li {
  display: list-item;
  -webkit-box-flex: 1;
  width: auto;
}
.pub-process-flex li:first-child {
  width: 35px;
  margin-left: -35px;
  -webkit-box-flex: 0;
}

實現效果如圖

使用百分比因為寬度是百分比設死的,這樣在點的數量修改時,我們還是要改css,所以建議使用flex布局更完美。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112192.html

相關文章

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要:轉載來源包管理器管理著庫,并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想,使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源:https://github.com/jobbole/aw... 包管理器管理著 javascript 庫,并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    netmou 評論0 收藏0
  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要:轉載來源包管理器管理著庫,并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想,使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源:https://github.com/jobbole/aw... 包管理器管理著 javascript 庫,并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    Hydrogen 評論0 收藏0
  • javascript功能插件大集合,寫前端親們記得收藏

    摘要:一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想,使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具,能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。 【導讀】:GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

    cfanr 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<