資訊專欄INFORMATION COLUMN
首先先看設(shè)計稿
圖中的12345便是主角進度條。
分析需求如下：
線的長度不固定，適應(yīng)移動端和pc端
點平均地分布在一條線上
點的個數(shù)不固定，可能會改變
激活的點之間線的顏色是綠色的
兩種種方式 百分比寬度切分和flex布局
貼上代碼
HTML
JS Bin 在群內(nèi)累計布置3天作業(yè)，即可加入先鋒教師！
- 1天
- 1天
- 1天
- 1天
- 1天
在群內(nèi)累計布置3天作業(yè)，即可加入先鋒教師！
- 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;
}
實現(xiàn)效果如圖
使用百分比因為寬度是百分比設(shè)死的，這樣在點的數(shù)量修改時，我們還是要改css，所以建議使用flex布局更完美。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112192.html
摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...
摘要：轉(zhuǎn)載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。 轉(zhuǎn)載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...
摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過充分測試和記錄數(shù)據(jù)結(jié)構(gòu)的庫。 【導讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護的 JS 資源列表...
閱讀 726·2021-10-14 09:42
閱讀 1981·2021-09-22 15:04
閱讀 1588·2019-08-30 12:44
閱讀 2147·2019-08-29 13:29
閱讀 2742·2019-08-29 12:51
閱讀 558·2019-08-26 18:18
閱讀 709·2019-08-26 13:43
閱讀 2822·2019-08-26 13:38
