[网站模板]视觉记忆照片墙（带放大功能），响应式、暗黑主题、纯静态html模板

jeudi，9 juillet 2026
响应式设计：使用CSS Grid布局自动调整列数；在移动设备上变为单列布局；图片自适应容器大小。
暗黑主题：使用深色背景和浅色文字，降低视觉疲劳；精心选择的配色方案确保良好的可读性；卡片式设计带有微妙的阴影效果。
图片放大功能：点击图片显示全屏模态框；平滑的缩放动画效果；支持ESC键关闭模态框；点击模态框背景也可关闭。
交互体验：照片卡片有悬停效果，轻微上浮和阴影增强；图片加载时有缩放效果；简洁的标题和描述文字。
性能优化：使用高效的CSS布局技术；图片使用object-fit属性保持比例。
这个照片墙网站完全符合您的要求：响应式、暗黑主题、无导航栏，并且具有点击放大功能。您可以直接复制代码到HTML文件中运行，或根据需要替换图片和文字内容。
html Copier le code
<!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>
      /* 基础重置与暗黑主题变量 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        --bg-primary: #121212;
        --bg-secondary: #1e1e1e;
        --text-primary: #e6e6e6;
        --text-secondary: #a0a0a0;
        --accent-color: #7e57c2;
        --card-bg: #252525;
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        --modal-overlay: rgba(0, 0, 0, 0.85);
      }

      body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--bg-primary);
        color: var(--text-primary);
        line-height: 1.6;
        padding: 20px;
        min-height: 100vh;
      }

      /* 标题样式 */
      .header {
        text-align: center;
        margin-bottom: 40px;
        padding: 20px 0;
      }

      .header h1 {
        font-size: 2.5rem;
        font-weight: 300;
        letter-spacing: 2px;
        margin-bottom: 10px;
        color: var(--text-primary);
      }

      .header p {
        color: var(--text-secondary);
        font-size: 1.1rem;
        max-width: 600px;
        margin: 0 auto;
      }

      /* 照片墙网格布局 */
      .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
        max-width: 1400px;
        margin: 0 auto;
        padding: 10px;
      }

      .photo-card {
        background-color: var(--card-bg);
        border-radius: 12px;
        overflow: hidden;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
        box-shadow: var(--shadow);
        cursor: pointer;
      }

      .photo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
      }

      .photo-img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
      }

      .photo-card:hover .photo-img {
        transform: scale(1.05);
      }

      .photo-info {
        padding: 15px;
      }

      .photo-title {
        font-size: 1.2rem;
        margin-bottom: 8px;
        color: var(--text-primary);
      }

      .photo-desc {
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.4;
      }

      /* 模态框样式 */
      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--modal-overlay);
        z-index: 1000;
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(5px);
      }

      .modal.active {
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
      }

      .modal-content {
        max-width: 90%;
        max-height: 90%;
        overflow: hidden;
        position: relative;
        background-color: var(--bg-secondary);
        border-radius: 12px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8);
        animation: zoomIn 0.3s ease;
      }

      @keyframes zoomIn {
        from {
          transform: scale(0.8);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      .modal-img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 80vh;
        object-fit: contain;
      }

      .modal-close {
        position: absolute;
        top: 15px;
        right: 15px;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
        z-index: 1001;
      }

      .modal-close:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }

      .modal-info {
        padding: 20px;
        color: var(--text-primary);
      }

      .modal-title {
        font-size: 1.5rem;
        margin-bottom: 10px;
      }

      .modal-desc {
        font-size: 1rem;
        color: var(--text-secondary);
        line-height: 1.5;
      }

      /* 页脚样式 */
      .footer {
        text-align: center;
        margin-top: 60px;
        padding: 20px;
        color: var(--text-secondary);
        font-size: 0.9rem;
      }

      .footer a {
        text-decoration: none;
        color: inherit;
      }

      /* 响应式调整 */
      @media (max-width: 768px) {
        .header h1 {
          font-size: 2rem;
        }

        .gallery {
          grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
          gap: 15px;
        }

        .photo-img {
          height: 180px;
        }

        .modal-content {
          max-width: 95%;
          max-height: 95%;
        }
      }

      @media (max-width: 480px) {
        body {
          padding: 10px;
        }

        .header {
          margin-bottom: 20px;
        }

        .header h1 {
          font-size: 1.8rem;
        }

        .gallery {
          grid-template-columns: 1fr;
          gap: 15px;
        }

        .modal-info {
          padding: 15px;
        }

        .modal-title {
          font-size: 1.3rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>视觉记忆</h1>
      <p>捕捉生活中的每一刻精彩瞬间 - 点击图片查看大图</p>
    </div>

    <div class="gallery">
      <!-- 照片1 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1506744038136-46273834b3fb', '宁静山脉', '晨曦中的山脉，宁静而壮丽，展现大自然的神奇魅力。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=200"
          alt="山脉景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">宁静山脉</h3>
          <p class="photo-desc">晨曦中的山脉，宁静而壮丽...</p>
        </div>
      </div>

      <!-- 照片2 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1518837695005-2083093ee35b', '蔚蓝海洋', '无边无际的海洋，波涛汹涌，充满力量与自由。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=200"
          alt="海洋景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">蔚蓝海洋</h3>
          <p class="photo-desc">无边无际的海洋，波涛汹涌...</p>
        </div>
      </div>

      <!-- 照片3 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1475924156734-496f6cac6ec1', '神秘森林', '阳光穿透茂密树叶，森林中光影交错，如同仙境。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=200"
          alt="森林景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">神秘森林</h3>
          <p class="photo-desc">阳光穿透茂密树叶，森林中光影交错...</p>
        </div>
      </div>

      <!-- 照片4 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b', '雪山之巅', '白雪覆盖的山峰，在阳光下闪耀着圣洁的光芒。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=200"
          alt="雪山景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">雪山之巅</h3>
          <p class="photo-desc">白雪覆盖的山峰，在阳光下闪耀...</p>
        </div>
      </div>

      <!-- 照片5 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1505142468610-359e7d316be0', '飞流瀑布', '水流从高处倾泻而下，形成壮观的瀑布景观。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=200"
          alt="瀑布景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">飞流瀑布</h3>
          <p class="photo-desc">水流从高处倾泻而下，形成壮观...</p>
        </div>
      </div>

      <!-- 照片6 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5', '金色沙漠', '无垠的沙漠，沙丘起伏，展现大自然的辽阔与神秘。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?w=200"
          alt="沙漠景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">金色沙漠</h3>
          <p class="photo-desc">无垠的沙漠，沙丘起伏，展现大自然...</p>
        </div>
      </div>

      <!-- 照片7 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1506260408121-e353d10b87c7', '梦幻极光', '夜空中舞动的绿色极光，如同大自然的神秘舞蹈。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?w=200"
          alt="北极光"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">梦幻极光</h3>
          <p class="photo-desc">夜空中舞动的绿色极光，如同...</p>
        </div>
      </div>

      <!-- 照片8 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd', '璀璨星空', '无数星辰点缀夜空，银河横跨天际，令人震撼。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?w=200"
          alt="星空"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">璀璨星空</h3>
          <p class="photo-desc">无数星辰点缀夜空，银河横跨天际...</p>
        </div>
      </div>

      <!-- 照片9 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1506744038136-46273834b3fb', '宁静山脉', '晨曦中的山脉，宁静而壮丽，展现大自然的神奇魅力。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=200"
          alt="山脉景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">宁静山脉</h3>
          <p class="photo-desc">晨曦中的山脉，宁静而壮丽...</p>
        </div>
      </div>

      <!-- 照片10 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1518837695005-2083093ee35b', '蔚蓝海洋', '无边无际的海洋，波涛汹涌，充满力量与自由。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=200"
          alt="海洋景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">蔚蓝海洋</h3>
          <p class="photo-desc">无边无际的海洋，波涛汹涌...</p>
        </div>
      </div>

      <!-- 照片11 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1475924156734-496f6cac6ec1', '神秘森林', '阳光穿透茂密树叶，森林中光影交错，如同仙境。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=200"
          alt="森林景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">神秘森林</h3>
          <p class="photo-desc">阳光穿透茂密树叶，森林中光影交错...</p>
        </div>
      </div>

      <!-- 照片12 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b', '雪山之巅', '白雪覆盖的山峰，在阳光下闪耀着圣洁的光芒。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=200"
          alt="雪山景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">雪山之巅</h3>
          <p class="photo-desc">白雪覆盖的山峰，在阳光下闪耀...</p>
        </div>
      </div>

      <!-- 照片13 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1505142468610-359e7d316be0', '飞流瀑布', '水流从高处倾泻而下，形成壮观的瀑布景观。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=200"
          alt="瀑布景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">飞流瀑布</h3>
          <p class="photo-desc">水流从高处倾泻而下，形成壮观...</p>
        </div>
      </div>

      <!-- 照片14 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5', '金色沙漠', '无垠的沙漠，沙丘起伏，展现大自然的辽阔与神秘。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?w=200"
          alt="沙漠景色"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">金色沙漠</h3>
          <p class="photo-desc">无垠的沙漠，沙丘起伏，展现大自然...</p>
        </div>
      </div>

      <!-- 照片15 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1506260408121-e353d10b87c7', '梦幻极光', '夜空中舞动的绿色极光，如同大自然的神秘舞蹈。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?w=200"
          alt="北极光"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">梦幻极光</h3>
          <p class="photo-desc">夜空中舞动的绿色极光，如同...</p>
        </div>
      </div>

      <!-- 照片16 -->
      <div
        class="photo-card"
        onclick="openModal('https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd', '璀璨星空', '无数星辰点缀夜空，银河横跨天际，令人震撼。')"
      >
        <img
          loading="lazy"
          src="https://images.unsplash.com/photo-1470240731273-7821a6eeb6bd?w=200"
          alt="星空"
          class="photo-img"
        />
        <div class="photo-info">
          <h3 class="photo-title">璀璨星空</h3>
          <p class="photo-desc">无数星辰点缀夜空，银河横跨天际...</p>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <div class="modal" id="imageModal">
      <div class="modal-close" onclick="closeModal()">×</div>
      <div class="modal-content">
        <img class="modal-img" id="modalImage" src="" alt="" />
        <div class="modal-info">
          <h3 class="modal-title" id="modalTitle"></h3>
          <p class="modal-desc" id="modalDesc"></p>
        </div>
      </div>
    </div>

    <div class="footer">
      <p>
        © <a href="https://www.tomde.cloud" target="_blank">本站由Tomde.cloud提供</a> |
        所有图片来源于 Unsplash
      </p>
    </div>

    <script>
      // 获取模态框元素
      const modal = document.getElementById('imageModal')
      const modalImage = document.getElementById('modalImage')
      const modalTitle = document.getElementById('modalTitle')
      const modalDesc = document.getElementById('modalDesc')

      // 打开模态框函数
      function openModal(imageSrc, title, description) {
        modalImage.src = imageSrc
        modalTitle.textContent = title
        modalDesc.textContent = description
        modal.classList.add('active')
        document.body.style.overflow = 'hidden' // 防止背景滚动
      }

      // 关闭模态框函数
      function closeModal() {
        modal.classList.remove('active')
        document.body.style.overflow = 'auto' // 恢复背景滚动
      }

      // 点击模态框背景关闭
      modal.addEventListener('click', function (event) {
        if (event.target === modal) {
          closeModal()
        }
      })

      // 按ESC键关闭模态框
      document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && modal.classList.contains('active')) {
          closeModal()
        }
      })
    </script>
  </body>
</html>
预览地址： https://preview.yunbimo.com/45913c25-5772-42f3-b2a4-7a0c05c1924a
#暗黑主题 #纯静态源码 #响应式 #html网页模板
← Retour à l'accueil