Vertical Time Axis HTML

1. Overview

The point of time to show the occurrence of events instead of using table to display a piece of data, can give a clear, at a glance to see what happened, the UI page is also shown so clear. How do I use css+html to make a timeline to show incident points? Let's take a look at the following effect

The timeline that makes that effect shows the event point, and you need to know about it:

1.1. CSS location: Position

1.2, CSS Pseudo-class: After,befault

1.3. CSS Contents: Content

2, CSS in postion

Static Fixed | Relative Value: Static : Default value. No special positioning, objects follow HTML positioning rules Absolute: Drag objects from the document flow, using left, right, top, bottom, and other attributes relative to its closest to one of the most positioned settings of the parent object for absolute positioning. If no such parent object exists, then the body object is based. And its cascade is defined by the Z-index attribute fixed  : not supported. Object positioning is in absolute (absolute) mode. But follow some specifications relative: objects are not stackable, but will be offset from the normal document stream by left, right, top, and bottom properties

Position default is static, absolute is relative to the parent element to absolute positioning, relative is relative to their own to locate. Relative does not detach from the document flow, absolute out of the document stream. That is: the element of relative, although it appears to deviate from its original position on the surface, is actually still unchanged in the document flow. The elements of absolute not only changed position, but also separated from the flow of documents.

Reference: Position:relative and Absolute properties in CSS

2. Pseudo-class and content in CSS

Pseudo-Class in CSS: After,:befault,:first-child,:last-child

The content property is used in conjunction with: Before and: After pseudo-elements to insert a build.

Example: (Insert a link after the a content)

A:after  {  " ("")";  }

: The after selector inserts content after the content of the selected element. Use the Content property to specify what you want to insert.

: The Befault selector inserts content in front of the content of the selected element. Use the Content property to specify what you want to insert

: Last-child selects the last child element belonging to its parent element.

: First-child selects the first child element of its parent element.

Reference: CSS Selector

3. Sample demo download [CSS code analysis, self-understanding. O (∩_∩) o haha ~]

Click to download Demo

Vertical Time Axis HTML