- 现代化设计：使用 Tailwind CSS 框架，界面美观、响应式,适配手机和电脑。
- ：包含游戏推荐、动漫资讯、热门排行榜等模块。
- 交互功能：导航栏滚动效果、卡片悬停动画、简单的搜索功能等。
- 完整的代码：提供可以直接复制粘贴并运行的HTML、CSS和JavaScript代码。
网页成品预览
您可以先想象一下这个网页的样子：
（图片来源网络，侵删）
- 顶部：一个固定在顶部的导航栏，包含网站Logo、主要菜单（首页、游戏、动漫、排行）和一个搜索框。
- 主横幅：一个全屏宽度的轮播图，展示最新或最热门的游戏/动漫。
- 游戏推荐区：以卡片形式展示几款免费热门游戏，每张卡片包含游戏封面、名称、简介和“立即游玩”按钮。
- 动漫资讯区：以列表形式展示最新的动漫新闻和更新。
- 热门排行榜：一个左右布局的排行榜，左侧是游戏榜,右侧是动漫榜。
- 页脚：包含版权信息、友情链接和社交媒体图标。
如何使用
- 创建文件：在您的电脑上创建一个名为
index.html的文件。 - 复制代码：将下面提供的 完整代码 全部复制并粘贴到
index.html文件中。 - 保存并打开：保存文件，然后用浏览器（如 Chrome, Firefox, Edge）打开
index.html文件,即可看到成品效果。
完整HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">次元漫游 - 免费游戏与动漫爱好者聚集地</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #1f2937;
}
::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
/* 轮播图动画 */
.carousel-item {
display: none;
}
.carousel-item.active {
display: block;
}
/* 卡片悬停效果 */
.game-card, .news-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.game-card:hover, .news-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* 导航栏滚动效果 */
.navbar-scroll {
background-color: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body class="bg-gray-900 text-white">
<!-- 导航栏 -->
<header id="navbar" class="fixed top-0 w-full z-50 transition-all duration-300">
<nav class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<i class="fas fa-gamepad text-purple-500 text-2xl"></i>
<span class="text-xl font-bold bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">次元漫游</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="hover:text-purple-400 transition-colors">首页</a>
<a href="#games" class="hover:text-purple-400 transition-colors">游戏</a>
<a href="#anime" class="hover:text-purple-400 transition-colors">动漫</a>
<a href="#ranking" class="hover:text-purple-400 transition-colors">排行</a>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="搜索游戏或动漫..." class="bg-gray-800 text-white px-4 py-2 rounded-full w-48 focus:outline-none focus:ring-2 focus:ring-purple-500">
<button class="absolute right-3 top-2.5 text-gray-400">
<i class="fas fa-search"></i>
</button>
</div>
<button class="md:hidden">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</nav>
</header>
<!-- 主横幅/轮播图 -->
<section class="relative h-screen mt-16 overflow-hidden">
<div id="carousel" class="relative h-full">
<!-- 轮播项 1 -->
<div class="carousel-item active absolute inset-0 bg-cover bg-center" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center">
<h1 class="text-5xl md:text-7xl font-bold mb-4">探索无限次元</h1>
<p class="text-xl md:text-2xl mb-8">发现最热门的免费游戏与最新动漫</p>
<a href="#games" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full transition-colors">
开始探索
</a>
</div>
</div>
</div>
<!-- 轮播项 2 -->
<div class="carousel-item absolute inset-0 bg-cover bg-center" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1587202526983-45ead98f2d78?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center">
<h1 class="text-5xl md:text-7xl font-bold mb-4">次元新番</h1>
<p class="text-xl md:text-2xl mb-8">每周更新，不错过任何精彩</p>
<a href="#anime" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full transition-colors">
查看动漫
</a>
</div>
</div>
</div>
</div>
<!-- 轮播控制按钮 -->
<button onclick="prevSlide()" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-75">
<i class="fas fa-chevron-left"></i>
</button>
<button onclick="nextSlide()" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-3 rounded-full hover:bg-opacity-75">
<i class="fas fa-chevron-right"></i>
</button>
</section>
<!-- 游戏推荐区 -->
<section id="games" class="py-20 px-6">
<div class="container mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">热门免费游戏</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 游戏卡片 1 -->
<div class="game-card bg-gray-800 rounded-xl overflow-hidden">
<img src="https://images.unsplash.com/photo-1536323766969-7e7ef8367435?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="游戏封面" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">幻想世界</h3>
<p class="text-gray-400 mb-4">一款开放世界RPG，在充满魔法与危险的奇幻大陆上开启你的冒险之旅。</p>
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded transition-colors">
<i class="fas fa-play mr-2"></i>立即游玩
</button>
</div>
</div>
<!-- 游戏卡片 2 -->
<div class="game-card bg-gray-800 rounded-xl overflow-hidden">
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="游戏封面" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">星际战舰</h3>
<p class="text-gray-400 mb-4">驾驶你的战舰，在浩瀚的宇宙中探索未知，与其他玩家展开史诗般的太空战斗。</p>
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded transition-colors">
<i class="fas fa-play mr-2"></i>立即游玩
</button>
</div>
</div>
<!-- 游戏卡片 3 -->
<div class="game-card bg-gray-800 rounded-xl overflow-hidden">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="游戏封面" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">像素英雄</h3>
<p class="text-gray-400 mb-4">经典复古风格，重温童年乐趣，收集英雄，组建最强战队，挑战终极BOSS。</p>
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded transition-colors">
<i class="fas fa-play mr-2"></i>立即游玩
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 动漫资讯区 -->
<section id="anime" class="py-20 px-6 bg-gray-800">
<div class="container mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">最新动漫资讯</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 资讯卡片 1 -->
<article class="news-item bg-gray-900 rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="动漫资讯" class="w-full h-40 object-cover">
<div class="p-4">
<span class="text-purple-400 text-sm">新番速递</span>
<h3 class="text-lg font-bold mt-1 mb-2">《夏日重现》第二季动画化决定！</h3>
<p class="text-gray-400 text-sm">官方宣布备受好评的悬疑动漫《夏日重现》将制作第二季，粉丝欢呼雀跃...</p>
<p class="text-gray-500 text-xs mt-3">2025年10月26日</p>
</div>
</article>
<!-- 资讯卡片 2 -->
<article class="news-item bg-gray-900 rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="动漫资讯" class="w-full h-40 object-cover">
<div class="p-4">
<span class="text-pink-400 text-sm">更新动态</span>
<h3 class="text-lg font-bold mt-1 mb-2">《咒术回战》第24话精彩看点解析</h3>
<p class="text-gray-400 text-sm">宿傩与五条悟的战斗进入白热化阶段，新的术式展开，剧情迎来高潮...</p>
<p class="text-gray-500 text-xs mt-3">2025年10月25日</p>
</div>
</article>
<!-- 资讯卡片 3 -->
<article class="news-item bg-gray-900 rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1611224923853-80b023f02d71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="动漫资讯" class="w-full h-40 object-cover">
<div class="p-4">
<span class="text-blue-400 text-sm">业界新闻</span>
<h3 class="text-lg font-bold mt-1 mb-2">知名动画导演新海诚新作制作中</h3>
<p class="text-gray-400 text-sm">继《你的名字。》和《天气之子》后，新海诚导演的全新电影项目正式启动...</p>
<p class="text-gray-500 text-xs mt-3">2025年10月24日</p>
</div>
</article>
</div>
</div>
</section>
<!-- 热门排行榜 -->
<section id="ranking" class="py-20 px-6">
<div class="container mx-auto">
<h2 class="text-4xl font-bold text-center mb-12">热门排行榜</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- 游戏排行榜 -->
<div class="bg-gray-800 p-6 rounded-xl">
<h3 class="text-2xl font-bold mb-6 text-purple-400">
<i class="fas fa-trophy mr-2"></i>游戏热度榜
</h3>
<ol class="space-y-4">
<li class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
<div class="flex items-center">
<span class="text-2xl font-bold text-yellow-400 mr-4">1</span>
<img src="https://images.unsplash.com/photo-1536323766969-7e7ef8367435?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="游戏" class="w-12 h-12 rounded object-cover mr-3">
<span>幻想世界</span>
</div>
<span class="text-green-400">热度: 98.5</span>
</li>
<li class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
<div class="flex items-center">
<span class="text-2xl font-bold text-gray-300 mr-4">2</span>
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="游戏" class="w-12 h-12 rounded object-cover mr-3">
<span>星际战舰</span>
</div>
<span class="text-green-400">热度: 95.2</span>
</li>
<li class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
<div class="flex items-center">
<span class="text-2xl font-bold text-orange-600 mr-4">3</span>
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="游戏" class="w-12 h-12 rounded object-cover mr-3">
<span>像素英雄</span>
</div>
<span class="text-green-400">热度: 89.8</span>
</li>
</ol>
</div>
<!-- 动漫排行榜 -->
<div class="bg-gray-800 p-6 rounded-xl">
<h3 class="text-2xl font-bold mb-6 text-pink-400">
<i class="fas fa-star mr-2"></i>动漫追番榜
</h3>
<ol class="space-y-4">
<li class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
<div class="flex items-center">
<span class="text-2xl font-bold text-yellow-400 mr-4">1</span>
<img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="动漫" class="w-12 h-12 rounded object-cover mr-3">
<span>夏日重现</span>
</div>
<span class="text-green-400">追番: 9.8M</span>
</li>
<li class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
<div class="flex items-center">
<span class="text-2xl font-bold text-gray-300 mr-4">2</span>
<img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="动漫" class="w-12 h-12 rounded object-cover mr-3">
<span>咒术回战</span>
</div>
<span class="text-green-400">追番: 9.5M</span>
</li>
<li class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
<div class="flex items-center">
<span class="text-2xl font-bold text-orange-600 mr-4">3</span>
<img src="https://images.unsplash.com/photo-1611224923853-80b023f02d71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="动漫" class="w-12 h-12 rounded object-cover mr-3">
<span>进击的巨人 最终季</span>
</div>
<span class="text-green-400">追番: 9.0M</span>
</li>
</ol>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-800 py-12 px-6">
<div class="container mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<div class="flex items-center space-x-2 mb-4">
<i class="fas fa-gamepad text-purple-500 text-2xl"></i>
<span class="text-xl font-bold">次元漫游</span>
</div>
<p class="text-gray-400 text-sm">© 2025 次元漫游. All rights reserved.</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
<i class="fab fa-discord text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
<i class="fab fa-youtube text-xl"></i>
</a>
<a href="#" class="text-gray-400 hover:text-purple-400 transition-colors">
<i class="fab fa-bilibili text-xl"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
// 轮播图功能
let currentSlide = 0;
const slides = document.querySelectorAll('.carousel-item');
function showSlide(index) {
slides.forEach(slide => slide.classList.remove('active'));
slides[index].classList.add('active');
}
function nextSlide() {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
function prevSlide() {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
// 自动轮播
setInterval(nextSlide, 5000);
// 导航栏滚动效果
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('navbar-scroll');
} else {
navbar.classList.remove('navbar-scroll');
}
});
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
</body>
</html>
代码解析
-
HTML 结构:
- 使用了语义化的HTML5标签，如
<header>,<nav>,<section>,<footer>,使结构清晰。 - 每个部分都有一个唯一的
id（如#games,#anime）,方便JavaScript进行定位和导航。 - 图片使用了
unsplash.com上的高质量随机图片作为占位符,您可以根据需要替换成自己的图片链接。
- 使用了语义化的HTML5标签，如
-
CSS 样式:
- Tailwind CSS: 通过CDN引入，极大地简化了样式编写，提供了响应式工具类（如
md:,lg:）来适配不同屏幕尺寸。 - 自定义CSS: 在
<style>标签中添加了一些增强效果，如自定义滚动条、卡片悬停动画和导航栏滚动时的背景模糊效果。
- Tailwind CSS: 通过CDN引入，极大地简化了样式编写，提供了响应式工具类（如
-
JavaScript 交互:
- 轮播图: 实现了一个自动播放（每5秒切换）和手动控制的轮播图。
showSlide函数负责切换当前显示的图片。 - 导航栏滚动监听: 当用户向下滚动超过50像素时，会给导航栏添加一个半透明背景和阴影,使其在滚动时更醒目。
- 平滑滚动: 点击导航链接时，页面会平滑滚动到对应的部分，而不是瞬间跳转,提升了用户体验。
- 轮播图: 实现了一个自动播放（每5秒切换）和手动控制的轮播图。
这个成品已经是一个功能完整、设计精美的网页了，您可以根据自己的需求，修改其中的文字、图片和颜色,来打造属于您自己的免费游戏动漫网站！
（图片来源网络，侵删）
（图片来源网络，侵删）
