HTML+CSS+JS制作创意美术展览网页（内附源码，含5个页面）

一、作品介绍

HTML+CSS+JS制作一个创意美术展览网页，包含展览主页、艺术家页、VR展厅页、新闻资讯页、关于我们页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

1. 头部横幅区域

突出展示'Web创意美术展览'的主题标志和动态视觉效果，包含导航菜单和搜索功能

2. 主视觉展示区

以全屏滚动画廊形式展示精选艺术作品，支持交互式浏览，配备作品简介悬浮显示

3. 展览信息区

展示展览时间、地点、票务信息等关键信息，采用醒目的信息卡片布局

4. 参展艺术家专区

以网格布局展示参展艺术家头像和简介，点击可查看详细信息

5. 互动体验区

提供在线VR展厅预览功能，让访客可以提前体验展览氛围

6. 新闻公告区

展示相关新闻、展览进展和重要通知，采用时间轴形式排列

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" />
</head>

<body>
  <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>
  <header class="fixed w-full bg-white/80 backdrop-blur-md z-50">
    <div class="container mx-auto px-6 py-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-16">
          <h1 class="text-3xl font-['Pacifico']">logo</h1>
          <nav class="hidden md:flex space-x-8">
            <a href="./index.html" class="text-custom font-semibold">展览主页</a>
            <a href="./artist.html" class="text-gray-800 hover:text-custom">艺术家</a>
            <a href="./vr-showroom.html" class="text-gray-800 hover:text-custom">VR展厅</a>
            <a href="./news.html" class="text-gray-800 hover:text-custom">新闻资讯</a>
            <a href="./about-us.html" class="text-gray-800 hover:text-custom">关于我们</a>
          </nav>
        </div>
        <div class="flex items-center space-x-4">
          <div class="relative">
            <input type="text" placeholder="搜索展览内容"
              class="pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:border-custom">
            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>
        </div>
      </div>
    </div>
  </header>

  <main>
    <section class="relative h-screen">
      <div class="glide h-full">
        <div class="glide__track h-full" data-glide-el="track">
          <ul class="glide__slides h-full">
            <li class="glide__slide relative">
              <img src="./images/b5.jpg" class="w-full h-full object-cover" alt="展览图片1">
              <div class="absolute inset-0 bg-black/30 flex items-center justify-center">
                <div class="text-center text-white">
                  <h2 class="text-5xl font-bold mb-4">Web创意美术展览2024</h2>
                  <p class="text-xl">探索数字艺术的无限可能</p>
                </div>
              </div>
            </li>
            <li class="glide__slide relative">
              <img src="./images/b2.jpg" class="w-full h-full object-cover" alt="展览图片2">
              <div class="absolute inset-0 bg-black/30 flex items-center justify-center">
                <div class="text-center text-white">
                  <h2 class="text-5xl font-bold mb-4">沉浸式数字体验</h2>
                  <p class="text-xl">突破传统展览边界</p>
                </div>
              </div>
            </li>
            <li class="glide__slide relative">
              <img src="./images/b3.jpg" class="w-full h-full object-cover" alt="展览图片2">
              <div class="absolute inset-0 bg-black/30 flex items-center justify-center">
                <div class="text-center text-white">
                  <h2 class="text-5xl font-bold mb-4">沉浸式数字体验</h2>
                  <p class="text-xl">突破传统展览边界</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="glide__bullets" data-glide-el="controls[nav]">
          <button class="glide__bullet" data-glide-dir="=0"></button>
          <button class="glide__bullet" data-glide-dir="=1"></button>
          <button class="glide__bullet" data-glide-dir="=2"></button>
        </div>
      </div>
    </section>

    <section class="py-16 bg-white">
      <div class="container mx-auto px-6">
        <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-gray-50 p-6 rounded-lg">
            <img src="./images/zl4.jpg" 
                 alt="现代艺术" 
                 class="w-full h-48 object-cover rounded-lg mb-4">
            <h3 class="text-xl font-semibold mb-2">现代艺术专区</h3>
            <p class="text-gray-600">汇集国内外知名艺术家的现代艺术作品，展现当代艺术的创新与突破。</p>
          </div>
          <div class="bg-gray-50 p-6 rounded-lg">
            <img src="./images/zl5.jpg" 
                 alt="互动装置" 
                 class="w-full h-48 object-cover rounded-lg mb-4">
            <h3 class="text-xl font-semibold mb-2">互动艺术装置</h3>
            <p class="text-gray-600">融合科技与艺术的互动装置，让观众成为艺术作品的一部分。</p>
          </div>
          <div class="bg-gray-50 p-6 rounded-lg">
            <img src="./images/zl6.jpg" 
                 alt="传统艺术" 
                 class="w-full h-48 object-cover rounded-lg mb-4">
            <h3 class="text-xl font-semibold mb-2">传统艺术馆</h3>
            <p class="text-gray-600">展示中国传统艺术的精髓，传承文化瑰宝。</p>
          </div>
        </div>
      </div>
    </section>

    <section class="py-16 bg-gray-50">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold text-center mb-12">近期展览</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div class="bg-white rounded-lg overflow-hidden shadow-sm">
            <img src="./images/zl7.jpg" 
                 alt="光影艺术展" 
                 class="w-full h-64 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-semibold mb-2">光影之间：当代摄影艺术展</h3>
              <p class="text-gray-600 mb-4">展期：2024.03.01 - 2024.04.15</p>
              <button class="!rounded-button px-6 py-2 bg-custom text-white">预约参观</button>
            </div>
          </div>
          <div class="bg-white rounded-lg overflow-hidden shadow-sm">
            <img src="./images/zl8.jpg" 
                 alt="雕塑艺术展" 
                 class="w-full h-64 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-semibold mb-2">形与意：现代雕塑艺术展</h3>
              <p class="text-gray-600 mb-4">展期：2024.04.20 - 2024.06.01</p>
              <button class="!rounded-button px-6 py-2 bg-custom text-white">预约参观</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="py-20 bg-gray-50">
      <div class="container mx-auto px-6">
        <h2 class="text-4xl font-bold text-center mb-16">展览信息</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="bg-white p-8 rounded-lg shadow-sm">
            <i class="fas fa-calendar text-3xl text-custom mb-4"></i>
            <h3 class="text-xl font-bold mb-2">展览时间</h3>
            <p class="text-gray-600">2024年3月1日 - 5月31日</p>
            <p class="text-gray-600">每日 10:00 - 21:00</p>
          </div>
          <div class="bg-white p-8 rounded-lg shadow-sm">
            <i class="fas fa-map-marker-alt text-3xl text-custom mb-4"></i>
            <h3 class="text-xl font-bold mb-2">展览地点</h3>
            <p class="text-gray-600">北京市朝阳区</p>
            <p class="text-gray-600">国际艺术中心</p>
          </div>
          <div class="bg-white p-8 rounded-lg shadow-sm">
            <i class="fas fa-ticket-alt text-3xl text-custom mb-4"></i>
            <h3 class="text-xl font-bold mb-2">票务信息</h3>
            <p class="text-gray-600">普通票: ¥180/人</p>
            <p class="text-gray-600">VIP票: ¥380/人</p>
          </div>
        </div>
      </div>
    </section>

    <section class="py-20 bg-gray-50">
      <div class="container mx-auto px-6">
        <div class="max-w-4xl mx-auto text-center">
          <h2 class="text-4xl font-bold mb-8">订阅展讯</h2>
          <p class="text-gray-600 mb-8">订阅我们的展讯，获取最新展览信息和艺术家动态</p>
          <div class="flex max-w-md mx-auto">
            <input type="email" placeholder="输入您的邮箱"
              class="flex-grow px-4 py-3 rounded-l-lg border-y border-l border-gray-200 focus:outline-none">
            <button class="!rounded-button bg-custom text-white px-8 py-3 rounded-r-lg">订阅</button>
          </div>
          <div class="flex justify-center space-x-6 mt-8">
            <a href="#" class="text-gray-600 hover:text-custom"><i class="fab fa-weixin text-2xl"></i></a>
            <a href="#" class="text-gray-600 hover:text-custom"><i class="fab fa-weibo text-2xl"></i></a>
            <a href="#" class="text-gray-600 hover:text-custom"><i class="fab fa-instagram text-2xl"></i></a>
          </div>
        </div>
      </div>
    </section>
  </main>
</body>

</html>

六、获取代码

内附源码，含5个页面。欢迎留言，欢迎关注。