核心属性
list-style-type: none 去除列表元素前面的小黑点
[class^='eje-'] 选择class属性以“eje-”开头的所有元素
border-top: 1px solid #fff 横向坐标轴
content: attr(data-ejeY) 显示HTML标签属性为data-ejeY的值
float: left 使X轴的文字水平排列
:before + background + height 不同高度不同颜色的柱状图
-
<div class="bar-chart-block block">
-
<h2 class='titular'>城市统计</h2>
-
<div class='grafico bar-chart'>
-
<ul class='eje-y'>
-
<li data-ejeY='60'></li>
-
<li data-ejeY='45'></li>
-
<li data-ejeY='30'></li>
-
<li data-ejeY='15'></li>
-
<li data-ejeY='0'></li>
-
</ul>
-
<ul class='eje-x'>
-
<li data-ejeX='37'><i>西安</i></li>
-
<li data-ejeX='56'><i>北京</i></li>
-
<li data-ejeX='25'><i>杭州</i></li>
-
<li data-ejeX='18'><i>海口</i></li>
-
<li data-ejeX='45'><i>上海</i></li>
-
<li data-ejeX='50'><i>广州</i></li>
-
<li data-ejeX='33'><i>成都</i></li>
-
</ul>
-
</div>
-
</div>
-
* {
-
box-sizing: border-box;
-
}
-
ul {
-
list-style-type: none;
-
margin: 0;
-
padding-left: 0;
-
}
-
h2 {
-
font-size: 17px;
-
}
-
h1, h2, p, a, span{
-
color: #fff;
-
}
-
.block {
-
margin: 25px auto;
-
background: #394264;
-
border-radius: 5px;
-
width: 300px;
-
height: 400px;
-
overflow: hidden;
-
}
-
.titular {
-
display: block;
-
line-height: 60px;
-
margin: 0;
-
text-align: center;
-
}
-
.grafico.bar-chart {
-
position: relative;
-
width: 100%;
-
height: 60%;
-
background: #3468AF;
-
padding: 0 1rem 2rem 1rem;
-
color: #fff;
-
font-size: 80%;
-
}
-
[class^='eje-'] {
-
position: absolute;
-
left: 0;
-
bottom: 0rem;
-
width: 100%;
-
height: 80%;
-
padding: 1rem 1rem 0 2rem;
-
}
-
.eje-x {
-
height: 2.5rem;
-
border: 1px solid blue;
-
}
-
.bar-chart [class^='eje-'] {
-
padding: 0 1rem 0 2rem;
-
bottom: 1rem;
-
}
-
.bar-chart .eje-y li {
-
height: 20%;
-
border-top: 1px solid #fff;
-
}
-
[data-ejeY]:before {
-
content: attr(data-ejeY);
-
display: inline-block;
-
position: relative;
-
left: -2.5rem;
-
top: -.5rem;
-
width: 2rem;
-
line-height: 0;
-
text-align: right;
-
}
-
.bar-chart .eje-x {
-
bottom: 0;
-
}
-
.bar-chart .eje-x li {
-
width: 14%;
-
position: relative;
-
float: left;
-
text-align: left;
-
}
-
.bar-chart .eje-x li i {
-
display: block;
-
transform: rotatez(-45deg) translatex(-1rem);
-
transform-origin: 30% 60%;
-
}
-
.bar-chart .eje-x li:before {
-
content: '';
-
position: absolute;
-
bottom: 1.9rem;
-
width: 70%;
-
right: 5%;
-
box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1);
-
}
-
.bar-chart .eje-x li:nth-child(1):before {
-
background: #E64C65;
-
height: 570%;
-
}
-
.bar-chart .eje-x li:nth-child(2):before {
-
background: #11A8AB;
-
height: 900%;
-
}
-
.bar-chart .eje-x li:nth-child(3):before {
-
background: #FCB150;
-
height: 400%;
-
}
-
.bar-chart .eje-x li:nth-child(4):before {
-
background: #4FC4F6;
-
height: 290%;
-
}
-
.bar-chart .eje-x li:nth-child(5):before {
-
background: #FFED0D;
-
height: 720%;
-
}
-
.bar-chart .eje-x li:nth-child(6):before {
-
background: #F46FDA;
-
height: 820%;
-
}
-
.bar-chart .eje-x li:nth-child(7):before {
-
background: #15BFCC;
-
height: 520%;
-
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 统计图表之线状图
- 进无止境,AntV 统计图表 G2Plot 1.0 发布
- JFinal-layui v1.4.0 发布,表单上传按钮、优化图表统计、表格弹窗
- 微信小程序数据统计和错误统计的实现
- 机器学习数学基础:数理统计与描述性统计
- Java8中使用stream进行分组统计和普通实现的分组统计的性能对比
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HTTP权威指南
David Gourley、Brian Totty / 陈涓、赵振平 / 人民邮电出版社 / 2012-9 / 109.00元
超文本转移协议(Hypertext Transfer Protocol,HTTP)是在万维网上进行通信时所使用的协议方案。HTTP有很多应用,但最著名的是用于web浏览器和web服务器之间的双工通信。 HTTP起初是一个简单的协议,因此你可能会认为关于这个协议没有太多好 说的。但现在,你手上拿着的是却一本两磅重 的书。如果你对我们怎么会写出一本650页 的关于HTTP的书感到奇怪的话,可以去......一起来看看 《HTTP权威指南》 这本书的介绍吧!
图片转BASE64编码
在线图片转Base64编码工具
随机密码生成器
多种字符组合密码