一、作品介绍
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个页面。欢迎留言，欢迎关注。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
