"CSS 在处理排版之强大，没有做不到，只有想不到。下面我们将一同实现一个柱状图。先打好一个具体的框架。我们利用无序列表做整体，里面的东西我们根本选择内联无素 span，strong，em 来填充。使命召唤 : 35% 机器战争 : 40% CS: 87% 光环 : 45% 半条命 : ...."

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 9 浏览 • 4 个月前

一步步教你实现纯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;
   }

运行代码

但怎样把 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;
}

运行代码

接着我们要差开 li 元素里面的内容，由于它们都是内联元素，因此给他们设高与宽是没有意义，我们得把他们伪装成块元素。这时它们就会各自独占一行。由于我们把 span 中的冒号删除了，里面为空，span 就表现为不占空间，我们可以给它们塞点东西进去，我塞的是 ，当然你们在 textarea 中是看不到的，要利用火狐的查看元素功能才行。(你们自己可以查一下 ， ， ，&emsp; 与 &ensp; 的区别！)

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

运行代码

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

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

运行代码

然后我们为 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;
    }

运行代码

接着我们在 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>

运行代码

======================= 华丽的分界线，与题目无关 ===========================

<head> <script type="text/javascript"> var dataSet = { "最终幻想":95, "白骑士":20, "星之海样":84, "北欧女神":77, "勇者斗恶龙":90, "异度装甲":100, "圣剑传说":68, "影之心":72, "传说系列":85, "失落奥德赛":92, "光明之风":40 } var markPollarChart= function(parent,dataset){var p = document.createElement("div"), builder = []; builder.push("<ul class='chart'>"); for(var i in dataset){builder.push("<li>") ; builder.push(i) ; builder.push("") ; builder.push(dataset[i]) ; builder.push("%</li>") ; } builder.push("</ul>"); p.innerHTML = builder.join(''); parent.insertBefore(p,null); } window.onload = function(){markPollarChart(document.getElementsByTagName("body")[0],dataSet);} </script> <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:75px; 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> <head> <body> </body>

运行代码

一步步教你实现纯CSS的柱形图

如果您觉得此文有帮助，可以打赏点钱给我支付宝 1669866773@qq.com ，或扫描二维码

相关帖子

随便看看

一步步教你实现纯CSS的柱形图