HTML5 + CSS3 implements a responsive vertical timeline, html5css3

Source: Internet
Author: User

HTML5 + CSS3 implements a responsive vertical timeline, html5css3

The webpage timeline is generally used to show events that take time as the main line, such as the company's common development history of Enterprise websites. This article will introduce you to a beautiful vertical timeline Based on HTML5 and CSS3, which can respond to page layout and is suitable for PC and mobile phone WEB applications developed by html5.


We use the HTML5 tag <section>. All content in the timeline includes the title, Introduction, time, and image. in the DIV of cd-timeline-block, multiple divs form a sequence and place these divs in <section>. Note that you need your browser to support HTML5 and css3.

<Section id = "cd-timeline" class = "cd-container"> <div class = "cd-timeline-block"> <div class = "cd-timeline-img cd -picture ">  </div> <div class =" cd-timeline-content "> 

In this example, svg images are used as icons. You can also convert them to png and gif images.


We use the before pseudo class to create a vertical line before the timeline # cd-timeline. The content of each node in the timeline is based on this vertical line.

#cd-timeline {  position: relative;  padding: 2em 0;  margin-top: 2em;  margin-bottom: 2em;}#cd-timeline::before {  content: '';  position: absolute;  top: 0;  left: 18px;  height: 100%;  width: 4px;  background: #d7e4ed;}

Okay. Next we need to adjust the timeline layout based on the size of the browser window. When the browser window is very large, the content of each node in the timeline is distributed on both sides of the vertical line (center vertical line). When the browser window is small enough, such as a mobile phone or an iPad vertical screen, the content of each node in the timeline is arranged on the right side of the vertical line (vertical line to the left), which is commonly known as a responsive layout.

.cd-timeline-block {  position: relative;  margin: 2em 0;}.cd-timeline-block:after {  content: "";  display: table;  clear: both;}.cd-timeline-block:first-child {  margin-top: 0;}.cd-timeline-block:last-child {  margin-bottom: 0;}@media only screen and (min-width: 1170px) {  .cd-timeline-block:nth-child(even) .cd-timeline-content {    float: right;  }  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {    top: 24px;    left: auto;    right: 100%;    border-color: transparent;    border-right-color: white;  }  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {    float: right;  }  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {    left: auto;    right: 122%;    text-align: right;  }}

In CSS3, @ media can be used to determine the screen size of a device and perform different css styles based on different sizes. In the hosts file. Of course, you can also use JS and CSS3 on the basis of this example to add some transition animations to the timeline, and the effect may be better.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.