视频地址：
大家好，欢迎来到【三石jQuery视频教程】，我是您的老朋友 – 三生石上。
今天，我们要通过基本的HTML、CSS、jQuery来实现垂直时间表，先来看下最终的产品：
简单起见，，时间表中的每个节点用一张图片代替，实际应用中可能是标题-图片-正文的样子。
Step1：网站目录
网站目录非常简单，包含三部分：lesson3.html 文件、lib 目录和 images 目录。
其中 lesson3.html 包含了一个页面最基本的组成部分，正确的设置 DOCTYPE 有助于页面在现代浏览器中正确渲染。
<!DOCTYPE html><html><head><title>03.创建垂直时间表(Timeline) – 三石jQuery视频教程</title></head><body></body></html>
lib 目录仅包含了最新的 jQuery 库；images 目录包含使用到的 9 张图片。
Step2：页面结构
为页面添加基本的 html 标签。
<!DOCTYPE html><html><head><title>03.创建垂直时间表(Timeline) – 三石jQuery视频教程</title></head><body><div id="main"><h2>03.创建垂直时间表(Timeline) – 三石jQuery视频教程</h2><div class="timeline"><div class="year"><div class="year-inner">2015</div></div><ul class="events"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li><li><img src="images/4.jpg"></li></ul><div class="year"><div class="year-inner">2014</div></div><ul class="events"><li><img src="images/5.jpg"></li><li><img src="images/6.jpg"></li><li><img src="images/7.jpg"></li><li><img src="images/8.jpg"></li><li><img src="images/9.jpg"></li></ul></div></div></body></html>
此时的页面显示效果：
Step3：时间标签的样式
下面我们来创建时间标签的样式，为了实现双色圆形背景，我们做了如下努力：
固定宽度和高度，并让 border-radius 等于宽度和高度的 1/2 来实现圆形背景两个背景的颜色直接取自 FineUI（专业版）的版本更新页面为了让时间标签（2015）在 year-inner 中居中显示，分别定义 line-height 和 text-align 属性为了让 year-inner 在 year 中居中，我们使用了绝对定位（top:50%; margin-top:-25px;）的 CSS 小技巧
<style>body {background-color: #efefef;}#main {margin: 20px auto;}.timeline .year {background-color: #AFDCF8;width: 60px;height: 60px;border-radius: 30px;position: relative;margin: 0 auto 50px;}.timeline .year-inner {background-color: #46A4DA;width: 50px;height: 50px;text-align: center;line-height: 50px;color: #fff;border-radius: 25px;position: absolute;top: 50%;margin-top: -25px;left: 50%;margin-left: -25px;}.events img {width: 100%;}</style>
此时的页面显示效果：
Step4：让图片左右显示
为了让图片均匀的左右显示，也就是一个左，一个右，然后再一个左，一个右，所以需要明确区分奇数和偶数的 li 标签，我们使用 jQuery 来完成这一任务：
<script src="lib/jquery.js"></script><script>$(function() {$(‘.timeline .events li:nth-child(2n)’).addClass(‘alt’);});</script>
jQuery 的子选择器 :nth-child(2n) 用来选择列表中的偶数项，并添加样式类alt。
下面，我们通过 CSS 定义，左右两侧的图片分别占据 40% 的宽度，也就是说中间预留了 20% 的宽度，用一个图示来简单说明：
使用 float 样式来使图片左右显示，具体的 CSS 定义：
.timeline .events li {width: 40%;margin-bottom: 100px;border: solid 1px #AFDCF8;padding: 10px;border-radius: 5px;float: left;clear: left;}.timeline .events li.alt {float: right;clear: right;margin-top: 50px;margin-bottom: 50px;}
此时的页面效果：
Step5：时间标签后面的垂直背景线
本来我们可以使用一个绝对定位的 div 节点来实现这个效果，不过更简便的办法是 :after 伪选择器，先来看 CSS 定义：
.timeline {overflow: hidden;position: relative;}.timeline:after {content: "";position: absolute;width: 6px;height: 100%;background-color: #AFDCF8;top: 0;left: 50%;margin-left: -3px;}
:after 伪选择器用来在某个元素的内容后面插入新的内容：
此时的页面效果：
Step6：垂直背景线到图片的连接线
使用类似的伪选择器，我们很容易相对于每个 li 节点，定义连接线：
只有流过血的手指才能弹出世间的绝唱。
