-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathidols.html
235 lines (223 loc) · 13.9 KB
/
idols.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<title>Idols</title>
<meta charset="utf-8">
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/FuturisExtra_400.font.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '701px', 'float' : 'left'});
$('div.content-gallery').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 3,
preloadAhead: 3,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: 'previous',
nextLinkText: 'next',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png, #twitter, .carousel-box button.prev, .carousel-box button.next, div.nav-controls a.prev, div.nav-controls a.next');
</script>
<link href="css/ie/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE]>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
</head>
<body id="page4">
<div id="tail-top-right"></div>
<div id="main-tail-ver">
<div id="main-tail-top">
<div id="main-bg-top">
<div id="main">
<!-- header -->
<div id="header-bg">
<header>
</header>
</div>
<!-- content -->
<div id="content-bg">
<section id="content">
<div id="indent">
<div class="wrapper">
<article id="column-left">
<nav>
<ul>
<li ><a href="index.html">Home</a></li><br />
<li ><a href="projects-overview.html">Projects</a></li><br />
<li class="act"><a href="idols.html">Idols </a></li><br />
<li><a href="articles.html">Articles and Photos</a></li><br />
</ul>
</nav>
</article>
<article id="column-right">
<div class="content-box">
<div class="tail">
<div class="top">
<div class="bot">
<div class="inner">
<div class="wrapper-1">
<h2 style=" font-family: '宋体';color:#61B34D">一些我喜欢的。。。</h2>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content-gallery">
<div class="wrapper">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
</div>
<div class="wrapper">
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li> <a class="thumb" name="leaf" href="images/inter/logo.jpg" title="Title #0"> <img alt="" src="images/inter/cc-1.jpg" /></a>
<div class="caption">
<br />
<div class="work-caption" style=" font-family: '宋体';color:#61B34D">国际米兰</div>
<h3>这是我最喜欢的足球俱乐部。</h3>
<div class="image-desc">
<p >我想我爱上国际米兰大概是从2002年5月5日开始的，那天，国际米兰意甲夺冠失败，罗纳尔多的泪水让我无可救药的爱上了国际米兰。十几年过去了，很多球员来了又走，很多教练来了又走。我也从一个男孩成长为一个男人。2010年的五冠王，让我无比幸福。2011年鸟巢现场看球的经历让我至今难以忘怀。感谢国际米兰这么多年带给我的快乐带给我的悲伤。可以牵挂着你，是多么美好的一件事情。我不会矫情地说我的血液是蓝色的，我只会说：国际米兰，永远在我心中。</p>
</div>
</div>
</li>
<li> <a class="thumb" name="leaf" href="images/LP/new.jpg" title="Title #0"> <img alt="" src="images/LP/big-1.jpg" /> </a>
<div class="caption"><br />
<div class="work-caption" style=" font-family: '宋体';color:#61B34D">Linkin Park</div>
<h3>是他们带我走入欧美音乐的世界</h3>
<div class="image-desc">
<p> 当我第一次听到他们的音乐的时候，整个人都沸腾了。他们让我领略到不同的音乐，奇妙的混合，完美的搭配。每首歌都能给人带来无穷的力量。他们的音乐陪伴我走过了初中，高中，大学。每一首歌都听过不知道多少次，从来没有听厌过。</p>
<ul>
</ul>
</div>
</div>
</li>
<li class="extra"> <a class="thumb" name="leaf" href="images/Nirvana/big.jpg" title="Title #0"> <img alt="" src="images/Nirvana/Logo.jpg" /> </a>
<div class="caption"><br />
<div class="work-caption" style=" font-family: '宋体';color:#61B34D">Nirvana</div>
<h3>It's better to burn out than to fade away</h3>
<div class="image-desc">
<p>听的第一首他们的歌反而是他们翻唱的"where did you sleep last night"，无比迷恋Cobain的嗓音。而被他们的Smells like teen spirit、Come as you are等等彻底征服。他们的那次不插电我看了很多很多次。可惜Cobain选择结束自己的生命，感谢他们给这个世界带来的美妙的音乐。</p>
</div>
</div>
</li>
<li> <a class="thumb" name="leaf" href="images/Eminem/logo.jpg" title="Title #0"> <img alt="" src="images/Eminem/logo-1.jpg" /> </a>
<div class="caption"><br />
<div class="work-caption" style=" font-family: '宋体';color:#61B34D">Eminem</div>
<h3>我最喜欢的说唱歌手</h3>
<div class="image-desc">
<p>在美国，白人说唱歌手总是一个异类。而Eminem更是他们之中的王者。也许以前的他总是桀骜不驯，无视规则，没心没肺地唱着"without me"。这些年随着他的成熟，随着他对女儿的责任感越来越重，他的歌越来越深刻越来越值得回味。</p>
</div>
</div>
</li>
<li> <a class="thumb" name="leaf" href="images/GD/logo.jpg" title="Title #0"> <img alt="" src="images/GD/logo-1.jpg" /> </a>
<div class="caption"><br />
<div class="work-caption" style=" font-family: '宋体';color:#61B34D">Green day</div>
<h3>忘不了他们的声音</a></h3>
<div class="image-desc">
<p>他们的一首"wake me up when september ends"我也不知道自己听过多少遍。他们音乐中的反抗、和平、迷失、怀念都深深影响着一代人。玩摇滚的也许在大家看来很闹很叛逆，但他们却在用自己的方式呼唤着爱和和平。喜欢的乐队还有很多:coldplay、maroon 5、oasis、五月天，这些音乐给予我力量，给予我勇气、陪伴我度过生命中一个个重要的阶段。</p>
</div>
</div>
</li>
<li class="extra"> <a class="thumb" name="leaf" href="images/Batman/big.jpg" title="Title #0"> <img alt="" src="images/Batman/logo.jpg" /> </a>
<div class="caption" > <br />
<div class="work-caption" style=" font-family: '宋体';color:#61B34D">Batman</div>
<h3>每个男生都有英雄梦</h3>
<div class="image-desc">
<p>也许把他放在这有一点违和感。但每个男生都有自己的英雄梦。诺兰的蝙蝠侠三部曲是我最喜欢的电影系列。里面的蝙蝠侠用自己的方式默默守护着高谭市的和平，维护着高谭市的正义。即使自己被误解，即使人们把他当做恶人，他仍愿意为人民付出。内心有自己的原则，有自己的信仰，并为此努力付出。还有比这更可爱的超级英雄吗？</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="controls"></div>
<!-- END Advanced Gallery Html Containers -->
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
</div>
<!-- footer -->
<div id="footer-tail">
<footer>
<div class="inner">
<div class="wrapper">
<div class="block-1">
<dl class="list-1">
<dt>卢云骋 @ 2013</dt>
<dd>您可以随意复制</a></dd>
</dl>
<p>
<!-- {%FOOTER_LINK} -->
</p>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>