1、新建html文档。
2、书写hmtl代码。<ul id="q-graph"><li id="q1" class="qtr">昨天 <ul> <li class="north bar" style="height:111px;">18</li> <li class="south bar" style="height:99px;">16</li> </ul></li><li id="q2" class="qtr">今天 <ul> <li class="north bar" style="height:198px;">32</li> <li class="south bar" style="height:210px;">34</li> </ul></li><li id="q3" class="qtr">明天 <ul> <li class="north bar" style="height:260px;">43</li> <li class="south bar" style="height:198px;">32</li> </ul></li><li id="q4" class="qtr">后天 <ul> <li class="north bar" style="height:111px;">18</li> <li class="south bar" style="height:198px;">32</li> </ul></li><li id="ticks"> <div class="ticks"> <p>50</p> </div> <div class="ticks"> <p>40</p> </div> <div class="ticks"> <p>30</p> </div> <div class="ticks"> <p>20</p> </div> <div class="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 : 0 auto; 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: 40px; font-size: 9pt; font-family: Helvetica, Geneva, sans-serif; }h3 { font-weight: normal; display: block; width: 600px; text-align: center; }ul#q-graph { border: 2px solid #0063be; background: #adfe12; height: 300px !important; height: 304px; width: 600px; position: relative; list-style: none; margin: 1.1em 1em 3.5em; padding: 0; }#q-graph li { position: absolute; text-align: center; bottom: 0; padding:0 margin:0;}li.qtr { width: 150px; height: 300px; border-right: 1px dotted #41a3e2; z-index: 2; }li#q1 { left: 0; }li#q2 { left: 150px; }li#q3 { left: 300px; }li#q4 { left: 450px; border-right: none; }#q-graph ul { 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: 1px dotted #41a3e2; }div.ticks:first-child { border-top: none; }div.ticks p { position: absolute; left: 103%; top: -11pt; }</style>
5、代码整体结构。
6、查看效果。
