<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> <ptml> <pead> <title> CSS histogram example </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 (/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 ;} </style> </pead> <body> <ul class = "chart"> <li> September January: <strong> 35% </strong> </li> <li> August 1: <strong> 40% </strong> </li> <li> August 1: <strong> 87% </strong> </li> <li> August 1: <strong> 45% </strong> </li> <li> August 1: <strong> 23% </strong> </li> </ul> <p style = "clear: both "> </p> <ul class =" chart "> <li> <em> February January </em>: <strong> 35% </strong> </li> <em> July February </em>: <strong> 40% </strong> </li> <em> July March </em>: <strong> 87% </strong> </li> <em> July April </em>: <strong> 45% </strong> </li> <em> July May </em>: <strong> 23% </strong> </li> </ul> <p style = "clear: both "> </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]