一、网站描述
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>© 2024 ONE PIECE 粉丝网站. 保留所有权利.</p>
</div>
</div>
</footer>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
