jquery时间表样式历程说明

书写css代码。body { color: #444; font-family: Tahoma, Geneva, sans-serif; font-size: 13px; padding: 0px; margin: 0px; }h1 { text-align: center; }.hl { color: red; }.top-line { margin-top: 0px; color: black; border-color: black; border-bottom-width: 0px; }.container { margin-top: 30px; }.inner-wrap { width: 960px; margin-right: auto; margin-left: auto; }.tabs ul { list-style: none; padding: 0; margin: 0; }.tabs li { float: left; border: 1px solid #bbb; border-bottom-width: 0; margin: 0; }.tabs li a { text-decoration: none; display: block; background: #eee; padding: 0.24em 1em; color: #00c; width: 8em; text-align: center; }.tabs .selected { border-color: black; }.tabs .selected a { position: relative; top: 1px; background: white; color: black; font-weight: bold; }.header { text-align: center; }.header h2 { color : #aaa; }.demo { padding-bottom: 10px; padding-top: 34px; background-color: #f5f5f5; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); }.apiDocTable { width: 100%; border: 1px solid black; border-collapse: collapse; }.timeline-content { text-align: center; }.timeline-content img { height: 200px; margin-left: auto; margin-right: auto; }.clear:before, .clear:after { content: ' '; display: table;}.clear:after { clear: both; }.clear { *zoom: 1;}.button { background: url(../images/buttons.png) no-repeat 0 0; width: 255px; height: 42px; cursor: pointer; display: block; }.button-direct-download { background-position: 0px 0px; }.button-direct-download:hover { background-position: 0px -45px; }.button-github { background-position: 0px -90px; }.button-github:hover { background-position: 0px -135px; }.footer { background-color: #cccccc; min-height: 50px; margin-top: 20px; padding-top: 20px; border-top: 2px solid #999999; }.top-bar { background-color: #2C3435; height: 40px; }.top-bar a { text-decoration: none; }.top-bar a:hover { background-color: transparent; }.wrap { width: 960px; margin-left: auto; margin-right: auto; }.gt-timeline { position: relative; width: 960px; height: 100px; 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.event { background: url(../images/main_img.png) no-repeat 0 -84px; width: 16px; height: 16px; cursor: pointer; position: absolute; z-index: 2; top: 44px; }.gt-timeline div.e-message { background-color: #666666; position: absolute; top: 70px; color: white; }.gt-timeline div.e-message .msg { padding: 5px; font-size: 10px; text-shadow: 0 0 0; cursor: pointer; z-index: 100; position: relative; }.gt-timeline div.e-message .msg:hover { background-color: blue; }.gt-timeline div.e-message .info { padding: 5px; font-size: 11px; text-shadow: 0 0 0; cursor: auto; z-index: 100; position: relative; font-weight: bold; border-bottom: 1px dashed #999999; position: default; }.gt-timeline div.e-message .message-pointer { background: url(../images/main_img.png) no-repeat 0 -122px; width: 14px; height: 18px; position: absolute; top: -11px; z-index: 1; }.gt-timeline .icon-close { background: url(../images/main_img.png) no-repeat -3px -227px; background-color: #999999; width: 14px; height: 14px; position: absolute; top: 5px; right: 7px; cursor: pointer; }.gt-timeline div.event:hover { background-position: -27px -84px; }.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.leftend { left: 14px; }.gt-timeline div.rightend { right: 0; }.gt-timeline .leftend .year { position: relative; text-align: center; top: -30px; left: -15px; }.gt-timeline .leftend .month { position: relative; text-align: center; top: -32px; left: -11px; }.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; }.gt-timeline div.odd-month { top: 41px; height: 10px; border-left: 1px solid #999999; }.gt-timeline .year, .gt-timeline .month { font-size: 12px; }.gt-timeline .year { font-weight: bold; }

书写并添加js代码。 

代码整体结构。

查看效果。