Shulou(Shulou.com)06/01 Report--

This article mainly introduces the pure CSS how to achieve the histogram effect, the article introduces in great detail, has a certain reference value, interested friends must read it!

Call of Duty: 35%

Machine Warfare: 40%

CS:87%

Halo: 45%

Half life: 23%

To explain, each li in ul represents what we want to count. Span is the column, em is the name of the statistical item, and strong is the statistical value. We can add some background colors to distinguish them.

.chart {

List-style:none

Font-family:' Arial'

Font-size:14px

Border:1pxsolid#ccc

Margin:0

Padding:5px

Background:#F2F1D7

}

.chartli {

Width:400px

Background:#DDF3FF

}

Run the code:

.chart {

List-style:none

Font-family:' Arial'

Font-size:14px

Border:1pxsolid#ccc

Margin:0

Padding:5px

Background:#F2F1D7

}

.chartli {

Width:400px

Background:#DDF3FF

}

Call of Duty: 35%

Machine Warfare: 40%

CS:87%

Halo: 45%

Half life: 23%

But how do you turn li into a column? Let's first make the li display side by side. To achieve this effect, we have two ways:

1. Change the display of li into inline

2. Turn li into a floating element.

I chose the latter because the box model of inline elements is difficult to control and the calculation of margin and padding becomes very complex. Since we choose the latter, we have to face a situation, that is, floating overflow.

The countermeasure is that the parent element also becomes a floating element. The floating container shrinks inward, adapting the height and width of the child elements. In other words, we can focus on the design of li! In order to make the li behave like a pillar, we make it much longer in height, ratio and width, and in order to make it easier for everyone to identify the scope of each li, I'll border them first!

.chart {

List-style:none

Font-family:' Arial'

Font-size:14px

Border:1pxsolid#ccc

Margin:0

Padding:5px

Background:#F2F1D7

Float:left

}

.chartli {

Width:70px

Height:300px

Float:left

Background:#DDF3FF

Border:1pxsolidred

}

Run the code:

.chart {

List-style:none

Font-family:' Arial'

Font-size:14px

Border:1pxsolid#ccc

Margin:0

Padding:5px

Background:#F2F1D7

Float:left

}

.chartli {

Width:70px

Height:300px

Float:left

Background:#DDF3FF

Border:1pxsolidred

}

Illegally modify the onclick event of button

Call of Duty 35%

Machine Warfare 40%

CS87%

Halo 45%

Half-life 23%

The above is all the content of this article "how to achieve histogram effect with pure CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.