基于基于ccs3的的timeline时间线实现方法时间线实现方法
在web项目中我们经常要使用时间轴(timeline)控件。本文提供一种基于CSS3的可逐项展开的timeline,在各展开项中可以
嵌入文本、图片、视频等元素。运行效果如下:
实现实现
该控件的实现过程较为简单,主要由test.html文件和timeline.css文件组成。具体代码如下:
1、test.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="timeline.css"/>
<title>Timeline</title>
</head>
<body>
<div id='timeDiv'>
<ul id='timeline'>
<li class='work'>
<input class='radio' id='work1' name='works' type='radio' checked>
<div class="relative">
<label for='work1'>1、标题一</label>
<span class='date'>T1</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
长安元年(701年),李白,字太白。其生地今一般认为是唐剑南道绵州(巴西郡)昌隆(后避玄宗讳改为昌明)青莲乡。祖籍为甘肃天水。
其家世、家族皆不详。据《新唐书》记载,李白为兴圣皇帝(凉武昭王李暠)九世孙,按照这个说法李白与李唐诸王同宗,是唐太宗李世民的同辈族弟。
亦有说其祖是李建成或李元吉。
</p>
<p><img src="http://i.qulishi.com/UploadFile/2014-7/2014725171362.jpg" /></p>
</div>
</li>
<li class='work'>
<input class='radio' id='work2' name='works' type='radio'>
<div class="relative">
<label for='work2'>2、标题二</label>
<span class='date'>T2</span>
<span class='circle'></span>
</div>
<div class='content'>
<p>
神龙元年(705年), 十一月,武则天去世。李白五岁。发蒙读书始于是年。