html+css实现柱状图
工具/原料
adobedreamweaver
方法/步骤
1、新建html文档。
2、书写hmtl代艨位雅剖码。<ulid="q-graph"><lii颊俄岿髭d="q1"class="qtr">昨天<ul><liclass="northbar"style="height:111px;">18</li><liclass="southbar"style="height:99px;">16</li></ul></li><liid="q2"class="qtr">今天<ul><liclass="northbar"style="height:198px;">32</li><liclass="southbar"style="height:210px;">34</li></ul></li><liid="q3"class="qtr">明天<ul><liclass="northbar"style="height:260px;">43</li><liclass="southbar"style="height:198px;">32</li></ul></li><liid="q4"class="qtr">后天<ul><liclass="northbar"style="height:111px;">18</li><liclass="southbar"style="height:198px;">32</li></ul></li><liid="ticks"><divclass="ticks"><p>50</p></div><divclass="ticks"><p>40</p></div><divclass="ticks"><p>30</p></div><divclass="ticks"><p>20</p></div><divclass="ticks"><p>10</p></div></li></ul>
3、初始化css代码。<style>html,body{width:100%;height:100%;margin:0;padding:0;}.wrapper{position:relative;width:420px;margin:0auto;padding:0;font-size:0;}.icon{position:relative;display:inline-block;width:100px;height:100px;margin:20px;border-radius:18px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}</style>
4、书写css代码跷孳岔养。<style>body{padding:0;margin:40p旌忭檀挢x;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}h3{font-weight:normal;display:block;width:600px;text-align:center;}ul#q-graph{border:2pxsolid#0063be;background:#adfe12;height:300px!important;height:304px;width:600px;position:relative;list-style:none;margin:1.1em1em3.5em;padding:0;}#q-graphli{position:absolute;text-align:center;bottom:0;padding:0margin:0;}li.qtr{width:150px;height:300px;border-right:1pxdotted#41a3e2;z-index:2;}li#q1{left:0;}li#q2{left:150px;}li#q3{left:300px;}li#q4{left:450px;border-right:none;}#q-graphul{list-style:none;}li.bar{width:34px;color:#fff;}li.north{left:36px;background:#ddd;}li.south{left:80px;background:#ddd;}li#ticks{left:0;height:300px;width:100%;z-index:1;}div.ticks{position:relative;height:60px;border-top:1pxdotted#41a3e2;}div.ticks:first-child{border-top:none;}div.ticksp{position:absolute;left:103%;top:-11pt;}</style>
5、代码整体结构。
6、查看效果。
