_html 时间轴">
devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

html时间轴源码_html 时间轴

作者：菜鸟追梦旅行 | 2024-03-13 20:45:45

赞

踩

html 时间轴

html时间轴源码

下载：

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <title>时间轴 - 发展史</title>
  7. <meta name="keywords" content="这里SEO关键词"/>
  8. <meta name="description" content="这里网站介绍"/>
  9. <link href="style.css" rel="stylesheet" type="text/css" />
  10. <link rel="icon" href="favicon.ico" type="image/x-icon" />
  11. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  12.  
  13. </head>
  14. <body>
  15. <div class="content">
  16. 	<div class="wrapper">
  17. 		<div class="light"><i></i></div>
  18. 		<hr class="line-left">
  19. 		<hr class="line-right">
  20. 		<div class="main">
  21. 			<h1 class="title">时间轴</h1>		
  22. 			<div class="year">
  23. 				<h2><a href="#">2019年<i></i></a></h2>
  24. 				<div class="list">
  25. 					<ul>
  26. 						<li class="cls">
  27. 							<p class="date">12月5日</p>
  28. 							<p class="intro">XXXX 正式搭建</p>
  29. 							<p class="version">&nbsp;</p>
  30. 							<div class="more">
  31. 								<p>一个崭新的平台出现</p>
  32. 							</div>
  33. 						</li>
  34. 						<li class="cls">
  35. 							<p class="date">12月7日</p>
  36. 							<p class="intro">XXXX 分享第一部影视 </p>
  37. 							<p class="version">&nbsp;</p>
  38. 							<div class="more">
  39. 								<p>爱情公寓五！</p>
  40. 							</div>
  41. 						</li>
  42. 					</ul>
  43. 				</div>
  44. 			</div>
  45.  
  46. 			<div class="year">
  47. 				<h2><a href="#">2019年<i></i></a></h2>
  48. 				<div class="list">
  49. 					<ul>
  50. 						<li class="cls">
  51. 							<p class="date">12月8日</p>
  52. 							<p class="intro">更新第二部影视</p>
  53. 							<p class="version">&nbsp;</p>
  54. 							<div class="more">
  55. 								<p>热血同行！</p>
  56. 							</div>
  57. 						</li>
  58. 						<li class="cls highlight">
  59. 							<p class="date">12月9日</p>
  60. 							<p class="intro">正式启用新主题</p>
  61. 							<p class="version">&nbsp;</p>
  62. 							<div class="more">
  63. 								<p>花费过年买鞭炮的大洋！</p>
  64. 							</div>
  65.                        </li>
  66. 					</ul>
  67. 				</div>
  68. 			</div>
  69. 			<div class="year">
  70. 				<h2><a href="#">2019年<i></i></a></h2>
  71. 				<div class="list">
  72. 					<ul>
  73. 						<li class="cls">
  74. 							<p class="date">12月8日</p>
  75. 							<p class="intro">更新第二部影视</p>
  76. 							<p class="version">&nbsp;</p>
  77. 							<div class="more">
  78. 								<p>热血同行！</p>
  79. 							</div>
  80. 						</li>
  81. 						<li class="cls highlight">
  82. 							<p class="date">12月9日</p>
  83. 							<p class="intro">正式启用新主题</p>
  84. 							<p class="version">&nbsp;</p>
  85. 							<div class="more">
  86. 								<p>花费过年买鞭炮的大洋！</p>
  87. 							</div>
  88.                        </li>
  89. 					</ul>
  90. 				</div>
  91. 			</div>
  92. 			<div class="year">
  93. 				<h2><a href="#">2020年<i></i></a></h2>
  94. 				<div class="list">
  95. 					<ul>
  96. 						<li class="cls">
  97. 							<p class="date">5月9日</p>
  98. 							<p class="intro">出去玩玩</p>
  99. 							<p class="version">&nbsp;</p>
  100. 							<div class="more">
  101. 								<p>其实就是到楼下买了点零食</p>
  102. 							</div>
  103. 						</li>
  104. 						<li class="cls highlight">
  105. 							<p class="date">5月10日下午14:00</p>
  106. 							<p class="intro">刚睡醒，捣鼓影视站</p>
  107. 							<p class="version">&nbsp;</p>
  108. 							<div class="more">
  109. 								<p>感觉身在云雾中，我把这叫起飞</p>
  110. 							</div>
  111.                        </li>
  112. 					</ul>
  113. 				</div>
  114. 			</div>
  115.  
  116. 							</div>
  117.                        </li>
  118. 					</ul>
  119. 				</div>
  120. 			</div>	
  121. 		</div>
  122. 	</div>
  123. </div>
  124.  
  125. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  126. <script type="text/javascript">
  127. $(".main .year .list").each(function(e, target){
  128. 	var $target=$(target),
  129. 	$ul = $target.find("ul");
  130. 	$target.height($ul.outerHeight()), $ul.css("position", "absolute");
  131. }); 
  132. $(".main .year>h2>a").click(function(e){
  133. 	e.preventDefault();
  134. 	$(this).parents(".year").toggleClass("close");
  135. });
  136. </script>
  137. 	<div style="background:#ccc;text-align:center"><a href=" ">返回首页</a>&nbsp;&nbsp;<a href=" ">关于</a>&nbsp;&nbsp;<a href=" ">友情链接</a>&nbsp;&nbsp;<a href=" ">免责声明</a>&nbsp;&nbsp;<a href=" ">广告联系</a></div>
  138. </body>
  139. </html>
  140.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/230493
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号