css折叠日期时间线时间轴效果代码-html代码-BFW代码库

css折叠日期时间线时间轴效果代码

代码语言：html

代码描述：css折叠日期时间线时间轴效果代码

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    @charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 12px;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
}
.timeline {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAcSURBVHjaYnz9+vV/BjTAxIAFUCgIAAAA//8DAILHA8pW2pZ5AAAAAElFTkSuQmCC) repeat-y 10px;
	width: 80px;
	float: left;
}
.year li .year-button {
	cursor: pointer;
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -175px no-repeat;
	height: 25px;
	padding-left: 22px;
	margin-left: 8px;
	line-height: 25px;
}
.year li .year-button:hover {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -29px no-repeat
}
.year>.active .year-button {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px 0px no-repeat;
	color: #FFF;
}
.year>.active .year-button:hover {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px 0px no-repeat;
	color: #FFF;
}
.month {
	display: none;
	margin-left: 7px;
}
.active>.month {
	display: block
}
.month>li {
	cursor: pointer;
	height: 25px;
	padding-right: 25px;
	line-height: 25px;
	text-align: right;
}
.month>li a {
	color: #000000;
}
.month>li.active {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -89px no-repeat;
}
.month>li.active a {
	color: #FFF;
}
.month>li:hover {
	background: url(//repo.bfw.wiki/bfwrepo/image/606699e573c4e.png) 0px -119px no-repeat;
}
.month>li.active:hover {
	background: url(//repo.........完整代码请登录后点击上方下载按钮下载查看