视频地址：http://v.qq.com/page/g/i/o/g0150rvi6io.html
大家好，欢迎来到【三石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 标签。
- 为了实现时间标签的双色背景，嵌套了两层 div，分别用 CSS 样式类 year 和 year-inner 来标示
- 时间表中的事件列表用 ul.events li 进行组织
- 最后给最外层的时间表节点定义样式类 timeline
<!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 伪选择器用来在某个元素的内容后面插入新的内容：
- content 定义要插入的新内容，这里我们不需要插入任何文本内容，所以留空
- 将新内容绝对定位，就和使用正常 div 节点一样
- 为了让垂直背景线水平居中显示，我们同样使用了前面提到的 top:50% + margin-top 的小技巧
此时的页面效果：
Step6：垂直背景线到图片的连接线
使用类似的伪选择器，我们很容易相对于每个 li 节点，定义连接线：
.timeline .events li {
width: 40%;
margin-bottom: 100px;
border: solid 1px #AFDCF8;
padding: 10px;
border-radius: 5px;
float: left;
clear: left;
position: relative;
}
.timeline .events li:after {
content: "";
position: absolute;
top: 30px;
left: 100%;
width: 25%;
height: 6px;
background-color: #AFDCF8;
}
特别注意的几点：
- left: 100% 用来表示连接线紧靠图标的右侧显示
- width: 25% 用来定义连接线的宽度，恰好占据图片右侧到垂直背景线的距离
一个巨大的疑问号？为什么是 25%，而不是其他的数值？
其实这是精心安排的：
再来回忆下，图片占据了 40% 的宽度，那么连接线应该占据整个宽度的 10% = (100% - 40% * 2） / 2，这是显而易见的！
但是 li:after 的绝对定位（position:absolute）是相对于第一个非静态定位的父节点而言的，而这儿父节点就是 .timeline .events li 本身，所以连接线相对于 li 的宽度：
40% * x = 10% = (100% - 40% * 2） / 2，可以计算出 x = 25%
====
假设，图片的 CSS 中将宽度设为 45%，那么这里的 li:after 的 width 就应该是 ((100% - 45% * 2） / 2) / 45% = 11.1%
此时的页面效果：
Step7：自定义尺寸盒模型（box-sizing）
虽然我们信誓旦旦的说，那个 25% 是精心安排的，但是实际的效果的却相差甚远，连接线的宽度明显宽了很多。
如果这是我们算一下图片的实际宽度，就会发现图片的实际宽度是 40%，这不包含内边距（padding） 和 边框（border）！
这时我们就需要重置页面上所有元素的 box-sizing，从默认值 content-box 改为 border-box，而这个做法也是推荐的做法。
很多注明的 CSS 框架（包括现在比较流行的 BootStrap）都将这一规则作为默认的样式：
* {
box-sizing: border-box;
}
下面来简单比较下这两则的区别：
- content-box：为元素设定的宽度和高度不包含内边距和边框
- border-box：为元素设定的宽度和高度包含内边距和边框
此时的页面效果：
Step8：完整的 CSS 代码
为右侧图片添加连接线也很简单，下面看看完整的 CSS 代码：
* {
box-sizing: border-box;
}
body {
background-color: #efefef;
}
#main {
margin: 20px auto;
}
.timeline {
overflow: hidden;
position: relative;
}
.timeline:after {
content: "";
position: absolute;
width: 6px;
height: 100%;
background-color: #AFDCF8;
top: 0;
left: 50%;
margin-left: -3px;
z-index: 0;
}
.timeline .year {
background-color: #AFDCF8;
width: 60px;
height: 60px;
border-radius: 30px;
position: relative;
margin: 0 auto 50px;
clear: both;
z-index: 1;
}
.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;
}
.timeline .events {
list-style-type: none;
padding: 0;
margin: 0;
clear: both;
}
.timeline .events li {
width: 40%;
margin-bottom: 100px;
border: solid 1px #AFDCF8;
padding: 10px;
border-radius: 5px;
float: left;
clear: left;
position: relative;
}
.timeline .events li:after {
content: "";
position: absolute;
top: 30px;
left: 100%;
width: 25%; /* 10% = 1 * 40% * 25% */
height: 6px;
background-color: #AFDCF8;
}
.timeline .events li.alt {
float: right;
clear: right;
margin-top: 50px;
margin-bottom: 50px;
}
.timeline .events li.alt:before {
content: "";
position: absolute;
top: 30px;
left: -25%;
width: 25%;
height: 6px;
background-color: #AFDCF8;
}
.events img {
width: 100%;
}
最终的页面效果：
源码和视频下载
源码和视频下载地址请自行到视频中查找！ 三石出品，必属精品！
相关推荐
【三石导航.rar】是一个压缩包文件，其中包含了一个简洁且高效的导航系统。这个导航系统被称为"三石导航"，其特点在于它无广告、无弹窗，为用户提供了一个清爽的浏览体验。文件大小适中，表明设计者在保证功能的同时...
[精选]理财-三石投资.pptx
- Content文件夹：放置静态文件，如xml文件、CSS样式表。 - App_Start文件夹：放置应用初始化类。 - Controllers文件夹：存放控制器类，是MVC框架中的C（Controller）。 - Models文件夹：存放模型类，如使用EF Code ...
主要功能：0),系统统计，统计影片总数，近日更新，在线人数，计数器；1),网吧开关模块，IP管理模块；2),影片分类浏览模块；3),新闻公告模块；4),影片浏览模块；5),影片查询、排序；6)影片推荐；...
简单介绍下python的*index()*方法： 查找参数是否在list、tuple等内部，若存在返回第一个index，不存在会报ValueError。 name = ["a", "ying", "de", "san", "shi", ... File "C:\Users\阿莹的三石\Desktop\test.py",
2. 使用Bootstrap作为前端框架，使用jQuery作为JavaScript库 3. 采用MVC架构，将程序分为Model、View、Controller三个部分 4. 用户注册和登录系统使用加密算法保证安全性 5. 上传和下载代码的功能使用文件上传和下载...
本毕设将以 PHP LDU v702 汉化版为基础，通过设计和实现一个社交网络平台，来展示如何使用该框架开发功能强大、性能优越的Web应用程序。本文将简单介绍该平台的基本功能和实现方式。...3. jQuery 和 Bootstrap：
HillStone最新配置手册
例如，可以创建"Video"表存储视频基本信息，"User"表存储用户信息，"WatchHistory"表记录用户观看记录。然后，使用ASP.NET的ADO.NET组件连接到ACCESS数据库，执行CRUD（创建、读取、更新、删除）操作。 在前端界面...
同时，本系统前台应该能够支持多种不同的格式化方式，如文本、图片、视频等。此外，本系统前台应该具有良好的可扩展性，方便后期进行功能扩展和升级。 ## 系统设计方案 在本毕业设计中，我们将采用PHP作为主要的...
2. **时间管理与问题展开**：思维可视化能够帮助学生优化时间管理，因为它鼓励他们有条理地组织信息，清晰地识别问题的关键点。在活动过程中，教师们探讨了如何利用思维可视化来引导学生分析问题并寻找解决方案。 3...
前端框架使用 Bootstrap 和 jQuery，后端框架使用 CodeIgniter。系统采用 MVC 模式进行开发，具有良好的代码结构和可维护性。 ## 系统功能 1. 域名查询：用户可以通过输入域名进行查询，系统将自动获取 Whois 信息...
教师可以创建课程、发布课程内容、管理学生作业等操作。用户模块还包括权限管理、消息通知等功能，保障系统安全和用户体验。 ## 课程模块 课程模块是整个系统的核心功能，包括课程列表、课程详情、课程章节、课程...
- 前端：HTML、CSS、JavaScript、jQuery、Bootstrap等。 - 后端：PHP、MySQL等。 - 前后端交互：AJAX。 ## 开发计划 以下是该网站的开发计划： 1. 设计并实现数据库结构，完成用户和影片管理系统的开发。 2. 完善...
三石汤：主要用于清热泻火，适合热邪较重。 - C. 王氏连朴饮：清热利湿，适用于湿热并重。 - D. 三仁汤：亦能化湿，但更偏向于轻度的湿热并重。 - E. 雷氏芳香化浊法：用于化湿醒脾，适用于湿浊较重的情况。 2....
该程序旨在提供一个完整的...采用JQuery和Bootstrap框架，实现网站的响应式设计，确保在各种设备上都能正常使用。 该程序将为亿网家教网站提供一个完整的管理解决方案。它将简化网站管理流程，提高用户的体验，使网站
通过boot os重置山石防火墙密码而不影响配置文件，此操作安全可靠亲身实践，希望能帮到有需要的人。
在电子硬件设计领域，锂电池充电器是至关重要的设备，尤其对于使用三芯锂电池的设备而言。三芯锂电池，也称为Li-ion电池组，通常由三个单体锂电池串联组成，提供更高的电压，适用于需要较大能量存储的设备。...
4. 时间表管理：设定公交车的发车时间，确保公交服务的准时性。可能需要开发一个调度算法，根据路线、车辆和时间来合理安排。 5. 票务管理：包括票价设定、购票、退票等流程。ASP.NET的网页控件如TextBox、...
描述部分提到了实习生在浦东的三石律师事务所的实习经历，强调了实习的重要性以及实习期间的具体体验。实习生跟随江律师工作，从中获得了专业知识和人际交往能力的提升。描述中提到的实习收获包括对律师行业的深入...