Hướng dẫn tạo timeline html css - tạo dòng thời gian html css

Question

Nội dung chính Show

Cách Tạo Vertical Timeline Bằng HTML CSS
Tạo Cấu Trúc Phần Tử HTML Cho Vertical Timeline
Thêm Các Phần Tử HTML và CSS Cho Timeline
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; }

Cách Tạo Vertical Timeline Bằng HTML CSS

Ngà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

 
 
 
     
     
     Tạo Vertical Timeline

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


    
        
        
            
                Thông Tin Timeline 1

                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.


            
                
                    Tháng 1 Năm 2020
                

            
        
                
        

        
            Thông Tin Timeline 2

            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.

        
        
            
                Tháng 2 Năm 2020
            

        
        

        
        
        

        ...
        

        
        
        

        ...
        

        
       
        

        ...

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é:

Hướng dẫn tạo timeline html css - tạo dòng thời gian html css

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;
 }

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é:

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;
 }

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.

programming html CSS timeline Horizontal CSS timeline vertical Timeline Bootstrap

Hướng dẫn tạo timeline html css - tạo dòng thời gian html css

Cách Tạo Vertical Timeline Bằng HTML CSS

Tạo Cấu Trúc Phần Tử HTML Cho Vertical Timeline

HTML

Thêm Các Phần Tử HTML và CSS Cho Timeline

HTML

Thông Tin Timeline 1

Tháng 1 Năm 2020

Thông Tin Timeline 2

Tháng 2 Năm 2020

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é:

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é:

CSS

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é:

CSS

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é:

Thiết Kế Timeline Cơ Bản

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội