模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
层和布局特效代码
>
收藏
分享
查看评论
层和布局
演示
CSS直方图布局示例_层和布局特效
查看演示效果
特效Tag:
直方图
添加
利用CSS布局一个直方图,可能比较实用,主要是考验使用CSS布局的能力,看看效果吧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS直方图示例</title> <meta http-equiv="Content-Type" mrc="text/html; charset=gbk"> <style type="text/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(http://www.mb5u.com/jscss/demoimg/200911/chart_bg.gif) center 1.6em no-repeat; } .chart li span { display: block; text-indent: -999em; padding-bottom: 90px; background: url(http://www.mb5u.com/jscss/demoimg/200911/chart_bg_ol.gif) center -1px no-repeat; border-top: 5px solid #fff; } .chart strong { display: block; text-align: center; font-weight: normal; } </style> </head> <body> <ul class="chart"> <li>一月<span style="background-position: center -35">: </span><strong>35%</strong></li> <li>二月<span style="background-position: center -40">: </span><strong>40%</strong></li> <li>三月<span style="background-position: center -87">: </span><strong>87%</strong></li> <li>四月<span style="background-position: center -45">: </span><strong>45%</strong></li> <li>五月<span style="background-position: center -23">: </span><strong>23%</strong></li> </ul> <p style="clear: both"></p><p> </p> <ul class="chart"> <li><em>一月</em><span style="background-position: center -35">: </span><strong>35%</strong></li> <li><em>二月</em><span style="background-position: center -40">: </span><strong>40%</strong></li> <li><em>三月</em><span style="background-position: center -87">: </span><strong>87%</strong></li> <li><em>四月</em><span style="background-position: center -45">: </span><strong>45%</strong></li> <li><em>五月</em><span style="background-position: center -23">: </span><strong>23%</strong></li> </ul> <p style="clear: both"></p><p> </p> </body> </html>
所属频道:
层和布局特效
/
更新时间:2012-11-13
[收藏]
[报错]
[返回列表]
相关
层和布局特效
:
表格内容排序sortTable
行变成列,列变成行
文本输入限制
拆分单元格
控制表格内的滚动条
颜色交替的表格
JS计算里面有多少个
极酷的表格
会动的表格
可拖动单元格
变色表格
访问表格的每个TD
层和布局特效Rss订阅
特效代码搜索
层和布局特效推荐
CSS实现对联效果
鼠标拖拉按比例缩放的JavaScript
CSS垂直居中自动适应高度变化
Alert 效果(Js+CSs模拟)
让一个DIV层的边框闪烁的代码
Js实现表格隔行换色一例
JS+CSS实现可关闭的网站首页提示栏
纯CSS鼠标悬停提示
动态移动的JavaScript浮动窗口
CSS+JS表格行选中变色并储存的效果代码
猜你也喜欢看这些
字符变色
CSS控制背景垂直或水平重复
网页背景的所有安全色展示
Java Script 颜色梯度和渐变效果
适时变换网页背景和文字颜色
JavaScript背景随机变换颜色
背景调色板:状态栏还能显示颜色值
自动弹出的导航窗
鼠标放上链接改变网页背景颜色
CSS给网页上的评论文本框加上提醒功能背景图片
相关链接:
复制本页链接
|
搜索CSS直方图布局示例
特效说明:
层和布局模板
-
CSS直方图布局示例
。