1、新建html文档。
3、书写css代码。body, html, div, ul, li, a { margin: 0; padding: 0; }body, html { margin: 0; padding: 0; height: 100%; width: 100%; font-family: "微软雅黑" }body { background: #fff; text-align: center; background: #A69D9D; }.BarControl { width: 100%; height: 100%; padding: 0; margin: 0; display: inline-block; }.BarBeginTime { width: 40px; height: 20px; color: #fff; font-size: 8px; line-height: 20px; }.TheBar { position: relative; width: calc(100% - 114px); margin-left: 2px; height: 4px; border-radius: 2px; -moz-border-radius: 2px; background: #EBE8E8; overflow: visible; }.TheColorBar { width: 0px; border-radius: 0px; -moz-border-radius: 0px; height: 100%; background: #3498DB; float: left; }.TimeBall { width: 10px; height: 10px; border-radius: 5px; background: #3498DB; position: absolute; left: 0px; top: -3px; z-index: 2; cursor: pointer; }.BarTimeBall { width: 10px; height: 10px; border-radius: 5px; background: #3498DB; position: absolute; left: 0px; top: -3px; z-index: 2; cursor: pointer; }.BarFinishTime { width: 40px; height: 20px; color: #fff; font-size: 8px; line-height: 20px; }.BarBeginTime, .BarFinishTime, .TheBar { display: inline-block; vertical-align: middle; padding: 0px; }
5、代码整体结构。
