CSS 長條圖布局樣本

來源:互聯網
上載者:User

<meta http-equiv="Content-Type" content="text/html; charset=gbk"><br /><style type="text/css"> .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left; margin: 0; padding: .4em .1em; } </p><p>.chart li { list-style: none; float: left; width: 5em; text-align: center; background: url(/upload/2009-11/20091104144827988.gif) center 1.6em no-repeat; } </p><p>.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; } </p><p>.chart strong { display: block; text-align: center; font-weight: normal; } </style><ul class="chart"><li>一月: <strong>35%</strong></li><li>二月: <strong>40%</strong></li><li>三月: <strong>87%</strong></li><li>四月: <strong>45%</strong></li><li>五月: <strong>23%</strong></li></ul><p style="clear: both"></p><ul class="chart"><li><em>一月</em>: <strong>35%</strong></li><li><em>二月</em>: <strong>40%</strong></li><li><em>三月</em>: <strong>87%</strong></li><li><em>四月</em>: <strong>45%</strong></li><li><em>五月</em>: <strong>23%</strong></li></ul><p style="clear: both"></p><p>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.