介绍 & lt; ul类=癱hart"比;
& lt; li> & lt; em>使命召唤& lt;/em> & lt; span>: & lt;/span> & lt; strong> 35% & lt;/strong> & lt;/li>
& lt; li> & lt; em>机器战争& lt;/em> & lt; span>: & lt;/span> & lt; strong> 40% & lt;/strong> & lt;/li>
& lt; li> & lt; em> CS & lt; span>: & lt;/span> & lt; strong> 87% & lt;/strong> & lt;/li>
& lt; li> & lt; em>光环& lt;/em> & lt; span>: & lt;/span> & lt; strong> 45% & lt;/strong> & lt;/li>
& lt; li> & lt; em>半条命& lt;/em> & lt; span>: & lt;/span> & lt; strong> 23% & lt;/strong> & lt;/li>
& lt;/ul> 。图{
list-style:没有;
字体类型:& # 39;宋体& # 39;;
字体大小:14 px;
边界:1 px固体# ccc;
保证金:0;
填充:5 px;
背景:# F2F1D7;
}
李.chart {
宽度:400 px;
背景:# DDF3FF;
} & lt;风格类型=拔谋?css"比;
.chart {
list-style:没有;
字体类型:& # 39;宋体& # 39;;
字体大小:14 px;
边界:1 px固体# ccc;
保证金:0;
填充:5 px;
背景:# F2F1D7;
}
李.chart {
宽度:400 px;
背景:# DDF3FF;
}
& lt;/style>
& lt; ul类=癱hart"祝辞
& lt; li> & lt; em>使命召唤& lt;/em> & lt;跨越祝辞:& lt;/span> & lt; strong> 35% & lt;/strong> & lt;/li>
& lt; li> & lt; em>机器战争& lt;/em> & lt;跨越祝辞:& lt;/span> & lt; strong> 40% & lt;/strong> & lt;/li>
& lt; li> & lt; em> CS & lt;跨越祝辞:& lt;/span> & lt; strong> 87% & lt;/strong> & lt;/li>
& lt; li> & lt; em>光环& lt;/em> & lt;跨越祝辞:& lt;/span> & lt; strong> 45% & lt;/strong> & lt;/li>
& lt; li> & lt; em>半条命& lt;/em> & lt;跨越祝辞:& lt;/span> & lt; strong> 23% & lt;/strong> & lt;/li>
& lt;/ul> 。图{
list-style:没有;
字体类型:& # 39;宋体& # 39;;
字体大小:14 px;
边界:1 px固体# ccc;
保证金:0;
填充:5 px;
背景:# F2F1D7;
浮:左;
}
李.chart {
宽度:70 px;
身高:300 px;
浮:左;
背景:# DDF3FF;
边界:1 px固体红;
} & lt;风格类型=拔谋?css"比;
.chart {
list-style:没有;
字体类型:& # 39;宋体& # 39;;
字体大小:14 px;
边界:1 px固体# ccc;
保证金:0;
填充:5 px;
背景:# F2F1D7;
浮:左;
}
李.chart {
宽度:70 px;
身高:300 px;
浮:左;
背景:# DDF3FF;
边界:1 px固体红;
}
& lt;/style>
& lt;脚本类型=拔谋?javascript"比;
& lt;/script>
& lt; title>非法修改按钮的onclick事件& lt;/title>
& lt;/head>
& lt; body>
& lt; ul类=癱hart"祝辞
& lt; li> & lt; em>使命召唤& lt;/em> & lt;跨度祝辞& lt;/span> & lt; strong> 35% & lt;/strong> & lt;/li>
& lt; li> & lt; em>机器战争& lt;/em> & lt;跨度祝辞& lt;/span> & lt; strong> 40% & lt;/strong> & lt;/li>
& lt; li> & lt; em> CS
小编给大家分享一下CSS实现柱形图效果的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
CSS在处理排版之强大,没有做不到,只有想不到。下面我们将一同实现一个柱状图。
先打好一个具体的框架。我们利用无序列表做整体,里面的东西我们根本选择内联无素,强劲,新兴市场来填充。
解释一下,ul里面的每一个李就代表我们要统计的内容,跨度为柱身,em为统计项的名字,强为统计数值。我们可以添加一些背景颜色来区分他们。
运行代码:
但怎样把李弄成柱状呢?我们首先把李弄成并排显示,要达到这种效果,我们有两个方法:1、把李的显示变成内联,2,把李变成浮动元素。估量一翻,选择了后者,因为内联元素的盒子模型是难以控制的,保证金与填充的计算会变得很复杂,既然选择后者,我们必须面对一个情况,就是浮动溢出了。对策是父元素也变成浮动元素。浮动容器会向内收缩,自适应子元素的高度与宽度。也就是说,我们专注于李的设计就可以了!为了让李表现得像柱子,我们让它的高比宽长很多,同时为了让大家好辩认每个李的范围,我先给它们加上边框!
运行代码:
