Step by step teach you how to implement the bar chart of pure CSS

CSS is powerful in the Process of typographical editing. Below we will implement a bar chart together. First, build a specific framework. We use the unordered list as a whole, and we choose inline nonprime span, strong, and em to fill in the content.

<Ul class = "chart"> <li> <em> Call of Duty </em> <span>: </span> <strong> 35% </strong> </li> <em> machine war </em> <span>: </span> <strong> 40% </strong> </li> <em> CS </em> <span>: </span> <strong> 87% </strong> </li> <em> halo </em> <span>: </span> <strong> 45% </strong> </li> <em> half life </em> <span>: </span> <strong> 23% </strong> </li> </ul>

Tip: the code can be modified before running!

<Ul class = "chart"> <Li> <em> Call of Duty </em> <span>: </span> <strong> 35% </strong> </li> <Li> <em> machine war </em> <span >:</span> <strong> 40% </strong> </li> <Li> <em> CS </em> <span >:</span> <strong> 87% </strong> </li> <Li> <em> halo </em> <span >:</span> <strong> 45% </strong> </li> <Li> <em> half-lived </em> <span >:</span> <strong> 23% </strong> </li> </Ul>

To explain, every li in ul represents the content to be counted. span is the column body, em is the name of the statistical item, and strong is the statistical value. We can add some background colors to distinguish them.

• 7 pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• Next Page