div+css实现这种柱状图效果要怎么做

发布网友发布时间：2022-04-28 13:18

共5个回答

懂视网时间：2022-04-28 17:39

本篇文章给大家带来的内容是介绍如何用纯CSS实现柱形图效果？（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

我们都知道，CSS在处理排版之强大，没有做不到，只有想不到。下面我们将一同实现一个柱状图。

先打好一个具体的框架。我们利用无序列表做整体，里面的东西我们根本选择内联无素span，strong，em来填充。

 <ul class="chart">
 <li><em>使命召唤</em><span>: </span><strong>35%</strong></li>
 <li><em>机器战争</em><span>: </span><strong>40%</strong></li>
 <li><em>CS</em><span>: </span><strong>87%</strong></li>
 <li><em>光环</em><span>: </span><strong>45%</strong></li>
 <li><em>半条命</em><span>: </span><strong>23%</strong></li>
 </ul>

解释一下，ul里面的每一个li就代表我们要统计的内容，span为柱身，em为统计项的名字，strong为统计数值。我们可以添加一些背景颜色来区分他们。

.chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 }
 
 .chart li {
 width:400px;
 background:#DDF3FF;
 }

运行代码：

 <style type="text/css">
 .chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 }

 .chart li {
 width:400px;
 background:#DDF3FF;
 }
 </style>

 <ul class="chart">
 <li><em>使命召唤</em><span >: </span><strong>35%</strong></li>
 <li><em>机器战争</em><span >: </span><strong>40%</strong></li>
 <li><em>CS</em><span >: </span><strong>87%</strong></li>
 <li><em>光环</em><span >: </span><strong>45%</strong></li>
 <li><em>半条命</em><span >: </span><strong>23%</strong></li>
 </ul>

但怎样把li弄成柱状呢？我们首先把li弄成并排显示，要达到这种效果，我们有两个方法：

1、把li的display变成inline，

2、把li变成浮动元素。

估量一翻，选择了后者，因为内联元素的盒子模型是难以控制的，margin与padding的计算会变得很复杂。既然选择后者，我们必须面对一个情况，就是浮动溢出了。

对策就是父元素也变成浮动元素。浮动容器会向内收缩，自适应子元素的高度与宽度。也就是说，我们专注于li的设计就可以了！为了让li表现得像柱子，我们让它的高比宽长很多，同时为了让大家好辩认每个li的范围，我先给它们加上边框！

.chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
}
 
.chart li {
 width:70px;
 height:300px;
 float:left;
 background:#DDF3FF;
 border:1px solid red;
}

运行代码：

 <style type="text/css">
 .chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
 }

 .chart li {
 width:70px;
 height:300px;
 float:left;
 background:#DDF3FF;
 border:1px solid red;
 }
 </style>
 <script type="text/javascript">

 </script>
 <title>非法修改button的onclick事件</title>
 </head>
 <body>
 <ul class="chart">
 <li><em>使命召唤</em><span ></span><strong>35%</strong></li>
 <li><em>机器战争</em><span ></span><strong>40%</strong></li>
 <li><em>CS</em><span ></span><strong>87%</strong></li>
 <li><em>光环</em><span ></span><strong>45%</strong></li>
 <li><em>半条命</em><span ></span><strong>23%</strong></li>
 </ul>

接着我们要差开li元素里面的内容，由于它们都是内联元素，因此给他们设高与宽是没有意义，我们得把他们伪装成块元素。这时它们就会各自独占一行。

由于我们把span中的冒号删除了，里面为空，span就表现为不占空间，我们可以给它们塞点东西进去，我塞的是，当然你们在textarea中是看不到的，要利用火狐的查看元素功能才行。(你们自己可以查一下，，，?与?的区别！)

.chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
}
 
.chart li {
 width:70px;
 height:300px;
 float:left;
 background:#DDF3FF;
 border:1px solid red;
}
.chart li em ,
.chart li span ,
.chart li strong {
 display:block;
}

运行代码：

 <style type="text/css">
 .chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
 }

 .chart li {
 width:70px;
 height:300px;
 float:left;
 background:#DDF3FF;
 border:1px solid red;
 }
 .chart li em ,
 .chart li span ,
 .chart li strong {
 display:block;
 }
 </style>

 <ul class="chart">
 <li><em>使命召唤</em><span></span><strong>35%</strong></li>
 <li><em>机器战争</em><span></span><strong>40%</strong></li>
 <li><em>CS</em><span></span><strong>87%</strong></li>
 <li><em>光环</em><span></span><strong>45%</strong></li>
 <li><em>半条命</em><span></span><strong>23%</strong></li>
 </ul>

接着我们把柱子占的空间突现出来，并把相关的东西居中对齐一下。

.chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
}
 
.chart li {
 width:70px;
 height:300px;
 float:left;
 background:#DDF3FF;
 border:1px solid red;
}
.chart li em {
 display:block;
 height:20px;
 text-align:center;
}
.chart li span {
 display:block;
 background:#F1FAFA;
 height:260px;
}
.chart li strong {
 display:block;
 height:20px;
 text-align:center;
}

运行代码：

 <style type="text/css">
 .chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
 }

 .chart li {
 width:70px;
 height:300px;
 float:left;
 background:#DDF3FF;
 border:1px solid red;
 }
 .chart li em {
 display:block;
 height:20px;
 text-align:center;
 }
 .chart li span {
 display:block;
 background:#F1FAFA;
 height:260px;
 }
 .chart li strong {
 display:block;
 height:20px;
 text-align:center;
 }
 </style>

 <ul class="chart">
 <li><em>使命召唤</em><span></span><strong>35%</strong></li>
 <li><em>机器战争</em><span></span><strong>40%</strong></li>
 <li><em>CS</em><span></span><strong>87%</strong></li>
 <li><em>光环</em><span></span><strong>45%</strong></li>
 <li><em>半条命</em><span></span><strong>23%</strong></li>
 </ul>

然后我们为li元素添加一张图片，它就是传说的圆柱了，然后用span为作罩遮层，li所在项目的统计是多少，我们就露出多少，为了方便计算，我们把span的高度重设为100px，li的高度相应改为140px。em与strong设置与li相同的背景颜色，遮住柱子的最上面与最下面。

.chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
 }
 .chart li {
 width:70px;
 height:140px;
 float:left;
 border:1px solid red;
 background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
 }
 .chart li em, .chart li span,.chart li strong {
 display:block;
 height:20px;
 text-align:center;
 }
 .chart li em, .chart li strong{
 background: #DDF3FF;
 }
 .chart li span {
 height:100px;
 }

运行代码：

<style type="text/css">
 .chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
 }
 .chart li {
 width:70px;
 height:140px;
 float:left;
 border:1px solid red;
 background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
 }
 .chart li em, .chart li span,.chart li strong {
 display:block;
 height:20px;
 text-align:center;
 }
 .chart li em, .chart li strong{
 background: #DDF3FF;
 }
 .chart li span {
 height:100px;
 }
 </style>

 <ul class="chart">
 <li><em>使命召唤</em><span></span><strong>35%</strong></li>
 <li><em>机器战争</em><span></span><strong>40%</strong></li>
 <li><em>CS</em><span></span><strong>87%</strong></li>
 <li><em>光环</em><span></span><strong>45%</strong></li>
 <li><em>半条命</em><span></span><strong>23%</strong></li>
 </ul>

接着我们在span弄一张背景图片，颜色与li元素的一样，统计数字为多少，我们就向上移多少！为了方便，我们用内联样式设置这个backgroundPositionY数值。最后去掉li元素的边框便大功告成了！

.chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
}
.chart li {
 width:70px;
 height:140px;
 float:left;
 background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
}
.chart li em, .chart li span,.chart li strong {
 display:block;
 height:20px;
 text-align:center;
 background: #DDF3FF;
}
.chart li span {
 height:100px;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg) no-repeat;
}
<ul class="chart">
 <li><em>使命召唤</em><span style="background-position: center -35px"></span><strong>35%</strong></li>
 <li><em>机器战争</em><span style="background-position: center -40px"></span><strong>40%</strong></li>
 <li><em>CS</em><span style="background-position: center -87px"></span><strong>87%</strong></li>
 <li><em>光环</em><span style="background-position: center -45px"></span><strong>45%</strong></li>
 <li><em>半条命</em><span style="background-position: center -23px"></span><strong>23%</strong></li>
 </ul>

运行代码：

 <style type="text/css">
 .chart {
 list-style: none;
 font-family: '宋体';
 font-size: 14px;
 border: 1px solid #ccc;
 margin: 0;
 padding: 5px;
 background:#F2F1D7;
 float:left;
 }
 .chart li {
 width:70px;
 height:140px;
 float:left;
 background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
 }
 .chart li em, .chart li span,.chart li strong {
 display:block;
 height:20px;
 text-align:center;
 }
 .chart li em, .chart li strong{
 background: #DDF3FF;
 }
 .chart li span {
 height:100px;
 background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg) no-repeat;
 }
 </style>

 <ul class="chart">
 <li><em>使命召唤</em><span style="background-position: center -35px"></span><strong>35%</strong></li>
 <li><em>机器战争</em><span style="background-position: center -40px"></span><strong>40%</strong></li>
 <li><em>CS</em><span style="background-position: center -87px"></span><strong>87%</strong></li>
 <li><em>光环</em><span style="background-position: center -45px"></span><strong>45%</strong></li>
 <li><em>半条命</em><span style="background-position: center -23px"></span><strong>23%</strong></li>
 </ul>

热心网友时间：2022-04-28 14:47

做到重下往上排放没办法，要实现则要计算好位置。
为简化柱状图布局计算，需在div2/div3外再套一个div，高度改变需重新计算位置。
好了，一切代码说话：
<script type='text/javascript'>
// 对子div（bar1,bar2,bar3,bar4……）设置新高度
function setBarHeight(obj, nh) {
var oh = obj.currentStyle.height; // 旧高度
obj.style.height = nh; // 设置新高度
var p = obj.parentNode; // 上一层div
var v = parseInt(oh.match(/\d+/)[0]) - nh; //　变化量
var ph = p.currentStyle.bottom; // 上级DIV旧位移
p.style.bottom = ph.replace(/\d+/, function($0) { return parseInt($0) + v }) ; // 定位上一层div
}
</script>
<style type='text/css'>
div#container {width: 600;height: 400;border: thin 1px grey solid; }
div.xbar { float:left; margin-left: 30; width:50; position: relative; bottom:-358;}
div.xbar div { height: 20; overflow: hidden; border: thin 1px grey solid;}
div.b1 { background-color:yellow; }
div.b2 { background-color:lime; }
</style>
<div id='container' >
<div class="xbar">
<div class="b1" id='bar1'>a</div>
<div class="b2" id='bar2'>b</div>
</div>
<div class="xbar">
<div class="b1" id='bar3'>c</div>
<div class="b2" id='bar4'>d</div>
</div>
</div>

热心网友时间：2022-04-28 16:05

呵呵，代码我就不帖了．给你讲讲我的看法吧．
DOM元素是自上而下的．也就是说DIV2的底部如果　有空间，DIV2增加，自然是向下增加．并不会提高DIV3的．所以，关键就是要DIV2底部没有了空间这样才会达到你要的效果．所以要做一个大的容器并使DIV2　margin-bottom:0px；这样只要增加DIV2的高度，应该就能达到向上增加．
只是我的想法，并没去做过．

热心网友时间：2022-04-28 17:40

<div style="width:50px" id="div1">
<div id="div3" style="float:left; background:#FF0; height:20px; width:50px;" > </div>
<div id="div2" style="float:left;background:#00FF00;height:20px;width:50px;"> </div>
</div>
设置浮动就成了.当然你的DIV1的 width 要和里面的一样. 显示的话最外面在弄个DIV就好了

热心网友时间：2022-04-28 19:31

根据div内容,判断宽度并写入css,代码如下:

像这种一般span里面的数据是从数据库读出的。既然SPAN里面有数字。那SPAN的STYLE里面也可以同时加值（或该值的倍数）。。类似<span style = "height:3px(这里面的数字就可以是3的倍数)"。如果不从数据库中读取数据。就需要用JS来实现,给span加上ID，$('#ID').css('height',$('#id').text(...

html制作个人简历代码?

divclass="col-sm-8"align="left" h3class="text-info"项目内容/h3 h2id="car"新能源汽车/h2 h5企业saas工坊/h5 p新能源汽车项目是我们掌握smm框架知识后第一个实战项目,该项目由工坊老师指导下,前后端都由我们个人独立完成的项目。该项目用到了,html5+css3,mysql数据库,spring,mybatis,springmvc框架,aja...

如何制作空间模版~~~200分求教追加至顶

#m_pro div.image ——个人档案中个人头像的显示位置,分为“中,左,右——center,left,right” #m_pro div.act ——操作区——个人介绍和头像的间距 #m_pro div.user ——个人用户名的大小颜色 #m_pro div.desc ——个人简介的大小颜色 #m_pro div.line—— 分界线 #m_pro td #m_pro .photo——...

如何实现禁止弹窗底部页面跟随滚动

方案二就是利用移动端的touch事件Touch对象代表一个触点，可以通过event.touches[0]获取，每个触点包含位置，大小，形状，压力大小，和目标 element属性。{screenX: 511, screenY: 400,//触点相对于屏幕左边沿的Y坐标clientX: 244.37899780273438,

div css js实现弹出框 css怎么给div加边框 divcss布局经典实例 css图片轮播div div css布局 css div网页布局代码 div css制作简单网页用css怎么布局 div+css