HTML5+CSS3+JS制作电影主题网页（内附源码，含5个页面）

最新推荐文章于 2025-03-18 13:29:03 发布

WebDesign_Mu

最新推荐文章于 2025-03-18 13:29:03 发布

阅读量1.5k

点赞数 22

文章标签： html 前端 css javascript html5 css3

本文链接：https://blog.csdn.net/WebDesign_Mu/article/details/144311356

版权

一、页面结构

1. 顶部导航栏

固定在页面顶部的导航栏，包含网站Logo、搜索框、首页、影视库、剧评、个人中心等导航链接，以及登录/注册按钮

2. 主横幅轮播区

大型轮播横幅，展示热门电影和剧集的海报，配合简短介绍和'立即观看'按钮

3. 快捷分类导航

横向滚动的分类菜单，包含电影、电视剧、动漫、综艺等主要分类，以及'热门'、'最新'、'好评'等筛选选项

4. 最新上线模块

以网格形式展示最新上线的影视内容，每个项目显示封面图、标题、评分，hover时显示简介

5. 热门推荐模块

横向滚动的大卡片展示，突出显示热门影视内容，包含剧照、标题、简介和评分

6. 影视剧评区

精选3-4条高质量剧评，每条包含评论者头像、昵称、评分、评论预览和获赞数

7. 底部区域

包含网站介绍、友情链接、版权信息、联系方式等信息，采用深色背景设计

二、作品演示

三、代码目录

四、代码演示

<!DOCTYPE html>
<html lang="zh">

<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/water-mark.css" rel="stylesheet" />
</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="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
        <div class="container mx-auto px-6 py-3">
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-16">
              <h1 class="text-3xl font-['Pacifico']">logo</h1>
              <div class="flex items-center space-x-8">
                <a href="./index.html" class="text-gray-600 hover:text-custom">首页</a>
                <a href="./film-library.html" class="text-gray-600 hover:text-custom">影视库</a>
                <a href="./drama-review.html" class="text-gray-600 hover:text-custom">剧评</a>
                <a href="./personal-center.html" class="text-custom font-medium">个人中心</a>
              </div>
            </div>
            <div class="flex items-center space-x-6">
              <div class="relative">
                <input type="text" placeholder="搜索影视"
                  class="pl-10 pr-4 py-2 w-64 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-custom">
                <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
              </div>
              <a href="./login.html" class="!rounded-button bg-custom text-white px-6 py-2">登录</a>
            </div>
          </div>
        </div>
      </nav>
    <div class="container mx-auto px-6 py-8 pt-20">
        <div class="container mx-auto px-6 py-8">
            <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
                <div class="flex items-center space-x-6 mb-8">
                    <div class="w-24 h-24 rounded-full overflow-hidden"><img
                            src="./images/t8.jpg" alt="用户头像"
                            class="w-full h-full object-cover" /></div>
                    <div>
                        <h2 class="text-2xl font-bold mb-2">张三</h2>
                        <p class="text-gray-600">普通会员 · 已加入 180 天</p>
                    </div>
                </div>
                <div class="grid grid-cols-4 gap-6 mb-8 text-center">
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-2xl font-bold text-custom mb-1">149</div>
                        <div class="text-gray-600">观看记录</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-2xl font-bold text-custom mb-1">23</div>
                        <div class="text-gray-600">收藏影片</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-2xl font-bold text-custom mb-1">56</div>
                        <div class="text-gray-600">影评数</div>
                    </div>
                    <div class="p-4 bg-gray-50 rounded-lg">
                        <div class="text-2xl font-bold text-custom mb-1">1208</div>
                        <div class="text-gray-600">获赞数</div>
                    </div>
                </div>
                <div class="border-t pt-8">
                    <h3 class="text-xl font-bold mb-6">会员中心</h3>
                    <div class="grid grid-cols-3 gap-6">
                        <div class="p-6 border rounded-lg text-center">
                            <div class="text-lg font-bold mb-4">当前：普通会员</div>
                            <div class="text-4xl font-bold text-custom mb-2">¥0</div>
                            <div class="text-gray-500 mb-4">永久免费</div><button
                                class="w-full bg-gray-200 text-gray-700 px-6 py-2 rounded-full" disabled="">当前</button>
                        </div>
                        <div class="p-6 border rounded-lg text-center">
                            <div class="text-lg font-bold mb-4">黄金会员</div>
                            <div class="text-4xl font-bold text-custom mb-2">¥19</div>
                            <div class="text-gray-500 mb-4">/月</div><button
                                class="w-full bg-custom text-white px-6 py-2 rounded-full">立即开通</button>
                        </div>
                        <div class="p-6 border rounded-lg text-center">
                            <div class="text-lg font-bold mb-4">钻石会员</div>
                            <div class="text-4xl font-bold text-custom mb-2">¥39</div>
                            <div class="text-gray-500 mb-4">/月</div><button
                                class="w-full bg-custom text-white px-6 py-2 rounded-full">立即开通</button>
                        </div>
                    </div>
                </div>
                <div class="border-t mt-8 pt-8">
                    <h3 class="text-xl font-bold mb-6">最近观看</h3>
                    <div class="grid grid-cols-4 gap-4">
                        <div class="space-y-2"><img src="./images/l7.jpg"
                                alt="电影1" class="w-full rounded-lg" />
                            <div class="font-medium">星际穿越</div>
                            <div class="text-gray-500 text-sm">观看至 01:23:45</div>
                        </div>
                        <div class="space-y-2"><img src="./images/l8.jpg"
                                alt="电影2" class="w-full rounded-lg" />
                            <div class="font-medium">盗梦空间</div>
                            <div class="text-gray-500 text-sm">观看至 00:45:12</div>
                        </div>
                        <div class="space-y-2"><img src="./images/l9.jpg"
                                alt="电影3" class="w-full rounded-lg" />
                            <div class="font-medium">阿凡达</div>
                            <div class="text-gray-500 text-sm">已看完</div>
                        </div>
                        <div class="space-y-2"><img src="./images/l10.jpg"
                                alt="电影4" class="w-full rounded-lg" />
                            <div class="font-medium">教父</div>
                            <div class="text-gray-500 text-sm">已看完</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="bg-gray-900 text-white mt-12">
        <div class="container mx-auto px-6 py-12">
            <div class="grid grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">关于我们</h3>
                    <p class="text-gray-400">致力于为用户提供最优质的影视资源和观影体验</p>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">友情链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">电影资讯</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">影评社区</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">演员百科</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="text-gray-400">邮箱：contact@movie.com</li>
                        <li class="text-gray-400">电话：400-123-4567</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <i class="fab fa-weixin text-2xl text-gray-400 hover:text-white cursor-pointer"></i>
                        <i class="fab fa-weibo text-2xl text-gray-400 hover:text-white cursor-pointer"></i>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>© 2024 Movie Website. All rights reserved.</p>
            </div>
        </div>
    </footer>

</body>

</html>