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

纯CSS实现柱形图的更多相关文章

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
用纯css改变下拉列表select框的默认样式（不兼容IE10以下）
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果实例预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
简单而兼容性好的Web自适应高度布局，纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

随机推荐

RadioButtton
activity_radio_button.xml <?xml version="1.0" encoding="utf-8"?> <Relat ...
Centos6.x安装之后的9件事
Centos6.x安装之后的9件事这些不是必须都做的,只不过是我个人的习惯,在此记录一下. 1.修改yum源到国内 CentOS系统更换软件安装源备份你的原镜像文件,以免出错后可以恢复. mv / ...
Python:使用piecewise与curve_fit进行三段拟合
x = np.array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ,11, 12, 13, 14, 15,16,17,18,19,20,21], dtype=float) y = ...
C++ 删除一个字符串中的指定字符
Q:一个数字是以xxx,yyy,zzz的字符串形式存储的,将逗号消去并转化为整数输出方法一:char数组,即定义时s1定义为 char s1[20]的形式: //删除输入字符串中的逗号,并构建新串 ...
Python数据类型的if判断
Python数据类型的if判断 1.字符串判断 # -*- coding: utf-8 -*- ''' @Time : 2021/12/13 15:56 @Author : ziqingbaojian ...
用Assert(断言)封装异常，让代码更优雅(附项目源码)
有关Assert断言大家并不陌生,我们在做单元测试的时候,看业务事务复合预期,我们可以通过断言来校验,断言常用的方法如下: public class Assert { /** * 结果 = 预期则正 ...
C#实现抢红包算法
二倍均值法(公平版) 发出一个固定金额的红包,由若干个人来抢,需要满足哪些规则? 1.所有人抢到金额之和等于红包金额,不能超过,也不能少于. 2.每个人至少抢到一分钱. 3.要保证所有人抢到金额的几率 ...
think php 富框架文本编辑器
商品的详细描述一般都是图文混合.对于图文混合的内容,需要使用富文本编辑器来实现. Ueditor富文本编辑器的下载地址: http://ueditor.baidu.com/website/downlo ...
如何使用 Hexo 搭建个人博客
原文链接什么是 Hexo ? Hexo 是一个简单快速的静态博客框架,可以通过编辑 Markdown 文档生成好看的静态博客. 搭建 Hexo 要求安装 Hexo 十分简单,只需要 Node.js ...
C/C++语言读取SEGY文件（二）
SEGY IO (2D) 本文档将介绍SEGY的读取与写入过程,即SEGY文件的复制,并且在实现过程采用采样点×道数二维数组的形式读写. 新建头文件SegyDataIO2D.h与C++文件SegyDa ...

纯CSS实现柱形图

纯CSS实现柱形图的更多相关文章

随机推荐

热门专题