css图表
This is an example of a very simple CSS + one tiny image chart. The result will look like this:
这是一个非常简单CSS +一个小图像图表的示例。 结果将如下所示:
Insert the follwoing style into the head of your html (or add it to your existing CSS):
将以下样式插入html的头部(或将其添加到现有CSS):
<style>
.container{
width:300px;
font-family: Arial;
}
.record{
float: left;
width: 100%;
border: 1px solid #ccc;
background-color: #f0f0f0;
margin-bottom: 2px;
-moz-border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
}
.bar {
background: transparent url(gradient.png) repeat-x top left;
float: left;
clear: left;
height: 30px;
}
.bar span{
font-size: 12px;
font-weight: bold;
color: #fff;
float: left;
margin-left: 5px;
margin-top: 7px;
}
.p{
padding-top: 3px;
float: right;
color: #6D8591;
clear: right;
font-size: 12px;
font-weight: bold;
height: 25px;
}
.p span{
font-size: 12px;
font-weight: bold;
float: left;
margin-right: 5px;
margin-top: 5px;
}
</style>
First, we create a container that will hold all the chart with its records. The width of that can be adapted to your needs as we will define the width of each record as a percentage. You can use this very nicely if you have some kind of dynamic content:
首先,我们创建一个包含所有图表及其记录的容器。 宽度可以根据您的需要进行调整,因为我们将每个记录的宽度定义为百分比。 如果您具有某种动态内容,则可以很好地使用它:
<div class="container">
<div class="record"><div class="bar" style="width:55%;"><span>Mozilla</span></div><div class="p"><span>55%</span></div></div>
<div class="record"><div class="bar" style="width:30%;"><span>IE</span></div><div class="p"><span>30%</span></div></div>
<div class="record"><div class="bar" style="width:22%;"><span>Safari</span></div><div class="p"><span>22%</span></div></div>
<div class="record"><div class="bar" style="width:20%;"><span>Opera</span></div><div class="p"><span>20%</span></div></div>
</div>
The image of the gradient is the following:
渐变的图像如下:
Unfortunately, the rounded borders don’t work in IE, but anyway, it also looks nice without 🙂
不幸的是,圆角边框在IE中不起作用,但是无论如何,如果没有it,它看起来也不错
翻译自: https://tympanus.net/codrops/2009/08/27/simple-css-chart-for-dynamic-content/
css图表