How to realize the effect of column Chart with Pure CSS
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!
