用css做圆柱型报表–简单版

幸福鸣响

幸福鸣响

2016-02-19 17:02

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享用css做圆柱型报表–简单版,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
titleSimple accessible Charts/title
meta http-equiv="Content-Type" content="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(chart_bg.gif) center 1.6em no-repeat;
}

.chart li span {
 display: block;
 text-indent: -999em;
 padding-bottom: 90px;
 background: url(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": /spanstrong35%/strong/li
li二月span style="background-position: center -40": /spanstrong40%/strong/li
li三月span style="background-position: center -87": /spanstrong87%/strong/li
li四月span style="background-position: center -45": /spanstrong45%/strong/li
li五月span style="background-position: center -23": /spanstrong23%/strong/li
/ul
p style="clear: both"/pp /p

p style="clear: both"/pp /p

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

ul class="chart"
liem一月/emspan style="background-position: center -35": /spanstrong35%/strong/li
liem二月/emspan style="background-position: center -40": /spanstrong40%/strong/li
liem三月/emspan style="background-position: center -87": /spanstrong87%/strong/li
liem四月/emspan style="background-position: center -45": /spanstrong45%/strong/li
liem五月/emspan style="background-position: center -23": /spanstrong23%/strong/li
/ul

p style="clear: both"/pp /p

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

/body
/html

展开更多 50%)
分享

猜你喜欢

用css做圆柱型报表–简单版

Web开发
用css做圆柱型报表–简单版

用Photoshop做简单的xhtml+css网页

Web开发
用Photoshop做简单的xhtml+css网页

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS简单实例:用css来实现透视效果

Web开发
CSS简单实例:用css来实现透视效果

用CSS做滑动效果的图片画廊

Web开发
用CSS做滑动效果的图片画廊

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

【PS教程】怎样用photoshop制作圆柱图形

电脑网络
【PS教程】怎样用photoshop制作圆柱图形

如何用Excel控件制作简单报表

电脑入门
如何用Excel控件制作简单报表

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

关于css优化

关于css优化

win10正式版具体发布时间

win10正式版具体发布时间
下拉加载更多内容 ↓