-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
371 lines (357 loc) · 17.5 KB
/
index.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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!doctype html>
<html>
<head>
<style type="text/css">
*{ margin:0px;
padding:0px;
}/*<!--*表示通配符选择器，所有的选择器内边距和外边距都为0-->*/
body{ background-color: black;}
#container{ width:1000px;
margin:0 auto;
}
#header{ width:1000px;
margin:0 auto;
border:white 1px solid;
}
#header ul{ list-style:none;
line-height:45px;
}
#header ul li{ width:250px;
float:left;
background-color:black;
}
#header a{ background:#000;
font-size:23px;
font-family: "楷体";
font-weight:bolder;
display: block;
text-align: center;
color:white;
text-decoration:none;
}
#header ul li a:hover{ color:khaki;
background-color:moccasin;
}
h2{ font-family:"楷体";
text-align: center;
color:aliceblue;
}
h3{ font-family:"楷体";
color:darkgrey;
}
#foot{ width:1000px;
height:250px;
float:left;
border:1px white solid;
}
#foot ul{ width:1000px;
list-style:none;
}
#foot ul li{ float:left;
width:250px;
margin:0px;
}
#foot img{ float:left;
width:200px;
height:200px;
margin-right:10px;
}
#foot p{ font-size:25px;
height:90px;
padding:10px;
line-height:1em;
}
#left{ width:1000px;
border:1px white solid;
}
#pic1{ float:left;
border:white 1px solid;
}
#left1{ width:650px;
height:470px;
float:right;
/*border:1px white solid;*/
}
#left1 ul{ list-style:none;}
#left1 li{ line-height:23px;}
#left1 a{ font-family:"楷体";
text-decoration:none;
color:white;
font-weight:bolder;
padding-left:0px;
}
#left1 a:hover{ color:cyan;}
.color{ color:darkkhaki;
text-decoration:underline;
}
#middle{ width:1000px;
clear:left;
border:1px white solid;
}
#pic2{ float:right;
border:1px white solid;
}
#middle1{ float:left;}
#middle1 ul{ list-style:none;
float:right;
}
#middle1 ul li{ line-height:30px;}
#middle1 a{ padding-left:0px;
font-family:"楷体";
font-size:17px;
font-weight:bolder;
color:darkkhaki;
}
#middle1 ul li a:hover{ color:sienna;}
#middle1 p{ font-family:"楷体";
font-size:13px;
color:aliceblue;
}
#right{ width:1000px;
float:left;
border:1px white solid;
}
#right ul{ list-style:none;
}
#right ul li{ line-height:30px;}
#right a{ font-family:"楷体";
color:aliceblue;
padding-left:20px;
}
#right img{ width:150px;
height:150px;
float:left;
}
#right p{ font-size:12px;
height:90px;
padding:10px;
line-height:1.5em;
color:aliceblue;
}
#Tabs1{ width:1000px;
background:url("img/pbg_main(1).jpg")
}
#Tabs1 a{ color:black;}
#right a:hover img{ border:white 3px dotted;}
#right p a:hover{ color:gold;
border-bottom:1px dotted white;
}
#tabs-1 a,#tabs-2 a{ color:aliceblue;
font-size:13.5px;
line-height:1.5em;
}
#last{ clear:both;
text-align:center;
font-style:italic;
font-size:15px;
color:lightgray;
padding-top:25px;
}
<meta charset="utf-8">
<title>社会学211 黄国政 32103500023网页设计大作业</title>
</style>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<script src="jQueryAssets/jquery-1.11.1.min.js"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js"></script>
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
</head>
<body>
<!--<embed src="mus/meyue.mp3" autostart="true" loop="true" hidden="true">-->
<div class="demo">
<div id="player1">
</div>
</div>
<script>
var ap = new APlayer
({
element: document.getElementById('player1'),
fixed: true,
autoplay: true,
mini: true,
theme: '#f8f4fc',
loop: 'all',
order: 'list',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: 90,
lrcType: 0,
music: [
{
name:'我（粤语）',
url:'https://residualsun1.github.io/Leslie-Cheung/mus/meyue.mp3',
artist:'张国荣',
cover:'https://residualsun1.github.io/Leslie-Cheung/img/revisit.jpg'
},
{
name:'我（国语）',
url:'https://residualsun1.github.io/Leslie-Cheung/mus/me.mp3',
artist:'张国荣',
cover:'https://residualsun1.github.io/Leslie-Cheung/img/revisit.jpg'
},
]
});
//ap.init();
</script>
<div id="container">
<div id="banner">
</div><!--"banner"盒子结束-->
<img src="img/lastending.jpg">
<div id="header">
<ul>
<li><a href="#">档案</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">电影</a></li>
</ul>
</div><!--"guide"盒子结束 -->
<div id="foot">
<div align="center" id="dem1o" style="overflow:hidden;height:200px;width:1000px;">
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" id="demo11">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="图片1" src="img/roll20.jpg" width="200" border="0" height="200" /></a></td>
<td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="图片2" src="img/roll3.jpg" width="200" border="0" height="200" /></a></td>
<td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="图片3" src="img/roll4.jpg" width="200" border="0" height="200" /></a></td>
<td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="图片4" src="img/roll14.jpg" width="200" border="0" height="200" /></a></td>
<td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="图片5" src="img/roll1.jpg" width="200" border="0" height="200" /></a></td>
<td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="图片6" src="img/roll17.jpg" width="200" border="0" height="200" /></a></td>
<td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="图片7" src="img/roll10.jpg" width="200" border="0" height="200" /></a></td>
<td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="图片8" src="img/roll9.jpg" width="200" border="0" height="200" /></a></td>
<td style="padding-left:5px; padding-top:2px;"><a href="#" target="_blank"><img title="图片9" src="img/roll21.jpg" width="200" border="0" height="200" /></a></td>
</tr>
</table>
</td>
<td id="demo12"> </td>
</tr>
</table>
</div>
<script language="javascript" type="text/javascript">
<!--
var dem1o = document.getElementById("dem1o");
var demo11 = document.getElementById("demo11");
var demo12 = document.getElementById("demo12");
var speed=15; //数值越大滚动速度越慢
demo12.innerHTML = demo11.innerHTML
function Marquee(){
if(demo12.offsetWidth-dem1o.scrollLeft<=0)
dem1o.scrollLeft-=demo11.offsetWidth
else{
dem1o.scrollLeft++
}
}
var MyMar = setInterval(Marquee,speed);
dem1o.onmouseover = function(){clearInterval(MyMar)}
dem1o.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
-->
</script>
</div><!--"foot"盒子结束-->
<div id="left">
<h2>档案</h2>
<div id="pic1">
<img src="img/front_1(1).jpg">
</div>
<div id="left1">
<ul>
<marquee direction="down" scrollamount="3.5" onmouseout="this.start();" onmouseover="this.stop();">
<li><a href="#"><span class="color">中文姓名</span>：张国荣（原名张发宗）</a></li>
<li><a href="#"><span class="color">英文姓名</span>：Leslie Cheung（曾用名Bobby Frankie）</a></li>
<li><a href="#"><span class="color">别名</span>：哥哥（兄长的意思）</a></li>
<li><a href="#"><span class="color">出生地点</span>：香港九龙</a></li>
<li><a href="#"><span class="color">籍贯</span>：广东梅县</a></li>
<li><a href="#"><span class="color">出生日期</span>：1956年9月12日</a></li>
<li><a href="#"><span class="color">逝世日期</span>：2003年4月1日</a></li>
<li><a href="#"><span class="color">身高</span>：175cm</a></li>
<li><a href="#"><span class="color">体重</span>：138磅</a></li>
<li><a href="#"><span class="color">血型</span>：O型（+）</a></li>
<li><a href="#"><span class="color">最敬仰的人</span>：佣人六姐</a></li>
<li><a href="#"><span class="color">感激的恩人</span>：黎小田</a></li>
<li><a href="#"><span class="color">生活的信条</span>：忍耐，朋友是最重要的</a></li>
<li><a href="#"><span class="color">你会用什么动物比喻自己</span>：野狼（因为不论何时都需要自由，不爱受束缚）</a></li>
<li><a href="#"><span class="color">你最钟意自己面哪个部分</span>：下巴（因为看相师傅说他下巴晚年有运行所以钟意）</a></li>
<li><a href="#"><span class="color">你最唔钟意自己块哪个部分</span>：左眼（平时是双眼皮，但一到疲倦时就变成三眼皮）</a></li>
<li><a href="#"><span class="color">你最唔钟意身体哪个地方</span>：腿（因为觉得短，如果身体能修长点就好了）</a></li>
<li><a href="#"><span class="color">到目前为止最令你伤心的是何事</span>：父母亲的离世</a></li>
<li><a href="#"><span class="color">到目前为止令你最开心的是何事</span>：在康城影展上《霸王别姬》取得“格林彼治”大奖（Grand Prix）</a></li>
</marquee>
</ul>
</div>
</div><!--"left"盒子结束-->
<div id="middle">
<h2>文章</h2>
<div id="pic2">
<img src="img/front_4(2).jpg" >
</div>
<div id="middle1">
<ul>
<marquee scrollamount="3.5" onmouseout="this.start();" onmouseover="this.stop();">
<li><a href="#">《满眼烟火色——怀念张国荣！》</a></li>
<p>·在娱乐界，进来与离开的故事从来没有停息过。每天都有人惊艳盛开，每天也都有人黯然谢幕…</p>
<li><a href="#">《关于张国荣的七个关键词》</a></li>
<p>·飘浮，或游移，或无根。我不知道对于他这么一个做事靠谱性格稳重的人，我是这么得出这种印象的</p>
<p>也许是因为他八十年代着力打造的不羁浪子形象；也许是因为他太多变，他的变化不止于造型的变化……</p>
<li><a href="#">《看不透、想不通、意难平、最圆满——记张国荣》</a></li>
<p>·初相遇，君生我未生。从未喜欢一个偶像。我这个年纪，是听周杰伦的时候，买过几张他的专辑，却……</p>
<li><a href="#">《风再起时 思忆不绝——4月深入重赏发热发红的一代艺匠张国荣》</a></li>
<p>·风再起时，思忆不绝。三月底、四月初一轮乍暖还寒的春雨，一阵足以“万里卷潮来”的有情风，让我</p>
<p>猛然又再记起了一个在四月离开我们的老朋友，一个每逢了四月均倍感思念的老朋友——一代艺匠张国荣…</p>
<li><a href="#">《春夏秋冬就是一辈子》</a></li>
<p>·秋天该很好，你若尚在场……秋天是容易让人变得多愁善感的季节，没有了夏季的焦灼感，那些多余的水分</p>
<p>总是要找个去处的。总觉得，人的情绪应该是很分明的，笑就是笑，哭就是哭，来心了才会笑，不开心……</p>
<li><a href="#">《从“我”看到用心良苦的张国荣》</a></li>
<p>·I AM WHAT I AM这是张国荣在《我》歌曲里的开始。其实这首歌是张国荣自己作的曲而词却交给林夕作</p>
<p>词。但是张国荣告诉林夕这首歌的第一句词一定要以I AM WHAT I AM来开始演唱，所以可以看出来这句…</p>
<li><a href="#">《张国荣的文化标记——接纳与抗拒之间》</a></li>
<p>·张国荣是一代香港人的文化标志，他的离别除了令万千歌迷影迷伤心欲绝外，也令香港的文化褪色了……</p>
<li><a href="#">《阿飞正传：被遗忘的时光》</a></li>
<p>·我听说有一种小鸟生下来就没有脚，它们一生都在飞翔，飞累了就在风里睡觉，永远无法着地。它们一生……</p>
<li><a href="#">《斯人已逝 只留歌声——宁愿相信那不是张国荣》</a></li>
<p>·4月1日，愚人节的北京，飘着微雨的夜晚，我正和一群记者朋友在热闹的海鲜城计划下一个卡拉OK的节目……</p>
</marquee>
</ul>
</div>
</div><!--"middle"盒子结束 -->
<div id="right">
<div id="Tabs1">
<ul>
<li><a href="#tabs-1">音乐</a></li>
<li><a href="#tabs-2">电影</a></li>
</ul>
<div id="tabs-1">
<a href="#"><img src="img/2003-leslie-greatest-hits(2).jpg"></a>
<p><a>收录曲目：《当爱已成往事》、《今生今世》、《红颜白发》、《追》、《有心人》、《深情相拥》、《夜半歌声》、《一辈子失去了你》、《谈恋爱》、《眉来眼去》、《何去何从之阿飞正传》、《谈情说爱》、《A Thousand Dreams of you》</a></p>
<a href="#"><img src="img/1990-final-encounter-of-the-legend(1).jpg"></a>
<p><a>张国荣告别乐坛演唱会：《为你钟情》、《侧面》、《寂寞夜晚》、《当年情》、《千千阙歌》、《无心睡眠》、《倩女幽魂》、《暴风一族》、《由零开始》、《共同渡过》、《风继续吹》、《明星》、《风再起时》</a></p>
<a href="#"><img src="img/1999-countdown-with-you(2).jpg"></a>
<p><a>收录曲目：《左右手》、《春夏秋冬》、《心跳呼吸正常》、《同道中人》、《全世界只想你来爱我》、《小明星》、《陪你倒数》、《不要爱他》、《梦生醉死》、《寂寞有害》、《你是明星》</a></p>
</div>
<div id="tabs-2">
<a href="#"><img src="img/bawangbieji(1).jpg"></a>
<p><a>《霸王别姬》是汤臣电影有限公司出品的文艺片，改编自李碧华的同名小说，由陈凯歌执导，李碧华、芦苇编剧，张国荣、巩俐、张丰毅领衔主演。影片围绕两位京剧伶人半个世纪的悲欢离合，展现了对传统文化、人的生存状态及人性的思考与领悟。1993年该片在中国内地以及中国香港上映，此后在世界多个国家和地区公映，并且打破中国内地文艺片在美国的票房纪录。1993年，该片荣获法国戛纳国际电影节最高奖项金棕榈大奖，成为首部获</a></p>
<a href="#"><img src="img/jinzhiyuye(1).jpg"></a>
<p><a>《金枝玉叶》是东方电影发行有限公司出品的爱情电影，由陈可辛执导，张国荣、袁咏仪、刘嘉玲主演。影片讲述了少女林子颖女扮男装，因为一次男歌手招募活动闯入顾家明和玫瑰的感情世界。1994年7月23日影片在香港上映；并且拿下了香港电影暑假档票房冠军。1995年张国荣演唱的电影主题曲《追》获得第14届香港电影金像奖最佳电影歌曲奖。 </a></p>
<a href="#"><img src="img/yanzhikou(1).jpg"></a>
<p><a>《胭脂扣》是改编自李碧华同名小说的一部爱情片，由关锦鹏执导，梅艳芳、张国荣、万梓良、朱宝意主演，于1988年1月7日在中国香港上映。该片讲述了二十世纪三十年代的香港石塘咀名妓如花与纨绔子弟十二少感情纠葛的故事。</a></p>
</div>
</div>
</div><!--"right"盒子结束-->
<div id="last">
社会学211 32103500023 黄国政@版权所有
</div>
</div><!--"container"盒子结束-->
<script type="text/javascript">
$(function() {
$( "#Tabs1" ).tabs();
});
</script>
</body>
</html>