Đã đăng vào thg 4 7, 2020 3:30 SA 2 phút đọc 2 phút đọc
Xin chào các bạn, lại là mình đây . Tiếp nối chủ để Từng bước xây dựng Step Progress Bar với CSS mà mình có hứa hẹn ở cuối bài, trong bài viết này mình tiếp tục đưa thêm cho các bạn một cách nữa thay thế những nhược điểm của float
+ width
đã nêu ra đó là sử dụng table, vậy cách thực hiện như nào hãy cùng tìm hiểu qua bài viết này nhé.
float
+ width
đã nêu ra đó là sử dụng table,
vậy cách thực hiện như nào hãy cùng tìm hiểu qua bài viết này nhé.Các bước thực hiện
Bước 1: Tạo cấu trúc HTML
Cấu trúc HTML vẫn không có gì khác
Step 1
Step 2
Step 3
Step 4
Step 5
Bước 2: Style cho các thẻ ul
, li
Tại đây mình sẽ biến thẻ ul
thành "table" bằng cách sử dụng
.progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
1 + .progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
2 và 1 thuộc tính cũng khá quan trọng đó là .progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
3.progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
Và để các li
có width bằng nhau trong bảng thì ta cần thêm
.progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
5width bằng nhau trong bảng thì ta cần thêm .progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
5.progressbar li {
list-style: none;
position: relative;
text-align: center;
/* New */
display: table-cell;
}
Bước 3: Style cho .progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
6
.progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
Style không có gì thay đổi so với phiên bản trước
.progressbar li:before {
background: #fff;
border: 2px solid #bebebe;
border-radius: 50%;
color: #bebebe;
content: counter[step];
counter-increment: step;
display: block;
font-weight: 700;
height: 30px;
line-height: 27px;
margin: 0 auto 10px;
text-align: center;
width: 30px;
}
Bước 4: Style cho .progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
7
.progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
Ở phiên bản này mình sẽ không dùng
.progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
8 âm nữa mà sử dụng giá trị dương, đồng nghĩa đó là sẽ clear đường kẻ ngang của item cuối cùngdương, đồng nghĩa đó là sẽ clear đường kẻ ngang của item cuối cùng.progressbar li:after {
background: #979797;
content: '';
height: 3px;
left: 50%;
position: absolute;
top: 15px;
width: 100%;
z-index: -1;
}
.progressbar li:last-child:after {
content: none;
}
Bước 5: Thêm style riêng cho các trạng thái .progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
9, .progressbar li {
list-style: none;
position: relative;
text-align: center;
/* New */
display: table-cell;
}
0
.progressbar {
counter-reset: step;
padding: 0;
/* New */
display: table;
table-layout: fixed;
width: 100%;
}
.progressbar li {
list-style: none;
position: relative;
text-align: center;
/* New */
display: table-cell;
}
.progressbar li.complete:after {
background: #3aac5d;
}
.progressbar li.active:before,
.progressbar li.complete:before {
background: #3aac5d;
border-color: #3aac5d;
color: #fff;
}
.progressbar li.active {
color: #3aac5d;
font-weight: 700;
}
.progressbar li.complete {
color: #333;
font-weight: 700;
}
Thành quả chúng ta thu được
Kết luận
Việc sử dụng
.progressbar li {
list-style: none;
position: relative;
text-align: center;
/* New */
display: table-cell;
}
1 trong trường hợp này khá hay, nó giúp chúng ta chia width các item bằng nhau sẽ giúp tăng độ linh động khi có sự thay đổi về số lượng stepcó sự thay đổi về số lượng stepNếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công và hẹn gặp lại ở các bài viết sau !
All rights reserved