📜  如何使用 CSS 创建时间轴?

📅  最后修改于: 2021-10-31 05:29:53             🧑  作者: Mango

我们可以使用一些基本的 HTML 和 CSS 轻松创建时间线。 HTML 代码用于创建时间线的基本结构,CSS 代码用于设置样式。

HTML 代码:在本节中,我们将创建时间线的结构。我们的结构将包括四个事件。

    脚步:

  • 使用类 main-container 创建一个 div 元素。
  • 在我们的主容器中,使用类 text-wrapper 创建另外四个 div。
  • 在每个带有 class text-wrapper 的 div 中包含另一个带有 class 内容的 div,并在其中包含一个 h3 和 p 标签。

示例: HTML 代码




 
    
                 
                         
                

one

                

Some stuff

            
        
                 
                         
                

two

                

Some stuff

            
        
                 
                         
                

three

                

Some Stuff

            
        
                 
                         
                

four

                

Some stuff

            
        
    

CSS 代码:我们将使用 CSS 为我们的时间线提供一些结构并设置事件的位置。


完整代码:




  


 
    
                 
                         
                

one

                

Some stuff

            
        
                 
                         
                

two

                

Some stuff

            
        
                 
                         
                

three

                

Some Stuff

            
        
                 
                         
                

four

                

Some stuff

            
        
    

输出: