LÀM THẾ NÀO - Bộ đếm phần
Tìm hiểu cách tạo "bộ đếm phần" bằng CSS.
Bộ đếm phần
Bộ đếm phần được sử dụng để cho mọi người biết công việc kinh doanh của họ đang hoạt động tốt như thế nào, bằng cách hiển thị những con số thú vị:
11+
Đối tác
55+
Dự án
100+
Khách hàng vui vẻ
100+
Các cuộc họp
Cách tạo bộ đếm phần
Bước 1) Thêm HTML:
Thí dụ
<div class="row">
<div class="column">
<div
class="card">
<p><i class="fa fa-user"></i></p>
<h3>11+</h3>
<p>Partners</p>
</div>
</div>
<div class="column">
<div class="card">
<p><i class="fa fa-check"></i></p>
<h3>55+</h3>
<p>Projects</p>
</div>
</div>
<div class="column">
<div class="card">
<p><i class="fa fa-smile-o"></i></p>
<h3>100+</h3>
<p>Happy Clients</p>
</div>
</div>
<div class="column">
<div class="card">
<p><i class="fa fa-coffee"></i></p>
<h3>100+</h3>
<p>Meetings</p>
</div>
</div>
</div>
Bước 2) Thêm CSS:
Thí dụ
.* {
box-sizing: border-box;
}
/* Float four columns side by side
*/
.column {
float: left;
width: 25%;
padding: 0
5px;
}
.row
{margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 10px;
}
}
/* Style the
counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0,
0.2);
padding: 16px;
text-align: center;
background-color: #444;
color: white;
}
.fa {font-size:50px;}