html 水平柱形图,CSS实现柱形图效果的代码示例

使命召唤:35%机器战争:40%CS:87%光环:45%半条命:23%

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

.chart{

list-style:none;

font-family:'宋体';

font-size:14px;

border:1pxsolid#ccc;

margin:0;

padding:5px;

background:#F2F1D7;

}

.chartli{

width:400px;

background:#DDF3FF;

}

运行代码：

.chart{

list-style:none;

font-family:'宋体';

font-size:14px;

border:1pxsolid#ccc;

margin:0;

padding:5px;

background:#F2F1D7;

}

.chartli{

width:400px;

background:#DDF3FF;

}

使命召唤:35%机器战争:40%CS:87%光环:45%半条命:23%

13133049-2b1b4dfe958c026a.png

但怎样把li弄成柱状呢？我们首先把li弄成并排显示，要达到这种效果，我们有两个方法：1、把li的display变成inline，2、把li变成浮动元素。估量一翻，选择了后者，因为内联元素的盒子模型是难以控制的，margin与padding的计算会变得很复杂。既然选择后者，我们必须面对一个情况，就是浮动溢出了。对策是父元素也变成浮动元素。浮动容器会向内收缩，自适应子元素的高度与宽度。也就是说，我们专注于li的设计就可以了！为了让li表现得像柱子，我们让它的高比宽长很多，同时为了让大家好辩认每个li的范围，我先给它们加上边框！

.chart{

list-style:none;

font-family:'宋体';

font-size:14px;

border:1pxsolid#ccc;

margin:0;

padding:5px;

background:#F2F1D7;

float:left;

}

.chartli{

width:70px;

height:300px;

float:left;

background:#DDF3FF;

border:1pxsolidred;

}

运行代码：

.chart{

list-style:none;

font-family:'宋体';

font-size:14px;

border:1pxsolid#ccc;

margin:0;

padding:5px;

background:#F2F1D7;

float:left;

}

.chartli{

width:70px;

height:300px;

float:left;

background:#DDF3FF;

border:1pxsolidred;

}

非法修改button的onclick事件使命召唤35%机器战争40%CS87%光环45%半条命23%

本文转载自中文网

html 水平柱形图,CSS实现柱形图效果的代码示例相关推荐

android 给图片蒙上蒙层_Android 新手引导蒙层效果实现代码示例
先上效果图: 这个效果一开始我是想直接让UI给个切图,后来发现这样不行,适配很差,达不到效果.所以就自己动手写代码,其实思路也很简单:在这个布局的父布局上面再手动添加一个view(通常LinearLa ...
css烟花绽放效果代码,css3+js实现烟花绽放的动画效果（代码示例）
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...
html 点击加号展开代码,纯css实现加号一个的效果（代码示例）
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
css3 烟蚊香_css3+js实现烟花绽放的动画效果（代码示例）
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...
leaflet 实现左卷帘效果（代码示例045）
第045个点击查看专栏目录本示例的目的是介绍演示如何在vue+leaflet中实现左卷帘效果,这里主要引用了leaflet-side-by-side这个插件,直接调用的话,CSS方面有些问题,需要 ...
html中制作烟花的效果代码,css3+js实现烟花绽放的动画效果（代码示例）
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...
php国际象棋棋盘,PHP实现国际象棋棋盘的样式效果（代码示例）
详细内容国际象棋棋盘,相信大家都知道是什么样,那么如果让你用代码来实现这种样式,你会选择用什么代码语言来实现呢?在本篇文章中,我们将给大家介绍用PHP来实现国际象棋棋盘的样式效果方法,非常有趣好玩, ...
HTML和PHP输出国际象棋,PHP实现国际象棋棋盘的样式效果（代码示例）
国际象棋棋盘,相信大家都知道是什么样,那么如果让你用代码来实现这种样式,你会选择用什么代码语言来实现呢?在本篇文章中,我们将给大家介绍用PHP来实现国际象棋棋盘的样式效果方法,非常有趣好玩,感兴趣的朋 ...
棋盘代码_PHP实现国际象棋棋盘的样式效果（代码示例）
国际象棋棋盘,相信大家都知道是什么样,那么如果让你用代码来实现这种样式,你会选择用什么代码语言来实现呢?在本篇文章中,我们将给大家介绍用PHP来实现国际象棋棋盘的样式效果方法,非常有趣好玩,感兴趣的朋 ...
015：vue+openlayers 添加鹰眼效果（代码示例）
第015个点击查看专栏目录本示例的目的是介绍演示如何在openlayers中使添加使用鹰眼控件,呈现鹰眼的效果. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果: ...

html 水平柱形图,CSS实现柱形图效果的代码示例

html 水平柱形图,CSS实现柱形图效果的代码示例相关推荐

最新文章

热门文章