利div+css做的柱状图,代码超级简洁深山行者

h1,h2,h3,h4,h5,h6,form,div,p,img,ul,li,table,tr,td,dl,dt,dd,body {margin:0;padding:0;}

body {width:915px;margin:auto;font:normal 12px/160% Arial,宋体,Tahoma,sans-serif;color:#393939;font-size:9pt;background:#fff;}

ul {list-style-type:none;}

a:link,a:visited {color:#393939;text-decoration:none;}

a:hover {color:#f00;text-decoration:underline;}

/*column start*/

.column {margin:50px;background:#fff;width:650px;height:240px;}

.columnl {background:#fff;width:40px;height:240px;position:relative;float:left;}

.columnl ul {position:absolute;bottom:3px;right:3px;text-align:right;line-height:40px;font-weight:bold;}

.columnc {flaot:left;margin-left:40px;background:#fff url(./UploadFiles/200924204856914.gif) left bottom;width:600px;height:220px;border-left:solid 1px #a6a6a6;border-bottom:solid 1px #a6a6a6;position:relative;}

.columnc ul {position:absolute;bottom:0px;left:0px;}

.columnc li {float:left;width:81px;height:220px;background:url(./UploadFiles/200924205055615.gif) repeat-y right bottom;}

.columnc dl {text-align:center;position:absolute;bottom:0px;margin-left:26px;}

.columnc dt {font-weight:bold;}

.columnc dd {width:24px;}

.columnc span {display:block;width:100%;height:100%;}

.columnc span {display:block;width:100%;height:100%;background:url(/UploadFiles/demo/ups_columncspanbg.png) repeat-y left !important;}

*html .columnc span {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/UploadFiles/demo/ups_columncspanbg.png");background:none;filter:alpha(opacity=50);}

.columnb {float:left;background:#fff;width:600px;}

.columnb ul {margin:0px;}

*html .columnb ul {margin-left:3px;}

.columnb li {float:left;border-left:solid 1px #a6a6a6;width:80px;line-height:26px;text-align:center;font-weight:bold;}

  • 100%
  • 80%
  • 60%
  • 40%
  • 20%
  • 0%
  • 20%
  • 40%
  • 30%
  • 50%
  • 80%
  • 100%
  • 60%
  • 合计
  • 连云
  • 赣榆
  • 新海
  • 东海
  • 灌云
  • 灌南

html制作柱状图,利div+css做的柱状图,代码超级简洁相关推荐

  1. 如何在html中加入柱状图,利用DIV+CSS做的柱状图(3)

    利用DIV+CSS做的柱状图(3) .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left ...

  2. HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)

    HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

  3. HTML5+CSS期末大作业:环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码

    HTML5+CSS期末大作业:宠物网站设计--宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码 常见网页设计 ...

  4. php网页悬浮对联代码,不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码

    纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: .r1{width:80px;height:80px;backgroun ...

  5. 李炎恢老师XHTML视频教程DIV+CSS教程与课件代码

    [No32]李炎恢老师XHTML视频教程DIV+CSS教程与课件代码 课程目录: css专题 0.视频项目源代码+素材 第1章 XHTML学前准备(1课时) 第2章 HTML基本结构(2课时) 第3章 ...

  6. html中怎么写排行榜,div css列表布局排行榜代码

    特效描述:div css列表布局 排行榜代码.div css列表布局排行榜代码 代码结构 1. 引入CSS 2. HTML代码 问问专家 问问专家 在社区问问最专业的知识贡献用户 委婉小小 闻道有先后 ...

  7. html语言制作留言条,利用DIV+CSS制作右下角弹出留言板

    /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...

  8. 只用div+CSS做淘宝手机端首页

    div+CSS教你做出淘宝手机端首页 为什么只用div做网页 网页代码 网页效果展示 需要更全面的SEO优化网站软件工具及软件操作文档可以联系博主,会有更详细的教程,系统的帮助您的网站关键词40天上百 ...

  9. 圣诞节静态HTML网页作业作品 大学生圣诞网页设计制作成品 简单DIV CSS布局网站

    圣诞节静态HTML网页制作 网页介绍 网页作品截图 网页代码预览 源地址 网页介绍 大学生圣诞节网页作业成品采用DIV CSS布局制作,主要内容包括圣诞节日介绍.节日发展.习俗庆祝.地区特色等内容,作 ...

最新文章

  1. 关于64位WIN7下正确建立JAVA开发环境(转
  2. Object category automatic search
  3. TCP/IP协议栈模型分析
  4. Mac OS X 10.10更新及体验
  5. Pytorch Fashion_MNIST直接离线加载二进制文件到pytorch
  6. 信息学奥赛一本通(1111:不高兴的津津)
  7. 1748. 唯一元素的和
  8. windows编程点滴(一)之Windows获取系统中所有进程
  9. php+jquery+ajax+json的一个最简单实例
  10. 淘宝帝国是如何创建的连载02
  11. 华为内部流程管理系统(附关键流程图)
  12. python修改文件夹下文件夹的名字
  13. 给定一种规律 pattern 和一个字符串 str ,判断 str 是否遵循相同的规律。
  14. 西电雨课堂等网课测试大合集【2023.5.22更新】
  15. 计算机专业考研要分最低的院校,计算机考研院校难度排行榜
  16. java,mqtt-client开发创建客户端
  17. 是什么让复旦校长彻夜难眠?
  18. 人是什么?从生物学的角度来说,人就是直立行走无毛动物而已...这是一个多么可怕的世界啊
  19. 国内外一些软件开发公司
  20. return false和 return true 的作用是什么

热门文章

  1. STM32 ADC 引脚约0.7V问题解决方法
  2. 【python-Day3】
  3. 68、计算机网络知识整理版
  4. execute、executeUpdate、executeQuery三者的区别(及返回值)
  5. Godot官方授权中文社区
  6. Camera 原理总结
  7. 深圳市南山区新生儿入户流程
  8. 唐华生老师:如何与人相处 当被人嘲笑时如何应对
  9. 2014PPTV-题解
  10. 第七章、模型详解 -- 模型关系