像素之境数字艺术沉浸展主页 HTML 单页源码

这是一款为新媒体艺术展、沉浸式光影展或数字艺术策展活动设计的单页宣传模板。整体以近黑的深紫为底，搭配青蓝、紫罗兰与品红的多重霓虹渐变光晕，营造出未来感与沉浸感，非常契合「数字艺术」的主题调性。首屏以大字标题与展览信息点题，视觉冲击力极强。

页面主体由六宫格精选作品网格、四节点观展时间轴与购票区块组成：作品网格用不同渐变色块呈现装置名称与艺术家；时间轴用竖向连线标注开幕夜、亲子工作坊、深夜场与闭幕礼等关键日程；购票区提供单人票与双人套票两档价格并附场馆信息。整体在移动端自动降为单列。

非常适合美术馆、策展团队或品牌艺术活动用作展览官网、票务落地页或社媒投放页。替换展览名称、作品、日程与票价后，即可快速上线使用。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

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>像素之境 · 数字艺术沉浸展</title>
<style>
  :root{
    --violet:#7c3aed; --cyan:#22d3ee; --pink:#ec4899; --ink:#0c0a1f; --mut:#a99fd6;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#ece8ff;background:var(--ink);line-height:1.7;overflow-x:hidden}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1100px;margin:0 auto;padding:0 22px}
  header{display:flex;align-items:center;justify-content:space-between;height:66px;position:relative;z-index:5}
  .logo{font-weight:800;font-size:20px;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
  .btn{padding:11px 24px;border-radius:999px;font-weight:700;display:inline-block;transition:.2s}
  .btn-buy{background:linear-gradient(90deg,var(--violet),var(--pink));color:#fff}
  .btn-buy:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(236,72,153,.4)}
  /* 首屏 */
  .hero{position:relative;padding:70px 0 80px;text-align:center;background:radial-gradient(900px 400px at 50% -5%,rgba(124,58,237,.35),transparent),radial-gradient(700px 360px at 85% 20%,rgba(34,211,238,.22),transparent)}
  .hero .badge{display:inline-block;font-size:13px;color:var(--cyan);border:1px solid rgba(34,211,238,.5);border-radius:999px;padding:6px 16px;margin-bottom:20px}
  .hero h1{font-size:54px;line-height:1.1;font-weight:800;margin-bottom:18px}
  .hero h1 span{background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p.lead{color:var(--mut);font-size:17px;max-width:560px;margin:0 auto 30px}
  .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn-ghost{border:1.5px solid var(--cyan);color:var(--cyan)}
  /* 作品网格 */
  .sec{padding:66px 0}
  .sec h2{font-size:30px;text-align:center;margin-bottom:10px}
  .sec .sub{text-align:center;color:var(--mut);margin-bottom:38px}
  .works{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .work{position:relative;border-radius:16px;height:200px;overflow:hidden;display:flex;align-items:flex-end;padding:18px;transition:.22s}
  .work:hover{transform:scale(1.03)}
  .w1{background:linear-gradient(135deg,#7c3aed,#22d3ee)}
  .w2{background:linear-gradient(135deg,#ec4899,#7c3aed)}
  .w3{background:linear-gradient(135deg,#22d3ee,#3b82f6)}
  .w4{background:linear-gradient(135deg,#f59e0b,#ec4899)}
  .w5{background:linear-gradient(135deg,#10b981,#22d3ee)}
  .w6{background:linear-gradient(135deg,#8b5cf6,#ec4899)}
  .work b{font-size:17px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
  .work small{display:block;color:rgba(255,255,255,.85);font-size:13px}
  /* 时间轴 */
  .timeline{max-width:720px;margin:0 auto;position:relative;padding-left:30px}
  .timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--violet),var(--cyan))}
  .tl{position:relative;margin-bottom:26px}
  .tl::before{content:"";position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(236,72,153,.2)}
  .tl b{color:#fff;font-size:16px}
  .tl p{color:var(--mut);font-size:14px}
  /* 购票 */
  .ticket{background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(34,211,238,.15));border:1px solid rgba(124,58,237,.4);border-radius:22px;padding:46px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-bottom:60px}
  .ticket h2{font-size:28px;color:#fff;text-align:left}
  .ticket p{color:var(--mut);margin:10px 0 20px}
  .price-row{display:flex;gap:16px;margin-bottom:20px}
  .pc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;flex:1}
  .pc b{display:block;font-size:24px;color:var(--cyan)}
  .pc small{color:var(--mut)}
  .ticket .btn-buy{text-align:center}
  footer{padding:30px 0;text-align:center;color:var(--mut);font-size:14px;border-top:1px solid rgba(255,255,255,.1)}
  @media(max-width:860px){.works{grid-template-columns:repeat(2,1fr)}.ticket{grid-template-columns:1fr;gap:24px}.hero h1{font-size:40px}}
  @media(max-width:520px){.works{grid-template-columns:1fr}.price-row{flex-direction:column}}
</style>
</head>
<body>
<div class="hero">
  <div class="wrap">
    <header>
      <div class="logo">像素之境 PIXELS</div>
      <a href="#ticket" class="btn btn-buy">立即购票</a>
    </header>
    <div class="badge">2026.09.20 — 11.15 · 城市美术馆 3 号厅</div>
    <h1>走进<span>数字艺术</span>的沉浸之境</h1>
    <p class="lead">36 位新媒体艺术家，12 组沉浸式光影装置，用代码、投影与交互重构你与艺术的距离。</p>
    <div class="hero-cta">
      <a href="#ticket" class="btn btn-buy">购票入场</a>
      <a href="#about" class="btn btn-ghost">展览亮点</a>
    </div>
  </div>
</div>

<section class="sec" id="about">
  <div class="wrap">
    <h2>精选作品</h2>
    <p class="sub">每一束光，都是一段可走进的故事</p>
    <div class="works">
      <div class="work w1"><div><b>流光之河</b><small>互动投影 · 团队 AURORA</small></div></div>
      <div class="work w2"><div><b>数据花园</b><small>生成艺术 · 林夕</small></div></div>
      <div class="work w3"><div><b>深海回声</b><small>声音装置 · 周屿</small></div></div>
      <div class="work w4"><div><b>熔岩脉动</b><small>实时渲染 · NOVA Lab</small></div></div>
      <div class="work w5"><div><b>青绿算法</b><small>AI 绘画 · 苏沉</small></div></div>
      <div class="work w6"><div><b>霓虹废墟</b><small>沉浸空间 · 陈默</small></div></div>
    </div>
  </div>
</section>

<section class="sec">
  <div class="wrap">
    <h2>观展日程</h2>
    <p class="sub">跟着时间轴，不错过任何一场特别活动</p>
    <div class="timeline">
      <div class="tl"><b>09.20 开幕夜</b><p>19:30 艺术家导览 + 限定光影首映，凭开幕票入场。</p></div>
      <div class="tl"><b>10.02 亲子工作坊</b><p>14:00 用平板创作专属数字画作，适合 6 岁以上儿童。</p></div>
      <div class="tl"><b>10.19 深夜场</b><p>20:00—24:00 暗场沉浸体验，配电子现场演出。</p></div>
      <div class="tl"><b>11.15 闭幕礼</b><p>18:00 艺术家对谈与作品拍卖，感恩所有同行者。</p></div>
    </div>
  </div>
</section>

<section class="wrap" id="ticket">
  <div class="ticket">
    <div>
      <h2>选一张票，走进光里</h2>
      <p>电子票随买随用，扫码即入；学生与双人套票更划算。</p>
      <div class="price-row">
        <div class="pc"><b>¥128</b><small>单人标准票</small></div>
        <div class="pc"><b>¥218</b><small>双人套票</small></div>
      </div>
      <a href="#" class="btn btn-buy" style="display:block">微信 / 支付宝 购票</a>
    </div>
    <div>
      <div class="work w3" style="height:220px"><div><b>城市美术馆 3 号厅</b><small>地铁 2 号线 美术馆站 B 口</small></div></div>
    </div>
  </div>
</section>

<footer>© 2026 像素之境数字艺术展 · 光，会记得你来过</footer>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1961.html