当前位置:Gxlcms > css > 纯CSS如何实现柱形图效果?(代码示例)

纯CSS如何实现柱形图效果?(代码示例)

时间:2021-07-01 10:21:17 帮助过:57人阅读

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

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

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

2.png

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

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

  1. .chart {
  2. list-style: none;
  3. font-family: '宋体';
  4. font-size: 14px;
  5. border: 1px solid #ccc;
  6. margin: 0;
  7. padding: 5px;
  8. background:#F2F1D7;
  9. }
  10. .chart li {
  11. width:400px;
  12. background:#DDF3FF;
  13. }

运行代码:

  1. <style type="text/css">
  2. .chart {
  3. list-style: none;
  4. font-family: '宋体';
  5. font-size: 14px;
  6. border: 1px solid #ccc;
  7. margin: 0;
  8. padding: 5px;
  9. background:#F2F1D7;
  10. }
  11. .chart li {
  12. width:400px;
  13. background:#DDF3FF;
  14. }
  15. </style>
  16. <ul class="chart">
  17. <li><em>使命召唤</em><span >: </span><strong>35%</strong></li>
  18. <li><em>机器战争</em><span >: </span><strong>40%</strong></li>
  19. <li><em>CS</em><span >: </span><strong>87%</strong></li>
  20. <li><em>光环</em><span >: </span><strong>45%</strong></li>
  21. <li><em>半条命</em><span >: </span><strong>23%</strong></li>
  22. </ul>

2.png

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

1、把li的display变成inline,

2、把li变成浮动元素。

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

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

  1. .chart {
  2. list-style: none;
  3. font-family: '宋体';
  4. font-size: 14px;
  5. border: 1px solid #ccc;
  6. margin: 0;
  7. padding: 5px;
  8. background:#F2F1D7;
  9. float:left;
  10. }
  11. .chart li {
  12. width:70px;
  13. height:300px;
  14. float:left;
  15. background:#DDF3FF;
  16. border:1px solid red;
  17. }

运行代码:

  1. <style type="text/css">
  2. .chart {
  3. list-style: none;
  4. font-family: '宋体';
  5. font-size: 14px;
  6. border: 1px solid #ccc;
  7. margin: 0;
  8. padding: 5px;
  9. background:#F2F1D7;
  10. float:left;
  11. }
  12. .chart li {
  13. width:70px;
  14. height:300px;
  15. float:left;
  16. background:#DDF3FF;
  17. border:1px solid red;
  18. }
  19. </style>
  20. <script type="text/javascript">
  21. </script>
  22. <title>非法修改button的onclick事件</title>
  23. </head>
  24. <body>
  25. <ul class="chart">
  26. <li><em>使命召唤</em><span ></span><strong>35%</strong></li>
  27. <li><em>机器战争</em><span ></span><strong>40%</strong></li>
  28. <li><em>CS</em><span ></span><strong>87%</strong></li>
  29. <li><em>光环</em><span ></span><strong>45%</strong></li>
  30. <li><em>半条命</em><span ></span><strong>23%</strong></li>
  31. </ul>

3.png

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

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

  1. .chart {
  2. list-style: none;
  3. font-family: '宋体';
  4. font-size: 14px;
  5. border: 1px solid #ccc;
  6. margin: 0;
  7. padding: 5px;
  8. background:#F2F1D7;
  9. float:left;
  10. }
  11. .chart li {
  12. width:70px;
  13. height:300px;
  14. float:left;
  15. background:#DDF3FF;
  16. border:1px solid red;
  17. }
  18. .chart li em ,
  19. .chart li span ,
  20. .chart li strong {
  21. display:block;
  22. }

运行代码:

  1. <style type="text/css">
  2. .chart {
  3. list-style: none;
  4. font-family: '宋体';
  5. font-size: 14px;
  6. border: 1px solid #ccc;
  7. margin: 0;
  8. padding: 5px;
  9. background:#F2F1D7;
  10. float:left;
  11. }
  12. .chart li {
  13. width:70px;
  14. height:300px;
  15. float:left;
  16. background:#DDF3FF;
  17. border:1px solid red;
  18. }
  19. .chart li em ,
  20. .chart li span ,
  21. .chart li strong {
  22. display:block;
  23. }
  24. </style>
  25. <ul class="chart">
  26. <li><em>使命召唤</em><span></span><strong>35%</strong></li>
  27. <li><em>机器战争</em><span></span><strong>40%</strong></li>
  28. <li><em>CS</em><span></span><strong>87%</strong></li>
  29. <li><em>光环</em><span></span><strong>45%</strong></li>
  30. <li><em>半条命</em><span></span><strong>23%</strong></li>
  31. </ul>

4.png

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

  1. .chart {
  2. list-style: none;
  3. font-family: '宋体';
  4. font-size: 14px;
  5. border: 1px solid #ccc;
  6. margin: 0;
  7. padding: 5px;
  8. background:#F2F1D7;
  9. float:left;
  10. }
  11. .chart li {
  12. width:70px;
  13. height:300px;
  14. float:left;
  15. background:#DDF3FF;
  16. border:1px solid red;
  17. }
  18. .chart li em {
  19. display:block;
  20. height:20px;
  21. text-align:center;
  22. }
  23. .chart li span {
  24. display:block;
  25. background:#F1FAFA;
  26. height:260px;
  27. }
  28. .chart li strong {
  29. display:block;
  30. height:20px;
  31. text-align:center;
  32. }

运行代码:

  1. <style type="text/css">
  2. .chart {
  3. list-style: none;
  4. font-family: '宋体';
  5. font-size: 14px;
  6. border: 1px solid #ccc;
  7. margin: 0;
  8. padding: 5px;
  9. background:#F2F1D7;
  10. float:left;
  11. }
  12. .chart li {
  13. width:70px;
  14. height:300px;
  15. float:left;
  16. background:#DDF3FF;
  17. border:1px solid red;
  18. }
  19. .chart li em {
  20. display:block;
  21. height:20px;
  22. text-align:center;
  23. }
  24. .chart li span {
  25. display:block;
  26. background:#F1FAFA;
  27. height:260px;
  28. }
  29. .chart li strong {
  30. display:block;
  31. height:20px;
  32. text-align:center;
  33. }
  34. </style>
  35. <ul class="chart">
  36. <li><em>使命召唤</em><span></span><strong>35%</strong></li>
  37. <li><em>机器战争</em><span></span><strong>40%</strong></li>
  38. <li><em>CS</em><span></span><strong>87%</strong></li>
  39. <li><em>光环</em><span></span><strong>45%</strong></li>
  40. <li><em>半条命</em><span></span><strong>23%</strong></li>
  41. </ul>

5.png

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

  1. .chart {
  2. list-style: none;
  3. font-family: '宋体';
  4. font-size: 14px;
  5. border: 1px solid #ccc;
  6. margin: 0;
  7. padding: 5px;
  8. background:#F2F1D7;
  9. float:left;
  10. }
  11. .chart li {
  12. width:70px;
  13. height:140px;
  14. float:left;
  15. border:1px solid red;
  16. background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
  17. }
  18. .chart li em, .chart li span,.chart li strong {
  19. display:block;
  20. height:20px;
  21. text-align:center;
  22. }
  23. .chart li em, .chart li strong{
  24. background: #DDF3FF;
  25. }
  26. .chart li span {
  27. height:100px;
  28. }

运行代码:

  1. <style type="text/css">
  2. .chart {
  3. list-style: none;
  4. font-family: '宋体';
  5. font-size: 14px;
  6. border: 1px solid #ccc;
  7. margin: 0;
  8. padding: 5px;
  9. background:#F2F1D7;
  10. float:left;
  11. }
  12. .chart li {
  13. width:70px;
  14. height:140px;
  15. float:left;
  16. border:1px solid red;
  17. background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
  18. }
  19. .chart li em, .chart li span,.chart li strong {
  20. display:block;
  21. height:20px;
  22. text-align:center;
  23. }
  24. .chart li em, .chart li strong{
  25. background: #DDF3FF;
  26. }
  27. .chart li span {
  28. height:100px;
  29. }
  30. </style>
  31. <ul class="chart">
  32. <li><em>使命召唤</em><span></span><strong>35%</strong></li>
  33. <li><em>机器战争</em><span></span><strong>40%</strong></li>
  34. <li><em>CS</em><span></span><strong>87%</strong></li>
  35. <li><em>光环</em><span></span><strong>45%</strong></li>
  36. <li><em>半条命</em><span></span><strong>23%</strong></li>
  37. </ul>

6.png

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

  1. .chart {
  2. list-style: none;
  3. font-family: '宋体';
  4. font-size: 14px;
  5. border: 1px solid #ccc;
  6. margin: 0;
  7. padding: 5px;
  8. background:#F2F1D7;
  9. float:left;
  10. }
  11. .chart li {
  12. width:70px;
  13. height:140px;
  14. float:left;
  15. background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
  16. }
  17. .chart li em, .chart li span,.chart li strong {
  18. display:block;
  19. height:20px;
  20. text-align:center;
  21. background: #DDF3FF;
  22. }
  23. .chart li span {
  24. height:100px;
  25. background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg) no-repeat;
  26. }
  27. <ul class="chart">
  28. <li><em>使命召唤</em><span style="background-position: center -35px"></span><strong>35%</strong></li>
  29. <li><em>机器战争</em><span style="background-position: center -40px"></span><strong>40%</strong></li>
  30. <li><em>CS</em><span style="background-position: center -87px"></span><strong>87%</strong></li>
  31. <li><em>光环</em><span style="background-position: center -45px"></span><strong>45%</strong></li>
  32. <li><em>半条命</em><span style="background-position: center -23px"></span><strong>23%</strong></li>
  33. </ul>

运行代码:

  1. <style type="text/css">
  2. .chart {
  3. list-style: none;
  4. font-family: '宋体';
  5. font-size: 14px;
  6. border: 1px solid #ccc;
  7. margin: 0;
  8. padding: 5px;
  9. background:#F2F1D7;
  10. float:left;
  11. }
  12. .chart li {
  13. width:70px;
  14. height:140px;
  15. float:left;
  16. background:#DDF3FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_pillar.gif) center center repeat-y;
  17. }
  18. .chart li em, .chart li span,.chart li strong {
  19. display:block;
  20. height:20px;
  21. text-align:center;
  22. }
  23. .chart li em, .chart li strong{
  24. background: #DDF3FF;
  25. }
  26. .chart li span {
  27. height:100px;
  28. background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/202680/o_mask.jpg) no-repeat;
  29. }
  30. </style>
  31. <ul class="chart">
  32. <li><em>使命召唤</em><span style="background-position: center -35px"></span><strong>35%</strong></li>
  33. <li><em>机器战争</em><span style="background-position: center -40px"></span><strong>40%</strong></li>
  34. <li><em>CS</em><span style="background-position: center -87px"></span><strong>87%</strong></li>
  35. <li><em>光环</em><span style="background-position: center -45px"></span><strong>45%</strong></li>
  36. <li><em>半条命</em><span style="background-position: center -23px"></span><strong>23%</strong></li>
  37. </ul>

7.png

以上就是纯CSS如何实现柱形图效果?(代码示例)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行