<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > <ptml> <pead> <title>css Direct-side diagram example </ti tle> <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> January <span: </span><stro Ng>35%</strong></li> <li> February <span: </span><strong>40%</strong></li > <li> March <span: </span><strong>87%</strong></li> <li> April <span: </span><strong>45%</strong></li> <li> May <span: </span><strong>23 %</strong></li> </ul> <p ></p><p> </p> <ul class= "Chart" > < Li><em> January </em><span: </span><strong>35%</strong></li> <li> <em> February </em><span: </span><strong>40%</strong></li> <li><em > March </em><span: </span><strong>87%</strong></li> <li><em> April </em><span: </span><strong>45%</strong></li> <li><em> May </em ><span: </span><strong>23%</strong></li> </UL> <p ></p><p> </p> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
