Cách Tạo Vertical Timeline Bằng HTML CSSNgày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo vertical timeline(dòng thời gian dọc) bằng HTML, CSS nhé! Tạo Cấu Trúc Phần Tử HTML Cho Vertical Timeline Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với Google Font thông qua đoạn mã dưới đây nhé:
HTML <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tạo Vertical Timeline</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Thêm Các Phần Tử HTML và CSS Cho Timeline Bây giờ chúng ta sẽ đi vào thêm các phần tử HTML cần thiết cho timeline thông qua đoạn mã sau nhé: HTML<div class="timeline">
<ul>
<!--Nội dung cho timeline thứ 1-->
<li>
<div class="noi_dung">
<h3>Thông Tin Timeline 1</h3>
<p>Lorem ipsum dolor sit amet consectetur dipisicing elit. Animi, illo ipsum accusamus mollitiaet,ipsam el eaque at quisquam magnam incidunt amet consectetur praesentium aperiam,reprehenderit quaerat iste nam porro.</p>
</div>
<div class="thoi_gian">
<h4>
Tháng 1 Năm 2020
</h4>
</div>
</li>
<!-- Kết thúc nội dung cho timeline thứ 1--> <!--Nội dung cho timeline thứ 2-->
<li>
<div class="noi_dung">
<h3>Thông Tin Timeline 2</h3>
<p>Lorem ipsum dolor sit amet consectetur dipisicing elit. Animi, illo ipsum accusamus mollitiaet,ipsam el eaque at quisquam magnam incidunt amet consectetur praesentium eriam,reprehenderit quaerat iste nam porro.</p>
</div>
<div class="thoi_gian">
<h4>
Tháng 2 Năm 2020
</h4>
</div>
</li>
<!-- Kết thúc nội dung cho timeline thứ 2--> <!--Nội dung cho timeline thứ 3-->
<li>
<div class="noi_dung">...</div>
</li>
<!-- Kết thúc nội dung cho timeline thứ 3--> <!--Nội dung cho timeline thứ 4-->
<li>
<div class="noi_dung">...</div>
</li>
<!-- Kết thúc nội dung cho timeline thứ 4--> <!-- Nội dung cho timeline thứ 5-->
<li>
<div class="noi_dung">...</div>
</li>
<!-- Kết thúc nội dung cho timeline thứ 5--> <div style="clear:both"></div>
</ul>
</div>
Thêm Các Phần Tử HTML và CSS Cho Timeline Bây giờ chúng ta sẽ đi vào thêm các phần tử HTML cần thiết cho timeline thông qua đoạn mã sau nhé: Ở đoạn mã trên mọi thành phần trong thẻ div có class noi_dung đều giống nhau nên mình sẽ ghi tắt bằng dấu ... Sau khi đã tạo xong bộ khung cho vertical timline thì bước tiếp theo bạn và mình sẽ sử dụng một số thuộc tính CSS để xác định vị trí, font chữ... cho nó thông qua đoạn mã bên dưới nhé: CSS body{ margin: 0; padding: 0; font-family: 'Roboto', sans-serif; }.timeline{ position: relative; margin: 50px auto; padding: 40px 0; width: 1000px; box-sizing: border-box; }.timeline ul { margin: 0; padding: 0; }.timeline ul li{ line-height: normal; position: relative; width: 50%; padding: 20px 40px; box-sizing: border-box; list-style: none; } Và kết quả bạn xem hình ảnh ở bên dưới nhé: Thiết Kế Timeline Cơ Bản Bây giờ chúng ta sẽ đi vào thêm các phần tử HTML cần thiết cho timeline thông qua đoạn mã sau nhé:/*Tạo đường thẳng cho mốc thời gian*/
.timeline:before{
content: '';
position: absolute;
left: 50%;
width: 2px;
height: 100%;
background: #c5c5c5;
}
/*Sắp xếp phần tử lẻ nằm bên trái*/
.timeline ul li:nth-child(odd){
float: left;
text-align: right;
clear: both;
}
/*Sắp xếp phần tử chẳn nằm bên phải*/
.timeline ul li:nth-child(even){
float: right;
text-align: left;
clear: both;
}
.noi_dung{
padding-bottom: 20px;
}
Ở đoạn mã trên mọi thành phần trong thẻ div có class noi_dung đều giống nhau nên mình sẽ ghi tắt bằng dấu ... Sau khi đã tạo xong bộ khung cho vertical timline thì bước tiếp theo bạn và mình sẽ sử dụng một số thuộc tính CSS để xác định vị trí, font chữ... cho nó thông qua đoạn mã bên dưới nhé:
CSSbody{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width: 1000px;
box-sizing: border-box;
}
.timeline ul {
margin: 0;
padding: 0;
}
.timeline ul li{
line-height: normal;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
list-style: none;
}
Bây giờ chúng ta sẽ đi vào thêm các phần tử HTML cần thiết cho timeline thông qua đoạn mã sau nhé:.timeline ul li:nth-child(odd):before{
content: '';
position: absolute;
top: 24px;
right: -6px;
width: 10px;
height: 10px;
background: rgba(97, 123, 227, 1);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(97, 123, 227, 0.2);
}
.timeline ul li:nth-child(even):before{
content: '';
position: absolute;
top: 24px;
left: -4px;
width: 10px;
height: 10px;
background: rgba(97, 123, 227, 1);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(97, 123, 227, 0.2);
}
Ở đoạn mã trên mọi thành phần trong thẻ div có class noi_dung đều giống nhau nên mình sẽ ghi tắt bằng dấu ... Sau khi đã tạo xong bộ khung cho vertical timline thì bước tiếp theo bạn và mình sẽ sử dụng một số thuộc tính CSS để xác định vị trí, font chữ... cho nó thông qua đoạn mã bên dưới nhé: CSSbody{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width: 1000px;
box-sizing: border-box;
}
.timeline ul {
margin: 0;
padding: 0;
}
.timeline ul li{
line-height: normal;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
list-style: none;
}
Bây giờ chúng ta sẽ đi vào thêm các phần tử HTML cần thiết cho timeline thông qua đoạn mã sau nhé:.timeline ul li h3{
margin: 0;
padding: 0;
font-weight: 500;
color: rgba(97, 123, 227, 1);
}
.timeline ul li p{
margin: 10px 0 0;
padding: 0;
}
.timeline ul li .thoi_gian h4{
margin: 0;
padding: 0;
font-size: 14px;
}
.timeline ul li:nth-child(odd) .thoi_gian{
position: absolute;
top: 12px;
right: -165px;
margin: 0;
padding: 8px 16px;
background: rgba(97, 123, 227, 1);
color: #fff;
border-radius: 18px;
box-shadow: 0 0 0 3px rgba(97, 123, 227, 0.4);
}
.timeline ul li:nth-child(even) .thoi_gian{
position: absolute;
top: 12px;
left: -165px;
margin: 0;
padding: 8px 16px;
background: rgba(97, 123, 227, 1);
color: #fff;
border-radius: 18px;
box-shadow: 0 0 0 3px rgba(97, 123, 227, 0.4);
}
Ở đoạn mã trên mọi thành phần trong thẻ div có class noi_dung đều giống nhau nên mình sẽ ghi tắt bằng dấu ... Sau khi đã tạo xong bộ khung cho vertical timline thì bước tiếp theo bạn và mình sẽ sử dụng một số thuộc tính CSS để xác định vị trí, font chữ... cho nó thông qua đoạn mã bên dưới nhé: CSS body{
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width: 1000px;
box-sizing: border-box;
}
.timeline ul {
margin: 0;
padding: 0;
}
.timeline ul li{
line-height: normal;
position: relative;
width: 50%;
padding: 20px 40px;
box-sizing: border-box;
list-style: none;
}
Và kết quả bạn xem hình ảnh ở bên dưới nhé: Thiết Kế Timeline Cơ Bản Thông thường khi thiết kế một timeline thì sẽ nó sẽ có một đường thẳng để hiển thị mốc thời gian với từng nội dung của sự kiện tương ứng. Nội dung của từng thời gian cũng được sắp xếp xen kẽ để người dùng có thể dễ dàng đọc và nắm rõ hơn. | 
