<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>网易2014世界杯史话/世界杯时间轴效果_模板在线</title>
<meta name="keywords" content="世界杯史话,世界杯时间轴,Tabslet,Tab,网易">
<meta name="description" content="2014巴西世界杯正在如火如荼的进行中，作为球迷们，你们对世界杯的了解有多少呢？如果了解不多的话，可以看看网易2014巴西世界杯专题页面的“世界杯史话”栏目。该栏目不仅信息全面，而且效果也不错，看上去就像世界杯时间轴一样，今天我们用jQuery Tab选项卡插件Tabslet也来做一个吧。">
<style>
* { margin: 0; padding: 0;}
ul { list-style-type: none;}
.tabs { position: relative; width: 960px; margin: 0 auto; padding-top: 90px;}
.tabs a { text-decoration: none;}
.tabNav { margin-bottom: 25px; font-size: 0; text-align: center;}
.tabNav li { position: relative; display: inline-block; width: 38px; font-size: 12px; *display: inline; *zoom: 1;}
.tabNav a { text-decoration: none;}
.tabNav strong { display: none; position: absolute; left: -80px; top: -73px; width: 200px; height: 38px; font: 16px/38px "Microsoft Yahei"; color: #fff; background-color: #059e3f;}
.tabNav strong em { font-style: normal; color: #fffc1f;}
.tabNav b { display: none; position: absolute; left: 19px; top: -35px; height: 35px; border-left: 1px solid #059e3f;}
.tabNav i { display: none; position: absolute; left: 14px; top: 0; width: 11px; height: 11px; border-radius: 11px; background-color: #059e3f; overflow: hidden;}
.tabNav .year { display: block; height: 20px; padding-top: 18px; font: 11px/20px arial; text-align: center; color: #888; background: url(images/graduate_bg2.png) 0 0 no-repeat; cursor: pointer;}
.tabNav .first .year { background-image: url(images/graduate_bg1.png);}
.tabNav .active strong, .tabNav .active b, .tabNav .active i { display: block;}
.tabPane { width: 960px; height: 508px;}
.tabPane .info { float: left; width: 221px; height: 508px; background-color: #059e3f;}
.tabPane .info h3 { padding: 35px 25px 0; font: 22px "Microsoft Yahei"; color: #fff;}
.tabPane .info p { margin: 12px 25px 0; line-height: 22px; font-size: 12px; color: #fff; text-indent: 2em;}
.tabPane .img { float: right; width: 737px;}
.tabPane { margin: -2px -2px 0 0;}
.tabPane ul { margin-top: -2px;}
.tabPane li { position: relative; float: left; height: 253px; overflow: hidden;}
.tabPane img { display: block; border: 0 none;}
.tabPane .odd { width: 245px; height: 253px; margin: 2px 2px 0 0;}
.tabPane .odd h4 { position: absolute; left: 0; bottom: 0; _bottom: -1px; width: 215px; padding: 0 15px; font: 22px/53px "Microsoft Yahei"; color: #fff; background: #4a4a4a;}
.tabPane .odd img { width: 245px; height: 200px;}
.tabPane .txtOut { position: absolute; left: 0; top: 0; display: table; width: 100%; height: 200px; visibility: hidden;}
.tabPane .txt { display: table-cell;width: 221px; height: 176px; padding: 12px; line-height: 18px; font-size: 12px; color: #fff; background: url(images/bg_01.png) 0 0 repeat; vertical-align: middle;}
.tabPane .even { width: 490px; height: 253px; margin-top: 2px; overflow: hidden;}
.tabPane .even h4 { position: absolute; right: 0; top: 0; width: 34px; height: 221px; padding: 16px 10px; font: 22px/24px "Microsoft Yahei"; text-align: center; color: #fff; background-color: #4a4a4a;}
.tabPane .even img { width: 436px; height: 253px;}
.tabPane .even .txtOut { width: 436px; height: 100%;}
.tabPane .even .txt { width: 412px; height: 229px;}
.tabPane h5 { margin-bottom: 4px; font-size: 14px;}
.tabPane a:hover .txtOut { visibility: visible;}
.tabs .prev, .tabs .next { position: absolute; top: 370px; width: 58px; height: 58px; border-radius: 58px; font: 30px/58px SimSun,sans-serif; color: #fff; text-align: center; background-color: #000;}
.tabs .prev { left: -80px;}
.tabs .next { right: -80px;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.tabslet.min.js"></script>
<script>
$(function(){
$('.tabs').tabslet({
animation: true,
controls: {
prev: '.prev',
next: '.next'
}
});
});
</script>
</head>
<body>
<h1>Owl Carousel制作网易2014巴西世界杯专题幻灯片演示</h1>
<!-- Demo -->
<div class="tabs">
<a href="javascript:" class="prev" title="上一届"><</a> <a href="javascript:" class="next" title="下一届">></a>
<ul class="tabNav">
<li class="first"><a href="#tab-1">
<strong>第<em>1</em>届<em>乌拉圭</em>世界杯</strong>
<b></b><i></i>
<span class="year">1930</span>
</a></li>
<li><a href="#tab-2">
<strong>第<em>2</em>届<em>意大利</em>世界杯</strong>
<b></b><i></i>
<span class="year">1934</span>
</a></li>
<li><a href="#tab-3">
<strong>第<em>3</em>届<em>法国</em>世界杯</strong>
<b></b><i></i>
<span class="year">1938</span>
</a></li>
<li><a href="#tab-4">
<strong>第<em>4</em>届<em>巴西</em>世界杯</strong>
<b></b><i></i>
<span class="year">1950</span>
</a></li>
<li><a href="#tab-5">
<strong>第<em>5</em>届<em>瑞士</em>世界杯</strong>
<b></b><i></i>
<span class="year">1954</span>
</a></li>
<li><a href="#tab-6">
<strong>第<em>6</em>届<em>瑞典</em>世界杯</strong>
<b></b><i></i>
<span class="year">1958</span>
</a></li>
<li><a href="#tab-7">
<strong>第<em>7</em>届<em>智利</em>世界杯</strong>
<b></b><i></i>
<span class="year">1962</span>
</a></li>
<li><a href="#tab-8">
<strong>第<em>8</em>届<em>英国</em>世界杯</strong>
<b></b><i></i>
<span class="year">1966</span>
</a></li>
<li><a href="#tab-9">
<strong>第<em>9</em>届<em>墨西哥</em>世界杯</strong>
<b></b><i></i>
<span class="year">1970</span>
</a></li>
<li><a href="#tab-10">
<strong>第<em>10</em>届<em>西德</em>世界杯</strong>
<b></b><i></i>
<span class="year">1974</span>
</a></li>
<li><a href="#tab-11">
<strong>第<em>11</em>届<em>阿根廷</em>世界杯</strong>
<b></b><i></i>
<span class="year">1978</span>
</a></li>
<li><a href="#tab-12">
<strong>第<em>12</em>届<em>西班牙</em>世界杯</strong>
<b></b><i></i>
<span class="year">1982</span>
</a></li>
<li><a href="#tab-13">
<strong>第<em>13</em>届<em>墨西哥</em>世界杯</strong>
<b></b><i></i>
<span class="year">1986</span>
</a></li>
<li><a href="#tab-14">
<strong>第<em>14</em>届<em>意大利</em>世界杯</strong>
<b></b><i></i>
<span class="year">1990</span>
</a></li>
<li><a href="#tab-15">
<strong>第<em>15</em>届<em>美国</em>世界杯</strong>
<b></b><i></i>
<span class="year">1994</span>
</a></li>
<li><a href="#tab-16">
<strong>第<em>16</em>届<em>法国</em>世界杯</strong>
<b></b><i></i>
<span class="year">1998</span>
</a></li>
<li><a href="#tab-17">
<strong>第<em>17</em>届<em>韩日</em>世界杯</strong>
<b></b><i></i>
<span class="year">2002</span>
</a></li>
<li><a href="#tab-18">
<strong>第<em>18</em>届<em>德国</em>世界杯</strong>
<b></b><i></i>
<span class="year">2006</span>
</a></li>
<li><a href="#tab-19">
<strong>第<em>19</em>届<em>南非</em>世界杯</strong>
<b></b><i></i>
<span class="year">2010</span>
</a></li>
</ul>
<div class="tabPane" id="tab-1">
<div class="info">
<h3>基本信息</h3>
<p>1930年恰逢乌拉圭独立100周年，第1届世界杯也决定在当时的足球第一强国乌拉圭举行。由于前往南美洲参赛费用高昂，不少欧洲国家都拒绝参加第1届的世界杯，只有4支欧洲球队参加。最终东道主乌拉圭在决赛中4-2战胜阿根廷捧得冠军奖杯，“独臂将军”卡斯特罗锁定胜局，乌拉圭成为历史上第一个世界杯冠军。本届比赛的最佳球�
世界杯史话,世界杯时间轴,Tabslet,Tab,网易JS代码.zip
版权申诉
173 浏览量
2021-12-02
13:23:51
上传
评论
收藏 2.77MB ZIP 举报
世界杯史话,世界杯时间轴,Tabslet,Tab,网易JS代码.zip （83个子文件） 
世界杯史话,世界杯时间轴,Tabslet,Tab,网易JS代码 images 
graduate_bg1.png 1KB bg_01.png 3KB graduate_bg2.png 1KB js 
jquery.tabslet.min.js 3KB jquery-1.8.3.min.js 91KB
index.html 54KB
1.jpg 112KB img 43.jpg 21KB 2.png 121KB 4.jpg 30KB 50.jpg 32KB 38.jpg 35KB 26.jpg 30KB 48.jpg 23KB 11.jpg 9KB 49.jpg 16KB 47.jpg 15KB 65.jpg 20KB 21.jpg 12KB 44.png 284KB 31.jpg 9KB 66.jpg 27KB 45.jpg 19KB 51.jpg 14KB 28.png 172KB 58.jpg 21KB 37.jpg 16KB 35.jpg 22KB 74.png 278KB 12.jpg 13KB 17.jpg 17KB 41.jpg 14KB 60.jpg 36KB 36.jpg 32KB 75.jpg 12KB 68.jpg 31KB 46.jpg 38KB 39.jpg 12KB 29.jpg 14KB 67.jpg 14KB 64.jpg 31KB 52.jpg 43KB 59.jpg 20KB 70.jpg 46KB 16.png 125KB 73.jpg 24KB 61.jpg 25KB 25.jpg 13KB 15.jpg 9KB 13.jpg 11KB 76.jpg 32KB 33.jpg 15KB 34.jpg 38KB 27.jpg 13KB 54.jpg 29KB 30.jpg 36KB 63.jpg 13KB 3.jpg 9KB 32.jpg 31KB 57.jpg 14KB 20.jpg 34KB 71.jpg 13KB 6.jpg 30KB 18.jpg 41KB 10.jpg 36KB 69.jpg 20KB 56.jpg 25KB 62.jpg 28KB 1.jpg 15KB 24.jpg 18KB 7.jpg 7KB 9.jpg 19KB 72.jpg 29KB 53.jpg 14KB 22.jpg 41KB 55.jpg 12KB 23.jpg 7KB 42.jpg 26KB 14.png 129KB 40.jpg 24KB 8.jpg 36KB 19.jpg 11KB 5.jpg 17KB
智慧化智能化数字化方案
- 粉丝: 479
- 资源: 1万+
最新资源
- 基于Matlab实现扩展卡尔曼滤波EKF源码+项目说明+超详细注释.zip
- 学生课程实验的流程.doc
- 微信消息防撤回证据记录软件-大飞哥软件自习室.exe
- 2023-04-06-项目笔记 - 第一百二十阶段 - 4.4.2.118全局变量的作用域-118 -2024.05.01
- 课程设计基于python+mediapipe+opencv手势识别系统源码（含示例图片）.zip
- 联想L-IG41M v1.0 BIOS
- 学生课程实验的流程.doc
- 基于MATLAB和Simulink通过正运动学和逆运动学设计了PID控制器.zip
- 文档内置图片提取工具 2.0能够将WORD PDF PPT等文档里面的图片解析并提取出来.exe
- 2023-04-06-项目笔记 - 第一百二十阶段 - 4.4.2.118全局变量的作用域-118 -2024.05.01
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0