jQuery垂直时间轴样式代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery垂直时间轴样式代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery垂直时间轴样式代码</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<script type="text/javascript">
$(document).ready(function(e) {
	var h = $(".about4_main ul li:first-child").height()/2;
	var h1 = $(".about4_main ul li:last-child").height()/2;
	$(".line").css("top",h);
	$(".line").height($(".about4_main").height()-h1-h);
});
</script>
	
<div class="about4">
	<div class="about4_ch">成长经历</div>
	<div class="about4_main">

		<div class="line"></div>
		<ul>
			<li>
				2011年走进大学的校园
			</li>
			<li>
				2011-2013在学校获得了各种奖项
			</li>
			<li>
				2014年我对大学的想法有了本质的转变
			</li>
			<li>
				2015年我毕业了，开始在互联网的浪潮中艰难生存
			</li>
			<li>
				无论li内容多少，直线都不会超出，并且红点永远居中的
			</li>
		</ul>
	</div>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,th,td{margin:0;padding:0;font-family:Arial,"微软雅黑";}
body{font-size:12px;color:#666;font-family:Arial,"微软雅黑";background:#fff;}
fieldset,img{border:0;}
/*在ie6下面，只要给插入图片加了链接，就会出现小边框*/
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
em{font-style:normal;}
input,button,select,textarea{outline:none;}
textarea{resize:none;}
a{color:#616161;text-decoration:none;text-decoration:none;}
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
body{background:url(../images/bg.png) left top repeat-y;}
/************************************************************关于我们*/
.about4{width:648px;margin:40px auto 0 auto;}
.about4_ch{font-size:18px;color:#d80017;margin-bottom:30px;}
.about4_main{position:relative;padding-left:20px;overflow:hidden;}
.line{width:1px;height:100%;background-color:#999;position:absolute;left:26px;z-index:-1;}
.about4_main ul li{padding-left:25px;font-size:14px;color:#333333;line-height:30px;margin-bottom:30px;background:url(../images/about4_icon.png) left center no-repeat;}
.about4_main ul li:last-child{margin-bottom:0px;}

附件:下载该文件资源,减少时间成本(增值服务)