生活已是百般艰难,为何不努力一点。下面图老师就给大家分享用css做圆柱型报表–简单版，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。
【 tulaoshi.com - Web开发 】
!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
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
/body
/html
来源:https://www.tulaoshi.com/n/20160219/1613959.html
看过《用css做圆柱型报表–简单版》的人还看了以下文章 更多>>
