-
Notifications
You must be signed in to change notification settings - Fork 0
/
charactor.html
211 lines (180 loc) · 8.96 KB
/
charactor.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
<title>主要人物</title>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slick-slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
prevArrow: '<div class="slick-prev">←</div>',
nextArrow: '<div class="slick-next">→</div>',
autoplay: true,
autoplaySpeed: 2000,
});
});
</script>
</head>
<body>
<div id="container">
<header>
<a href="index.html"><img src="images/hplogo.jpg" ></a>
</header><br>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="charactor.html">Charactor</a></li>
<li><a href="newmovie.html">New Movie</a></li>
<li><a href="jkrowling.html">Author</a></li>
<li><a href="contact.html">Registration</a></li>
</ul>
</nav>
<main>
<section>
<h1>哈利·波特</h1>
<img class="equip" src="images/harry.jpg" >
<p>哈利·波特,是詹姆·波特和莉莉·波特（原名莉莉·伊万斯）的独生子,就读于霍格沃茨魔法学校格兰芬多学院,曾两次在阿瓦达索命下依然存活,被称为“大难不死的男孩”(The boy who lived)。他曾多次阻止伏地魔的行动,被称为“救世之星”他的头衔是三强争霸赛勇士,格兰芬多找球手,格兰芬多球队队长,邓布利多军领导人,死神的主人,S.P.E.W.秘书,傲罗。
哈利·波特的妻子为金妮·波特（原名金妮·韦斯莱,罗恩·韦斯莱的妹妹）,与其育有三个孩子,詹姆·小天狼星·波特,阿不思·西弗勒斯·波特和莉莉·卢娜·波特。</p>
<ul class="items">
<li>混血巫师</li>
<li>魔杖: 长11英寸 冬青木 杖芯是凤凰福克斯的尾羽</li>
<li>格兰芬多学院</li>
</ul>
</section>
<br/><br/>
<section>
<h1>赫敏·格兰杰</h1>
<img class="equip" src="images/hermione.jpeg" >
<p>赫敏·格兰杰,出生于1979年9月19日,是麻瓜（非魔法）家庭的唯一孩子,被称为“麻瓜出身” 。虽然赫敏是麻瓜出身,但她的魔法实力在霍格沃茨却是名列前茅,她在1991年9月1日进入学校读书,被分进格兰芬多学院。她精通学术、用功好学,被认为是天才,但是同时又有些书生气。在学习过程中,与哈利·波特、罗恩·韦斯莱成为好朋友,即著名的“魔法铁三角”。和哈利·波特还有其他一些人一样,赫敏·格兰杰很少会被伏地魔的名字吓到,1995年后敢于直呼其名,而不是使用“神秘人”(You-Know-Who)或者“那个连名字都不能提的人”(The-One-Who-Must-Not-Be-Named)。
赫敏·格兰杰在打败伏地魔的斗争中发挥了巨大作用,她的魔法知识多次令三人化险为夷。</p>
<ul class="items">
<li>麻瓜出身</li>
<li>魔杖：十四英寸,是葡萄藤木,杖芯是龙的心脏腱索。</li>
<li>格兰芬多学院</li>
</ul>
</section>
<br/><br/>
<section>
<h1>罗恩·韦斯莱</h1>
<img class="equip" src="images/ron.jpg">
<p>罗恩·韦斯莱,生于1980年3月1日,是纯血统巫师家庭——韦斯莱家族的一员。在霍格沃茨,罗恩展现出了他的勇气与智慧,不仅在魔法学业上取得了不俗的成绩,还在魁地奇球场上以守门员的身份多次助力学院赢得胜利。并且最终和赫敏·格兰杰结婚并育有两个孩子,分别是罗丝·韦斯莱及雨果·韦斯莱。曾担任2年傲罗,后担任韦斯莱魔法把戏坊店长。其父亲为曾在魔法部担任禁止滥用麻瓜物品司司长的亚瑟·韦斯莱。</p>
<ul class="items">
<li>纯血巫师</li>
<li>魔杖：（旧）——查理用过得有点破损的旧魔杖，里面的独角兽毛能从末端露出来。在打人柳处几乎被折断，后来不得不用魔法胶修补，被洛哈特教师抢去使用时魔咒<br />从后端发射击中了洛哈特自己。
<br /> （新）——十四英寸，柳木，独角兽毛。</li>
<li>格兰芬多学院</li>
</ul>
</section>
<div class="video">
<video controls=>
<source src="media/hpall.mp4" type="video/mp4">
</video>
</div><br><br><br>
<section class="tablet">
<h1>其他人物</h1>
<div class="root">
<div class="slick-slider">
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E4%BA%9A%E7%91%9F%C2%B7%E9%9F%A6%E6%96%AF%E8%8E%B1/7495305">
<img src="images/arthur.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E8%B4%9D%E6%8B%89%E7%89%B9%E9%87%8C%E5%85%8B%E6%96%AF%C2%B7%E8%8E%B1%E6%96%AF%E7%89%B9%E5%85%B0%E5%A5%87?fromModule=lemma_search-box">
<img src="images/bellatrix.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E9%87%91%E5%A6%AE%C2%B7%E9%9F%A6%E6%96%AF%E8%8E%B1?fromModule=lemma_search-box">
<img src="images/ginny.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E7%A7%8B%C2%B7%E5%BC%A0?fromtitle=%E7%A7%8B%E5%BC%A0&fromid=11229678&fromModule=lemma_search-box">
<img src="images/cho.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E5%BE%B7%E6%8B%89%E7%A7%91%C2%B7%E9%A9%AC%E5%B0%94%E7%A6%8F?fromModule=lemma_search-box">
<img src="images/draco.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E9%B2%81%E4%BC%AF%C2%B7%E6%B5%B7%E6%A0%BC/5842586?fromModule=search-result_lemma">
<img src="images/hagrid.png" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E9%87%91%E6%96%AF%E8%8E%B1%C2%B7%E6%B2%99%E5%85%8B%E5%B0%94?fromModule=lemma_search-box">
<img src="images/kingsley.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E5%8D%A2%E4%BF%AE%E6%96%AF%C2%B7%E9%A9%AC%E5%B0%94%E7%A6%8F/82441?lemmaFrom=lemma_relation_starMap&fromModule=lemma_relation-starMap&lemmaIdFrom=3861538">
<img src="images/lucius.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E5%8D%A2%E5%A8%9C%C2%B7%E6%B4%9B%E5%A4%AB%E5%8F%A4%E5%BE%B7?fromModule=lemma_search-box">
<img src="images/luna.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E8%8E%B1%E5%A7%86%E6%96%AF%C2%B7%E7%BA%A6%E7%BF%B0%C2%B7%E5%8D%A2%E5%B9%B3?fromModule=lemma_search-box">
<img src="images/lupin.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E7%B1%B3%E5%8B%92%E5%A8%83%C2%B7%E9%BA%A6%E6%A0%BC/1921304?fr=ge_ala">
<img src="images/mcgonagall.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E7%BA%B3%E5%A8%81%C2%B7%E9%9A%86%E5%B7%B4%E9%A1%BF?fromModule=lemma_search-box">
<img src="images/neville.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E5%B0%8F%E5%A4%A9%E7%8B%BC%E6%98%9F%C2%B7%E5%B8%83%E8%8E%B1%E5%85%8B?fromModule=lemma_search-box">
<img src="images/sirius.JPG" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E4%BC%8F%E5%9C%B0%E9%AD%94/1127381">
<img src="images/voldemort.jpg" >
</a>
</div>
<div class="sliderItem">
<a href="https://baike.baidu.com/item/%E8%A5%BF%E5%BC%97%E5%8B%92%E6%96%AF%C2%B7%E6%96%AF%E5%86%85%E6%99%AE?fromModule=lemma_search-box">
<img src="images/snape.jpg" >
</a>
</div>
</div>
</section>
</main>
<footer>
<!-- 社交媒体链接 -->
<div id="social">
<p>
联系我们:</p>
<p><a href="http://weibo.com/xjtuofficial/profile?s=6cm7D0&sudaref=widget.weibo.com"><img src="images/weibo.png" ></a>
<a href="https://www.xjtu.edu.cn/"><img src="images/wechat.png"></a></p>
</div>
AKURA VIC<br>
<!-- 下载链接 -->
<div>
<a href="media/hp.mp4" download>下载本页视频</a><br>
<a href="media/hpthsong.mp3" download>下载本页音频</a>
</div>
</footer>
</div>
</body>
</html>