CSS 直方图布局示例

CSS直方图示例

.chart {
font-family: Tahoma;
font-size: 12px;
border: 1px solid #ccc;
float: left;
margin: 0;
padding: .4em .1em;
}

.chart li {
list-style: none;
float: left;
width: 5em;
text-align: center;
background: url(/upload/2009-11/20091104144827988.gif) center 1.6em no-repeat;
}

.chart li span {
display: block;
text-indent: -999em;
padding-bottom: 90px;
background: url(/upload/2009-11/20091104144827692.gif) center -1px no-repeat;
border-top: 5px solid #fff;
}

.chart strong {
display: block;
text-align: center;
font-weight: normal;
}

  • 一月: 35%
  • 二月: 40%
  • 三月: 87%
  • 四月: 45%
  • 五月: 23%
  • 一月: 35%
  • 二月: 40%
  • 三月: 87%
  • 四月: 45%
  • 五月: 23%

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript图片相似度算法实现 js实现直方图和向量算法

    复制代码 代码如下: function getHistogram(imageData) {    var arr = [];    for (var i = 0; i < 64; i++) {        arr[i] = 0;    }    var data = imageData.data;    var pow4 = Math.pow(4, 2);    for (var i = 0, len = data.length; i < len; i += 4) {        var

  • php中使用Imagick实现图像直方图的实现代码

    php中使用Imagick实现图像直方图的实现代码

    我并不打算详细解释专业名词,有兴趣的读者可以查阅文章结尾处的参考链接,那里有通俗易懂的解释: 我们先找一个例子图像(用Canon 550D拍的): 例子图片:butterfly.jpg 下面看看如何使用Imagick实现图像直方图: 复制代码 代码如下: <?php $file = 'butterfly.jpg'; $size = array( 'width' => 256, 'height' => 100, ); $image = new Imagick($file); $histog

  • CSS 直方图布局示例

    CSS直方图示例 .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left; margin: 0; padding: .4em .1em; } .chart li { list-style: none; float: left; width: 5em; text-align: center; background: url(/upload/2009-11/20091104144827988

  • CSS网页布局入门教程1：一列固定宽度

    CSS网页布局入门教程1：一列固定宽度

    本系列教程为入门级教程,适合初学者学习,由最简单的知识一点一点进阶.主要以实例为主,很少部分理论,这样更适应初学者快速掌握.因本人也正在学习,难免有一些错误或疏漏地方,望各位给予指正.本教程参考<CSS网站布局实录>一书,在此向作者表示感谢. 要想学好DIV+CSS,首先要有一定的HTML和CSS知识,如果这些你还不了解,建议你先去补习这一课,再来学习本教程.另外还要抛弃传统表格布局的思维模式,至于为什么,在你学习本教程中慢慢就会体会到.如果这些你都准备好了,那么开始吧! 一列固定宽度 一列固

  • CSS网页布局入门教程6：左列固定，右列宽度自适应

    在实际应用中,有时候需要左栏固定宽度,右栏根据浏览器窗口大小自动适应,在CSS中实现这样的布局方式是简单可行的,只需在设置左栏的宽度即可,如上例中左右栏都采用了百分比实现了宽度自适应,而我们只需要将左栏宽度设定为固定值,右栏不设置任何宽度值,并且右栏不浮动,代码如下: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 3

  • JS+DIV+CSS排版布局实现美观的选项卡效果

    JS+DIV+CSS排版布局实现美观的选项卡效果

    本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • 使用CSS框架布局的缺点和优点小结

    现在好多网站都用了div+css来布局网页结构,优点是速度快了,可负面影响呢,来看下面的分析前端时间写了一篇<利用CSS框架进行高效率的站点开发>,有不少朋友问我相关的问题.很早5key就在公司进行CSS框架的架构,也对不少朋友提出CSS框架的建议.效果是很明显的.当然,CSS框架有利也有弊,最近也看了一些相关的文章.一些感想,与大家分享. CSS框架之利:  1.开发效率的提高.          如果你是一个企业建站的前端开发,相信在大部分时间里进行着同类站点的代码工作.定义好的框架可以大

  • CSS网页布局入门教程5：二列宽度自适应

    从二列固定宽度入手,开始尝试二列布局的情况下,左右栏宽度能够做到自适应,从一列自适应布局中我们知道,设定自适应主要通过宽度的百分比值设置,因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计,继续上面的CSS代码,我们得新定义二列的宽度值: 复制代码 代码如下: #left {      background-color: #E8F5FE;      border: 1px solid #A9C9E2;      float: left;      height: 300px;      w

  • CSS网页布局入门教程4：二列固定宽度

    CSS网页布局入门教程4：二列固定宽度

    有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下: 复制代码 代码如下: <div id="left">左列</div>  <div id="right">右列</div> 新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先为它们制定宽度,然后让两个div在水平行中并排显示

  • CSS整体布局声明的一些使用技巧

    我们应该养成良好的编码习惯,CSS整体布局声明为我们的代码简化.提高运行效率提供了途径.我们列举比较常用的形式,并加上解释.整体布局声明的作用在于将目标作一个整体的概括,声明一些完全相同或基本相同的属性及值,以免在后面的代码中每一个标签中都需要单独定义.若有不同的属性与值,后面的重新定义即可. 一.通配式整体布局声明. * { margin:0; padding:0; font-size:0.8em; ... } 这类形式的声明是针对整个页面的.可以设置页面元素共有的属性.而不必每一个元素单独的

  • div+CSS网页布局的意义与副作用原因小结第1/2页

    如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载.而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢. 二.降低流量费用 页面体积

  • 用Pygal绘制直方图代码示例

    用Pygal绘制直方图代码示例

    Pygal可用来生成可缩放的矢量图形文件,对于需要在尺寸不同的屏幕上显示的图表,这很有用,可以自动缩放,自适应观看者的屏幕 1.Pygal模块安装 pygal的安装这里暂不介绍,大家可参阅<pip和pygal的安装实例教程> 2.Pygal画廊-直方图 模拟掷骰子,分析最后的结果,生成图形 创建die.py筛子类文件: from random import randint class Die(): '''扔骰子的类''' def __init__(self,num_sides=6): self

随机推荐