jquery+css实现可折叠行程轨迹时间轴时间线效果代码-html代码-BFW代码库

jquery+css实现可折叠行程轨迹时间轴时间线效果代码

代码语言：html

所属分类：其他

代码描述：jquery+css实现可折叠行程轨迹时间轴时间线效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        @charset "utf-8";
    * {
        margin:0;
        padding:0;
        list-style-type:none;
    }
    a, img {
        border:0;
    }
    body {
        font:12px/180% Arial, Helvetica, sans-serif, "新宋体";
        background: white;
    }
    .demo {
        width:960px;
        margin:60px auto 0 auto;
    }
    /*history*/
    .history {
        background:url(//repo.bfw.wiki/bfwrepo/images/yaohao/line04.gif) repeat-y 187px 0;
        overflow:hidden;
        position:relative;
    }
    .history-date {
        overflow:hidden;
        position:relative;
    }
    .history-date h2 {
        background:#fff url(//repo.bfw.wiki/bfwrepo/images/yaohao/icon06.gif) no-repeat 158px 0;
        height:59px;
        font-size:25px;
        font-family:微软雅黑;
        font-weight:normal;
        padding-left:45px;
        margin-bottom:74px;
    }
    .history-date h2.first {
        position:absolute;
        left:0;
        top:0;
        width:500px;
        z-index:99;
    }
    .history-date h2 a {
        color:#00bbff;
        display:inline-block;
    *display:inline;
        zoom:1;
        background:url(//repo.bfw.wiki/bfwrepo/images/yaohao/icon08.gif) no-repeat right 50%;
        padding-right:17px;
        margin:21px 97px 0 0;
    }
    .history-date h2 a:hover {
        text-decoration:none;
    }
    .history-date h2 img {
        vertical-align:-5px;
    }
    .history-date h2.date02 {
        background:none;
    }
    .history-date ul li {
        background:url(//repo.bfw.wiki/bfwrepo/images/yaohao/icon07.gif) no-repeat 180px 0;
        padding-bottom:50px;
        zoom:1;
    }
    .history-date ul li.last {
        padding-bottom:0;
    }
    .history-date ul li:after {
        content:" ";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .history-date ul li h3 {
        float:left;
        width:168px;
        text-align:right;
        padding-right:19px;
        color:#c3c3c3;
        font:normal 18px/16px Arial;
    }
    .history-date ul li h3 span {
        display:block;
        color:#d0d0d0;
        font-size:12px;
    }
    .history-date ul li dl {
        float:left;
        padding-left:41px;
        margin-top:-5px;
        font-family:微软雅黑;
    }
    .history-date ul li dl dt {
        font:20px/22px 微软雅黑;
        color:#737373;
    }
    .history-date ul li dl dt span {
        display:block;
        color:#787878;
        font-size:12px;
    }
    .history-date ul li.green h3 {
        color:#1db702;
    }
    .history-date ul li.green h3 span {
        color:#a8dda3;
    }
    .history-date ul li.green dl {
        margin-top:-8px;
    }
    .history-date ul li.green dl dt {
        font-size:30px;
        line-height:28px;.........完整代码请登录后点击上方下载按钮下载查看