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;.........完整代码请登录后点击上方下载按钮下载查看