timeline css
CODE <!doctype html> <html> <head> <meta charset="UTF-8"> <title>order room - 离散度30min </title> </head> <body> <style> .gt-timeline { position: relative; width: 960px; height: 120px; border: 0px solid red; font-family: 'Helvetica Neue', Helvetica, Arial, serif; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); color: #6d6d6d; margin-left: auto; margin-right: auto; } .gt-timeline div.main_line { border: none; border-top: 3px solid #666666; clear: both; height: 0; width: 100%; position: absolute; top: 50px; left: 14px; z-index: 0; } .gt-timeline div.horizontal-line { border: 0px; border-left: 3px solid #666666; clear: both; height: 20px; width: 0px; position: absolute; z-index: 1; top: 30px; } .gt-timeline div.month-line { height: 15px; border-left: 2px solid #666666; } .gt-timeline div.even-month { top: 37px; } .gt-timeline div.even-month .month { position: relative; top: -18px; left: -10px; white-space: nowrap; } .gt-timeline div.odd-month { top: 41px; height: 10px; border-left: 1px solid #999999; } .gt-timeline .month { font-size: 12px; } </style> <div class="gt-timeline" style="width:933px"> <div class="main_line" style="width:903px"></div> <div class="horizontal-line month-line" style="left: 13px;top:35px;"> </div> <div style="left:64px"> <span style="position: relative; ;width:50px;left:20px;top:30px;">会议室编号</span> </div> <div style="left:89px"></div> <div class="horizontal-line month-line " style="left:114px; top:35px;"> </div> <div style="left:139px"> <span style="position: relative; ;width:50px;left:120px;top:12px;">会议室信息</span> </div> <div style="left:164px"> </div> <div style="left:189px"> </div> <div style="left:214px"> </div> <div style="left:239px"></div> <div class="horizontal-line month-line even-month" style="left:264px"> <div class="month">08:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:289px"></div> <div class="horizontal-line month-line even-month" style="left:314px"> <div class="month">09:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:339px"></div> <div class="horizontal-line month-line even-month" style="left:364px"> <div class="month">10:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:389px"></div> <div class="horizontal-line month-line even-month" style="left:414px"> <div class="month">11:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:439px"></div> <div class="horizontal-line month-line even-month" style="left:464px"> <div class="month">12:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:489px"></div> <div class="horizontal-line month-line even-month" style="left:514px"> <div class="month">13:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:539px"></div> <div class="horizontal-line month-line even-month" style="left:564px"> <div class="month">14:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:589px"></div> <div class="horizontal-line month-line even-month" style="left:614px"> <div class="month">15:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:639px"></div> <div class="horizontal-line month-line even-month" style="left:664px"> <div class="month">16:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:689px"></div> <div class="horizontal-line month-line even-month" style="left:714px"> <div class="month">17:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:739px"></div> <div class="horizontal-line month-line even-month" style="left:764px"> <div class="month">18:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:789px"></div> <div class="horizontal-line month-line even-month" style="left:814px"> <div class="month">19:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:839px"></div> <div class="horizontal-line month-line even-month" style="left:864px"> <div class="month">20:00</div> </div> <div class="horizontal-line month-line odd-month" style="left:889px"></div> <div class="horizontal-line month-line even-month" style="left:914px"> <div class="month">21:00</div> </div> </div> </body> </html>
w活用border
<!doctype html> <html> <head> </head> <body> <div style="margin: 2em;"> <div style="position: absolute;border-left:0.2em solid black;height: 2em;"></div> <div style="position: relative;;border-bottom:0.1em solid black;top:2em;"></div> <div style="position: absolute;left: 1.5em;;top:0.8em;">08:00</div> <div style="position: absolute;left: 8em;border-left:0.1em dashed black;height: 1em;top:3em;"></div> <div style="position: absolute;left: 14em;border-left:0.2em solid black;height: 2em;"></div> <div style="position: absolute;left: 13.0em;;top:0.8em;">09:00</div> </div> </body> </html>
<!doctype html> <html> <head> </head> <body> <div style="margin: 2em;"> <div style="position: relative;border-left:0.2em solid black;height: 2em;;border-bottom:0.1em solid black;"></div> <div style="position: relative;left: -1.0em;;top:-3.2em;">08:00</div> <div style="position: relative;left: 4em;border-left:0.1em dashed black;height: 1em;top:-2.4em;"></div> <div style="position: relative;left: 8em;border-left:0.2em solid black;height: 2em;top:-4.3em;"></div> <div style="position: relative;left: 7.0em;;top:-7.3em;">09:00</div> </div> </body> </html>
