静态网页设计——海贼王

2024-01-03 19:42:04

前言

使用前端经典三件套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

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

文章来源:https://blog.csdn.net/qq_47188967/article/details/135370533
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。