html5 css3制作柱形图,一步一步教你实现纯CSS的柱形图
烈火网教程 CSS在处理排版之强大,没有做不到,只有想不到。下面我们将一同实现一个柱状图。先打好一个具体的框架。我们利用无序列表做整体,里面的东西我们根本选择内联无素span,strong,em来填充。
使命召唤:35%
机器战争:40%
CS:87%
光环:45%
半条命:23%
提示:可修改后代码再运行!
使命召唤:35%
机器战争:40%
CS:87%
光环:45%
半条命:23%
解释一下,ul里面的每一个li就代表我们要统计的内容,span为柱身,em为统计项的名字,strong为统计数值。我们可以添加一些背景颜色来区分他们。#p#副标题#e#
使命召唤:35%
机器战争:40%
CS:87%
光环:45%
半条命:23%
提示:可修改后代码再运行!
.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;
}
#p#副标题#e# 但怎样把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;
}
非法修改button的onclick事件
使命召唤35%
机器战争40%
CS87%
光环45%
半条命23%
提示:可修改后代码再运行!
#p#副标题#e# 接着我们要差开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;
}
使命召唤35%
机器战争40%
CS87%
光环45%
半条命23%
提示:可修改后代码再运行!
#p#副标题#e# 接着我们把柱子占的空间突现出来,并把相关的东西居中对齐一下。
.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;
}
使命召唤35%
机器战争40%
CS87%
光环45%
半条命23%
提示:可修改后代码再运行!
#p#副标题#e# 然后我们为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://www.veryhuo.com/uploads/allimg/090807/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;
}
使命召唤35%
机器战争40%
CS87%
光环45%
半条命23%
提示:可修改后代码再运行!
#p#副标题#e# 接着我们在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://www.veryhuo.com/uploads/allimg/090807/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://www.veryhuo.com/uploads/allimg/090807/o_mask.jpg) no-repeat;
}
使命召唤35%
机器战争40%
CS87%
光环45%
半条命23%
使命召唤35%
机器战争40%
CS87%
光环45%
半条命23%
提示:可修改后代码再运行!
html5 css3制作柱形图,一步一步教你实现纯CSS的柱形图相关推荐
- html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
原标题:9款用HTML5/CSS3制作的动物.人物动画 今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. ...
- html 动物特效,分享9款用HTML5/CSS3制作的动物人物动画,
分享9款用HTML5/CSS3制作的动物人物动画, 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canv ...
- 9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分 ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTY ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCT ...
- 分享9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分 ...
- html插图动物主题代码,分享9款用HTML5/CSS3制作的动物、人物动画
本文作者html5tricks,转载请注明出处 今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过 1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱 ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
最新文章
- 【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能
- python调用c静态库,静态库(.lib)到Python项目
- ×××生成算法的分析
- python学习笔记四-列表
- 【注意点分析】1016 Phone Bills (25 分)
- java 前言中不允许有内容_解析xml字符串时报“前言中不允许有内容”错误。
- 如何用Java编写类似C的Sizeof函数
- scrapy startproject【学习笔记02】
- 使用python来构造有向随机网络
- 智能手机RAM和ROM的区别以及SD卡的作用
- Effective C++(9) 构造函数调用virtual函数会发生什么
- smtp 邮件发送 附带ssl版本
- DOTween Sequence的使用
- RTP/RTCP/RTSP/SIP/SDP 关系
- QT 跨平台 代码框架
- STM32驱动模数转换芯片ADS1120(PT100铂电阻测温度)第2篇
- 基尼系数,省级层面、地级市层面、Dagum1997方法,整理好的面板数据
- LCD12864液晶显示屏工作原理是什么呢?
- 企业中台最佳实践--阿里数据中台最佳实践(九)
- 宜信支付结算账户系统浅析
热门文章
- 大数据去重解决方案总结
- disallow php,在robots.txt中Disallow: /abc和Disallow: /abc/的区别
- 上海/北京内推 | 小米相机部视频算法组招聘视觉图像算法工程师
- php搭建aria2,CentOS vps安装aria2 + ariaNg + h5ai搭建下载服务器
- 区块链运作机制_区块链如何运作? 铂 4
- 数字图像处理实验之伽马变换
- 我的2017——作为一名程序员,我重新思考了我生活的目标
- chrome浏览器主页被劫持为hao123
- 计算机中没有汉字输入,电脑没有了输入法无法输入汉字,是为什么??
- 【生产调度】基于Harmony Search (HSPMS) 和 Shuffled Complex Evolution (SCEPMS) 实现并行机器调度附matlab代码