动态内容的简单CSS图表

作者 : MMDer 2021-01-6分类:博客

这是一个非常简单的CSS +一个小图像图表的示例。结果将如下所示:

将以下样式插入html的头部(或将其添加到现有CSS):

.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;
}

首先,我们创建一个包含所有图表及其记录的容器。宽度可以根据您的需要进行调整,因为我们将每个记录的宽度定义为百分比。如果您具有某种动态内容,则可以很好地使用它:

<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>

关于收费
微薄收入,仅用于维持服务器。本站模型区全部免费
关于VIP
VIP可以免费下载。月度、年度vip每天可免费下载9次,应该够用。终身vip每天可下载19次,右侧成为vip
注意,请不要重复点击某个资源的下载按钮,每次点击都会计入次数
资源失效处理
1、如果是蓝奏云,将下载链接中的lanzous换成lanzoux即可
2、如果是百度云失效了,那请点右侧发邮件给客服,或者在评论区指出,也可在菜单栏【有问必答】说明
3、如果是其他原因,请右侧按钮发邮件给我

发表评论