静态网页设计——海贼王

前言

使用前端经典三件套HTML+CSS+JS实现的海贼王静态网页课程设计，适合我们的童年！

主要内容

首页

首页最上方有一个轮播图，可以自动切换图片，使用js实现。

轮播图往下，就是列出一些比较经典的海贼王影片，点击按钮，可以跳转到视频播放网站。

继续往下走，有一个向左滑动的人物卡片条，可以不断的进行向左滑动。

再往下，列出了一些海贼王中的主要人物，点击人物名字的话，会跳转到人物介绍的详细界面。

部分代码如下：

<script>
			$(document).ready(function() {
				$('.popup-with-zoom-anim').magnificPopup({
					type: 'inline',
					fixedContentPos: false,
					fixedBgPos: true,
					overflowY: 'auto',
					closeBtnInside: true,
					preloader: false,
					midClick: true,
					removalDelay: 300,
					mainClass: 'my-mfp-zoom-in'
			});
		});
		</script>

<div id="nav">
    <ul class="ul_one">
    <li><a href="#">动漫首页</a></li>
    <li><a href="#">专区首页</a></li>
    <li><a href="https://manhua.fzdm.com/02//" target="_blank">海贼王漫画</a></li>
    <li><a href="http://dongman.2345.com/dm/162.html" target="_blank">海贼王动画</a></li>
    <li><a href="https://weibo.com/talkop?is_all=1" target="_blank">海贼王分析</a></li>
    <li><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%BA%A3%D4%F4%CD%F5%CD%BC%C6%AC&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=111111" target="_blank">海贼王图片</a></li>
    <li><a href="https://shop59961308.taobao.com/" target="_blank">海贼王周边</a></li>
    <li><a href="https://www.bilibili.com/video/av61434646/" target="_blank">海贼王日志</a></li>
    <li><a href="http://bbs.talkop.com/" target="_blank">海贼王论坛</a></li>
    </ul>
    <ul class="ul_two">
      <li></li>
      <li>海贼王漫画更新：<a href="https://manhua.fzdm.com/02//981/" target="_blank">海贼王漫画第981话</a></li>
      <li><a href="https://manhua.fzdm.com/02//980/" target="_blank">海贼王漫画第980话</a></li>
      <li><a href="https://manhua.fzdm.com/02//979/" target="_blank">海贼王漫画第979话</a></li>
      <li><a href="https://manhua.fzdm.com/02//978/" target="_blank">海贼王漫画第978话</a></li>
    </ul>
    <ul class="ul_two">
      <li>海贼王动画更新：<a href="https://www.iqiyi.com/v_19ryjcot4k.html?vfm=f_178_2345&fv=p_07_01" target="_blank">海贼王动画第929集</a></li>
      <li><a href="https://www.iqiyi.com/v_19ryfdvx4k.html?vfm=f_178_2345&fv=p_07_01" target="_blank">海贼王动画第928集</a></li>
      <li><a href="https://www.iqiyi.com/v_19rwuk0o3o.html?vfm=f_178_2345&fv=p_07_01" target="_blank">海贼王动画第927集</a></li>
      <li><a href="https://www.iqiyi.com/v_19rwp8jv3w.html?vfm=f_178_2345&fv=p_07_01" target="_blank">海贼王动画第926集</a></li>
    </ul>
    <ul class="ul_two">
      <li>海贼王大电影：<a href="https://www.iqiyi.com/w_19rzpts4c5.html" target="_blank">《海贼王:黄金岛冒险》</a></li>
      <li><a href="https://www.iqiyi.com/w_19s17zbw5l.html" target="_blank">《海贼王：发条岛的冒险》</a></li>
      <li><a href="http://www.iqiyi.com/w_19s0rhvwlp.html" target="_blank">《海贼王:珍兽岛的乔巴王国》</a></li>
      <li><a href="http://www.iqiyi.com/w_19s2d9hfb5.html" target="_blank">《海贼王:死亡尽头的冒险》</a></li>
      <li><a href="http://www.iqiyi.com/w_19s0gkt93h.html" target="_blank">《海贼王:被诅咒的圣剑》</a></li>
    </ul>
    </div>```

#### 人物介绍详细界面
人物介绍详细界面，是对该人物进行详细的介绍。
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c837e272666842f2bdbc7dd5a68deb46.png)

部分代码如下：

```html
<p>布鲁克,人称鼻歌布鲁克。日本漫画《海贼王》及其衍生作品中的男性角色。现为草帽一伙音乐家。原本是某国护卫队团长，后加入伦巴海贼团，50年前跟鲸鱼拉布约定在“双子岬”重逢。后来在魔鬼三角地带遇到敌人并遭遇毒手，因黄泉果实的能力，灵魂走出黄泉并准备回身体时，在魔鬼三角地带迷路一年，找到的身体已变成骷髅，但爆炸头仍然存在，自此他只能以骷髅状态生存。幽灵岛战役结束后，从路飞口中得知伙伴拉布现在平安无事的消息，为了履行和拉布的约定，才正式加入草帽一伙。</p>
    </div>
    <div>
    	<ul>
        	<li>声优：日本 长岛雄一/ 宋克军（台湾版配音）等</li>
            <li>性别：男</li>
            <li>外号：灵魂之王（ブルック）</li>
            <li>所属：草帽海贼团-音乐家</li>
            <li>恶魔果实：黄泉果实</li>
            <li>能力：死后可以复活，并掌握与灵魂有关的能力</li>
    		<li>特征 ：骷髅</li>
            <li>赏金：8千3万贝里</li>
            <li>前生经历：布鲁克出身西海，年轻时原本是某国护卫团长，后加入伦巴海贼团成为该团的击剑士暨音乐家，后因船长尤奇染上瘟疫离开海贼团而成为代理船长。50年前跟鲸鱼拉布约定在双子峡重逢，当时的悬赏金是3300万贝里。
后来伦巴海贼团在魔幻三角地带遇到敌人并遭遇有毒武器的攻击，而且船医也已经死亡，包括布鲁克在内的船员们在船上举行了一场大合奏后全军覆没。</li>
        </ul>
    	<p>&nbsp;</p>
    </div>

总结

想要看具体效果的同学，可以访问这个链接：
https://www.bilibili.com/video/BV155411z7c4/?vd_source=5f425e0074a7f92921f53ab87712357b

具体的代码也在该链接下。