Cách thực hiện - 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 hoạt động kinh doanh của họ đang diễn ra tốt đẹp 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+
Cuộc họp
Cách tạo bộ đếm phần
Bước 1) Thêm HTML:
Ví 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:
Ví 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;}
Hãy tự mình thử »