-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
228 lines (228 loc) · 9.67 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>one piece</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_563573_skg9w5tv15szia4i.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<nav class="clearfix layout">
<a class="logo milky">one piece</a>
<ul>
<li><a href="#">SERVICE</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">TEAM</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div class="welcome layout">
<h2>welcome to our world</h2>
<h1>IT'S NICE TO MEET YOU</h1>
<a href="#" class="button">TELL ME MORE</a>
</div>
</header>
<main class="layout">
<section>
<h2>故事背景</h2>
<p>蒙奇·D·路飞在遥远的路途上找寻着志同道合的伙伴，进入“伟大的航道”，目标是成为“海贼王”。</p>
<ul class="introduction clearfix">
<li>
<span class="iconfont icon-bainiangzi"></span>
<h3>东海篇</h3>
<p>蒙奇·D·路飞自小就立志要成为“海贼王”。17岁时他出海之后，接续遇见了海贼猎人罗罗亚·佐罗、航海士奈美、狙击手撒谎布、厨师山智等人并结为伙伴。他们组成了草帽海贼团准备进入伟大的航道来到罗格镇。</p>
</li>
<li>
<span class="iconfont icon-baiqian"></span>
<h3>空岛篇</h3>
<p>离开阿拉巴斯坦王国之后，草帽海贼团撞见一艘从天而降的大船，同时纪录指针竟然向上指向天空。对空岛产生兴趣的路飞靠着上升海流前往空岛。解决了空岛居民和香狄亚一族长达四百年的战争。</p>
</li>
<li>
<span class="iconfont icon-zhenhuan"></span>
<h3>长环长岛篇</h3>
<p>草帽海贼团遇见专门以Davy Back Fight游戏抢夺其它海贼团船员的银狐福克西，船医乔巴被其抢走，两个海贼团展开了对决。</p>
</li>
</ul>
</section>
<section>
<h2>人物介绍</h2>
<p>草帽海贼团成员</p>
<div class="character clearfix">
<figure>
<a href="#"><img src="images/lufei.jpg" alt=""></a>
<figcaption>蒙奇·D·路飞</figcaption>
<p>草帽海贼团船长</p>
</figure>
<figure>
<a href="#"><img src="images/suoluo.jpg" alt=""></a>
<figcaption>罗罗诺亚·索隆</figcaption>
<p>草帽海贼团副船长</p>
</figure>
<figure>
<a href="#"><img src="images/namei.jpg" alt=""></a>
<figcaption>娜美</figcaption>
<p>草帽海贼团航海士</p>
</figure>
<figure>
<a href="#"><img src="images/buluke.jpg" alt=""></a>
<figcaption>布鲁克</figcaption>
<p>草帽海贼团音乐家</p>
</figure>
<figure>
<a href="#"><img src="images/wusuopu.jpg" alt=""></a>
<figcaption>乌索普</figcaption>
<p>草帽海贼团狙击手</p>
</figure>
<figure>
<a href="#"><img src="images/xiangzhi.jpg" alt=""></a>
<figcaption>山治</figcaption>
<p>草帽海贼团厨师</p>
</figure>
<figure>
<a href="#"><img src="images/qiaoba.jpg" alt=""></a>
<figcaption>托尼托尼·乔巴</figcaption>
<p>草帽海贼团船医</p>
</figure>
<figure>
<a href="#"><img src="images/luobin.jpg" alt=""></a>
<figcaption>妮可·罗宾</figcaption>
<p>草帽海贼团考古学家</p>
</figure>
<figure>
<a href="#"><img src="images/fulanqi.jpg" alt=""></a>
<figcaption>弗兰奇</figcaption>
<p>草帽海贼团船工</p>
</figure>
</div>
</section>
<section>
<h2>剧场版</h2>
<p>海贼王剧场版是根据《海贼王》漫画改编，由东映原创的一系列动画电影。</p>
<ul class="movie">
<li>
<img src="images/movie-1.jpg" alt="">
<dl>
<dt>航海王：黄金岛冒险</dt>
<dd>上映时间：2000-03-04</dd>
<dd>
传说中的黄金大盗乌南，带着大批黄金隐居到某座岛屿，之后生死不明，向着伟大航道持续前进的的路飞一行人，遇到了梦想成为乌南的部下的少年托比欧，他因为不愿继承爷爷经营的甜不辣摊，和爷爷闹的很不愉快，而爱黄金成痴的海贼艾拉德哥也正窥视著乌南埋藏的黄金……
</dd>
</dl>
</li>
<li>
<img
src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=8eba3083c5fc1e17fdbf8b3772ab913e/d4628535e5dde7115dfcc463adefce1b9d16617d.jpg"
alt="">
<dl>
<dt>航海王：发条岛的冒险</dt>
<dd>上映时间：2001-03-03</dd>
<dd>
草帽海贼团的船“黄金梅利号”在悠闲度假大伙眼前被偷走了，后来他们在寻找船的途中遇到一对小偷兄弟，从他们口中打听到小偷是现在统治著发条岛的“扑克牌海贼团”，而小偷兄弟正好也要去偷取岛上著名的“钻石钟”，双方的目标一致，决定联手攻进扑克牌海贼团的大本营，但可怕的头目“大熊王”手中却掌握著攸关整座发条岛生死的巨大发条……
</dd>
</dl>
</li>
<li>
<img
src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=cefcc7b9632762d0803ea3b998d76fc7/a71ea8d3fd1f4134f01a7de4251f95cad1c85e7e.jpg"
alt="">
<dl>
<dt>航海王：珍兽岛的乔巴王国</dt>
<dd>上映时间：2002-03-02</dd>
<dd>
在伟大的航道上，路飞一行人朝着目的地前进…这一次所要去的地方是娜美前阵子所得到手的地图珍兽岛，传说有的宝物在那里。在大家像平时一样在船上悠闲的做着自己的事时，海中的火山爆发，海水向上喷发，把一座小岛围了起来，原来，珍兽岛已经到了。
</dd>
</dl>
</li>
<li>
<img
src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=a29116e6a7345982c58ae29434cf5690/faedab64034f78f0c27a186173310a55b3191c2a.jpg"
alt="">
<dl>
<dt>航海王：死亡尽头的冒险</dt>
<dd>上映时间：2003-03-01</dd>
<dd>草帽海贼团来到汉
那巴尔，吃饭的时候奈美注意到老板正和某位海贼在做可疑的交易，一问之下才知道，地下赌场正在举办每年一次的死亡海上竞赛，而且今年的奖金高达3亿贝里，为了寻求奖金和冒险的一行参加决定参加这场比赛。
</dd>
</dl>
</li>
<li>
<a class="more"></a>
</li>
</ul>
</section>
<section>
<h2>Voice actor</h2>
<p>声优是一部作品的灵魂，没有声优的动画不过是一具空壳。</p>
<ul class="introduction voice-actor clearfix">
<li>
<img src="images/zhongjin.jpg" alt="">
<h3>中井和哉</h3>
<p>代表作：【海贼王 之 索隆】【银魂 之 土方十四郎】【青之驱魔师 之 胜吕龙士】【战国BASARA 之 伊达政宗】</p>
<ul class="icon clearfix">
<li><a href="#"><i class="iconfont icon-facebook"></i></a></li>
<li><a href="#"><i class="iconfont icon-linkedin"></i></a></li>
<li><a href="#"><i class="iconfont icon-twitter"></i></a></li>
</ul>
</li>
<li>
<img src="images/dagu.jpg" alt="">
<h3>大谷育江</h3>
<p>代表作：【海贼王 之 少年山治、乔巴】【火影忍者 之 木叶丸】【神奇宝贝 之 皮卡丘】【名侦探柯南 之 圆谷光彦】</p>
<ul class="icon clearfix">
<li><a href="#"><i class="iconfont icon-facebook"></i></a></li>
<li><a href="#"><i class="iconfont icon-linkedin"></i></a></li>
<li><a href="#"><i class="iconfont icon-twitter"></i></a></li>
</ul>
</li>
<li>
<img src="images/sanshiqinnai.jpg" alt="">
<h3>三石琴乃</h3>
<p>代表作：【海贼王 之 波雅汉库克】【美少女战士 之 月野兔】【麻辣教师GTO 之 神崎丽美】【大剑 之 珍】</p>
<ul class="icon clearfix">
<li><a href="#"><i class="iconfont icon-facebook"></i></a></li>
<li><a href="#"><i class="iconfont icon-linkedin"></i></a></li>
<li><a href="#"><i class="iconfont icon-twitter"></i></a></li>
</ul>
</li>
</ul>
</section>
</main>
<footer class="layout">
<h2>contact us</h2>
<p>we are here,ACG（Anime, Comic and Games）is here also</p>
<ul class="feedback clearfix">
<li>
<input class="style" type="text" placeholder="YOUR NAME*" >
<input class="style" type="text" placeholder="YOUR EMAIL*">
<input class="style" type="text" placeholder="YOUR PHONE*">
</li>
<li >
<textarea name="message" rows="9" placeholder="SEND MESSAGE*" class="style"></textarea>
</li>
</ul>
<a href="#" class="button">SEND MESSAGE</a>
</footer>
<div class="supplement layout">
<ul class="description clearfix">
<li>
<p>Copyright © Your Website 2014</p>
</li>
<li>
<ul class="icon clearfix" >
<li><a href="#"><i class="iconfont icon-facebook"></i></a></li>
<li><a href="#"><i class="iconfont icon-linkedin"></i></a></li>
<li><a href="#"><i class="iconfont icon-twitter"></i></a></li>
</ul>
</li>
<li>
<a>Privacy Policy</a>
<a>Terms of Use</a>
</li>
</ul>
</div>
</body>
</html>