HTML5+CSS3+JS制作海贼王主题的网站（源码含5个页面）

一、网站描述

HTML5+CSS3+JS制作海贼王主题的网站，页面采用响应式设计，在不同屏幕尺寸下都能良好展示。使用了统一的配色方案，主色调为黑色（#000000），配合白色背景和灰色渐变，营造出海贼王的史诗感。

二、作品简介

一个海贼王主题的网站。这是海贼王主题网站的首页。

页面包含：

1. 顶部导航栏

固定在顶部的导航栏，包含网站logo和主要导航链接，包含：'首页'、'恶魔果实'、'角色介绍'、'经典战役'、'联系我们'等导航项；

2. 英雄横幅区域

大型全宽横幅轮播图，展示路飞、索隆、山治等主要角色的精彩场景，配以'向着伟大航路进发！'等主题标语。引人注目的大型横幅区域，展示草帽海贼团的史诗场景；

3. 草帽海贼团简介

草帽海贼团介绍区域，简要介绍草帽海贼团的故事背景，包含三个主要特点；

4. 船员展示区

主要成员展示区域，以网格布局展示，展示了四个核心成员；

5. 页面底部

页脚区域，包含版权信息、社交媒体链接、网站地图等页面基础信息。

三、作品演示

四、代码目录

五、代码演示

首页html

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>海贼王主题 - 首页</title>
  <link type="text/css" href="css/family.css" rel="stylesheet" />
  <link type="text/css" href="css/all.min.css" rel="stylesheet" />
  <link type="text/css" href="css/glide.core.min.css" rel="stylesheet" />
  <script src="js/tailwind-plugins.min.js"></script>
</head>
 
<body class="bg-gray-50">
  <div class="water-mark water-mark-left">公*号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span></div>
  <div class="water-mark water-mark-right">公*号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span></div>
  <nav class="bg-white shadow-lg fixed w-full z-50">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <div class="flex items-center">
          <span class="font-['Pacifico'] text-2xl text-custom">logo</span>
        </div>
        <div class="hidden md:flex space-x-8">
          <a href="./index.html" class="text-custom font-medium">首页</a>
          <a href="./devil.html" class="text-gray-500 hover:text-custom font-medium">恶魔果实</a>
          <a href="./role-introduction.html" class="text-gray-500 hover:text-custom font-medium">角色介绍</a>
          <a href="./classic-battle.html" class="text-gray-500 hover:text-custom font-medium">经典战役</a>
          <a href="./contact-us.html" class="text-gray-500 hover:text-custom font-medium">联系我们</a>
        </div>
      </div>
    </div>
  </nav>
 
  <main class="pt-16">
    <section class="relative h-[600px]">
      <img src="images/banner4.jpg" class="w-full h-full object-cover object-top" alt="海贼王横幅">
      <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
        <div class="text-center text-white">
          <h1 class="text-5xl font-bold mb-4">开启伟大航路的冒险</h1>
          <p class="text-xl">和草帽海贼团一起踏上寻找 ONE PIECE 的旅程</p>
        </div>
      </div>
    </section>
 
    <section class="max-w-7xl mx-auto px-4 py-16">
      <h2 class="text-3xl font-bold text-center mb-12">草帽海贼团介绍</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
          <img src="images/i1.jpg" class="w-full h-48 object-cover object-top"
            alt="草帽海贼团">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2">自由的海贼团</h3>
            <p class="text-gray-600">草帽海贼团是由蒙奇·D·路飞领导的海贼团，以追求梦想和自由著称，每个成员都怀揣着独特的梦想。</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
          <img src="images/i2.jpg" class="w-full h-48 object-cover object-top" alt="桑尼号">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2">桑尼号</h3>
            <p class="text-gray-600">桑尼号是草帽海贼团的第二艘船，由弗兰奇打造，承载着团队驶向伟大航路的梦想。</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
          <img src="images/i3.jpg" class="w-full h-48 object-cover object-top" alt="独特能力">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2">独特能力</h3>
            <p class="text-gray-600">每个成员都拥有独特的能力和技能，从恶魔果实能力到剑术、医术等，构成了最强大的海贼团。</p>
          </div>
        </div>
      </div>
    </section>
 
    <section class="bg-gray-100 py-16">
      <div class="max-w-7xl mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">主要成员介绍</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
          <div class="bg-white rounded-lg shadow-lg p-4">
            <img src="images/c1.jpg"
              class="w-full h-64 object-cover object-top rounded-lg" alt="路飞">
            <h3 class="text-xl font-bold mt-4">蒙奇·D·路飞</h3>
            <p class="text-gray-600">船长</p>
          </div>
          <div class="bg-white rounded-lg shadow-lg p-4">
            <img src="images/c2.jpg"
              class="w-full h-64 object-cover object-top rounded-lg" alt="索隆">
            <h3 class="text-xl font-bold mt-4">罗罗诺亚·索隆</h3>
            <p class="text-gray-600">剑士</p>
          </div>
          <div class="bg-white rounded-lg shadow-lg p-4">
            <img src="images/c3.jpg"
              class="w-full h-64 object-cover object-top rounded-lg" alt="娜美">
            <h3 class="text-xl font-bold mt-4">娜美</h3>
            <p class="text-gray-600">航海士</p>
          </div>
          <div class="bg-white rounded-lg shadow-lg p-4">
            <img src="images/c4.jpg"
              class="w-full h-64 object-cover object-top rounded-lg" alt="乔巴">
            <h3 class="text-xl font-bold mt-4">乔巴</h3>
            <p class="text-gray-600">船医</p>
          </div>
        </div>
      </div>
    </section>
  </main>
  <footer class="bg-gray-900 text-white py-12">
    <div class="max-w-7xl mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4">关于我们</h3>
          <p class="text-gray-400">追寻 ONE PIECE 的旅程永不停歇</p>
          <p class="text-gray-400">公.众.号：木番薯科技，可获取源码</p>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="./index.html" class="text-gray-400 hover:text-white">首页</a></li>
            <li><a href="./devil.html" class="text-gray-400 hover:text-white">恶魔果实</a></li>
            <li><a href="./role-introduction.html" class="text-gray-400 hover:text-white">角色介绍</a></li>
            <li><a href="./classic-battle.html" class="text-gray-400 hover:text-white">经典战役</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">联系方式</h3>
          <ul class="space-y-2">
            <li class="text-gray-400"><i class="fas fa-envelope mr-2"></i>contact@onepiece.com</li>
            <li class="text-gray-400"><i class="fas fa-phone mr-2"></i>+86 123 4567 8900</li>
          </ul>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">关注我们</h3>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo text-2xl"></i></a>
            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin text-2xl"></i></a>
            <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-bilibili text-2xl"></i></a>
          </div>
        </div>
      </div>
      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; 2024 ONE PIECE 粉丝网站. 保留所有权利.</p>
      </div>
    </div>
  </footer>
</body>
 
</html>