网页设计相册模板代码哪里找？-网页设计-锦华智联科技

基础静态相册（纯 HTML & CSS）

这个模板最简单，适合展示少量、固定数量的照片，它没有交互功能，但结构清晰,易于上手。

（图片来源网络，侵删）

特点：

纯静态展示。
响应式布局,在不同屏幕尺寸下都能良好显示。
使用 CSS Grid 实现瀑布流或网格布局。

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的基础相册</title>
    <style>
        /* --- 基础样式 --- */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
            color: #333;
        }
        .album-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            color: #1a1a1a;
            margin-bottom: 30px;
        }
        /* --- 相册网格布局 --- */
        .album-grid {
            display: grid;
            /* 定义列：在小屏幕上1列，中等屏幕2列，大屏幕3列 */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px; /* 网格之间的间距 */
        }
        /* --- 照片卡片样式 --- */
        .photo-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden; /* 使图片圆角生效 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .photo-card:hover {
            transform: translateY(-5px); /* 鼠标悬停时上移 */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        .photo-card img {
            width: 100%;
            height: 250px; /* 固定高度，可以改为 auto */
            object-fit: cover; /* 保证图片填充并裁剪，避免变形 */
            display: block;
        }
        .photo-info {
            padding: 15px;
        }
        .photo-info h3 {
            margin: 0 0 10px 0;
            font-size: 1.1em;
        }
        .photo-info p {
            margin: 0;
            font-size: 0.9em;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="album-container">
        <h1>我的旅行相册</h1>
        <div class="album-grid">
            <!-- 照片卡片 1 -->
            <div class="photo-card">
                <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="山景">
                <div class="photo-info">
                    <h3>壮丽的山川</h3>
                    <p>拍摄于：2025年10月</p>
                </div>
            </div>
            <!-- 照片卡片 2 -->
            <div class="photo-card">
                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="城市夜景">
                <div class="photo-info">
                    <h3>璀璨的城市夜景</h3>
                    <p>拍摄于：2025年9月</p>
                </div>
            </div>
            <!-- 照片卡片 3 -->
            <div class="photo-card">
                <img src="https://images.unsplash.com/photo-1516298773066-c48f8e9bd92b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="海边日落">
                <div class="photo-info">
                    <h3>宁静的海边日落</h3>
                    <p>拍摄于：2025年8月</p>
                </div>
            </div>
            <!-- 照片卡片 4 -->
            <div class="photo-card">
                <img src="https://images.unsplash.com/photo-1518717758536-85ae29035b6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="森林小径">
                <div class="photo-info">
                    <h3>幽静的森林小径</h3>
                    <p>拍摄于：2025年7月</p>
                </div>
            </div>
            <!-- 可以继续添加更多照片卡片 -->
        </div>
    </div>
</body>
</html>

如何使用：

将以上代码复制到一个 .html 文件中。
修改 <img> 标签的 src 属性为你自己的图片路径。
修改 <h3> 和 <p> 中的文字为你自己的照片描述。
在 <div class="album-grid"> 中复制 <div class="photo-card">...</div> 整个块来添加更多照片。

带灯箱效果的现代相册（HTML, CSS, JavaScript）

这个模板更高级，点击照片后会以全屏方式（灯箱效果）展示，并提供上一张/下一张导航。

特点：

响应式网格布局。
点击图片弹出灯箱效果。
灯箱内支持左右切换图片。
点击背景或关闭按钮可退出灯箱。

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">现代灯箱相册</title>
    <style>
        /* --- 基础样式 --- */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #222;
            color: #fff;
        }
        .album-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        /* --- 相册网格布局 --- */
        .album-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
        }
        /* --- 照片缩略图样式 --- */
        .thumbnail {
            position: relative;
            cursor: pointer;
            overflow: hidden;
            border-radius: 8px;
            aspect-ratio: 1 / 1; /* 保持正方形 */
        }
        .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .thumbnail:hover img {
            transform: scale(1.05); /* 鼠标悬停时轻微放大 */
        }
        /* --- 灯箱样式 --- */
        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            display: none; /* 默认隐藏 */
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .lightbox.active {
            display: flex;
        }
        .lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
        }
        .lightbox-content img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 5px;
        }
        /* --- 灯箱导航按钮 --- */
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            border: none;
            font-size: 2em;
            padding: 15px 20px;
            cursor: pointer;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }
        .nav-btn:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
        .prev-btn {
            left: 20px;
        }
        .next-btn {
            right: 20px;
        }
        /* --- 关闭按钮 --- */
        .close-btn {
            position: absolute;
            top: 20px;
            right: 40px;
            font-size: 2em;
            color: #fff;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div class="album-container">
        <h1>我的精选相册</h1>
        <div class="album-grid" id="albumGrid">
            <!-- 照片将通过 JavaScript 动态生成 -->
        </div>
    </div>
    <!-- 灯箱容器 -->
    <div class="lightbox" id="lightbox">
        <button class="close-btn" id="closeBtn">&times;</button>
        <button class="nav-btn prev-btn" id="prevBtn">&#10094;</button>
        <div class="lightbox-content">
            <img id="lightboxImg" src="" alt="">
        </div>
        <button class="nav-btn next-btn" id="nextBtn">&#10095;</button>
    </div>
    <script>
        // 照片数据
        const photos = [
            { src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: '山景' },
            { src: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: '城市夜景' },
            { src: 'https://images.unsplash.com/photo-1516298773066-c48f8e9bd92b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: '海边日落' },
            { src: 'https://images.unsplash.com/photo-1518717758536-85ae29035b6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: '森林小径' },
            { src: 'https://images.unsplash.com/photo-1543857778-c4a1a569e7bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: '咖啡厅' },
            { src: 'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80', alt: '雪山' }
        ];
        const albumGrid = document.getElementById('albumGrid');
        const lightbox = document.getElementById('lightbox');
        const lightboxImg = document.getElementById('lightboxImg');
        const closeBtn = document.getElementById('closeBtn');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        let currentPhotoIndex = 0;
        // 初始化相册
        function initAlbum() {
            photos.forEach((photo, index) => {
                const thumbnail = document.createElement('div');
                thumbnail.className = 'thumbnail';
                thumbnail.innerHTML = `<img src="${photo.src}" alt="${photo.alt}">`;
                thumbnail.addEventListener('click', () => openLightbox(index));
                albumGrid.appendChild(thumbnail);
            });
        }
        // 打开灯箱
        function openLightbox(index) {
            currentPhotoIndex = index;
            lightboxImg.src = photos[currentPhotoIndex].src;
            lightbox.classList.add('active');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }
        // 关闭灯箱
        function closeLightbox() {
            lightbox.classList.remove('active');
            document.body.style.overflow = ''; // 恢复背景滚动
        }
        // 显示上一张
        function showPrevPhoto() {
            currentPhotoIndex = (currentPhotoIndex - 1 + photos.length) % photos.length;
            lightboxImg.src = photos[currentPhotoIndex].src;
        }
        // 显示下一张
        function showNextPhoto() {
            currentPhotoIndex = (currentPhotoIndex + 1) % photos.length;
            lightboxImg.src = photos[currentPhotoIndex].src;
        }
        // 事件监听
        closeBtn.addEventListener('click', closeLightbox);
        prevBtn.addEventListener('click', showPrevPhoto);
        nextBtn.addEventListener('click', showNextPhoto);
        lightbox.addEventListener('click', (e) => {
            // 如果点击的是灯箱背景（而不是内容或按钮），则关闭
            if (e.target === lightbox) {
                closeLightbox();
            }
        });
        // 键盘事件
        document.addEventListener('keydown', (e) => {
            if (lightbox.classList.contains('active')) {
                if (e.key === 'Escape') {
                    closeLightbox();
                } else if (e.key === 'ArrowLeft') {
                    showPrevPhoto();
                } else if (e.key === 'ArrowRight') {
                    showNextPhoto();
                }
            }
        });
        // 启动
        initAlbum();
    </script>
</body>
</html>

如何使用：

将代码复制到 .html 文件。
修改 photos 数组，将 src 替换为你自己的图片路径，alt 替换为图片描述。
可以直接在浏览器中打开查看效果。

使用第三方库（如 PhotoSwipe）的专业相册

对于功能更强大、性能更优、兼容性更好的相册，强烈建议使用成熟的第三方库。PhotoSwipe 是一个非常流行且功能强大的选择。

特点：

专业级灯箱效果。
支持触摸滑动（移动端友好）。
支持键盘和鼠标滚轮。
加载速度快,对性能优化好。
高度可定制。

步骤和代码：

第1步：引入 PhotoSwipe 的 CSS 和 JS 文件

<!-- Head 部分 -->
<head>
    <!-- ... 其他 meta 标签 ... -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.min.css" integrity="sha512-5kxhT+aCbMrgjZs0Cg6u6XKek5AQQxm5s2x7zGgPb8fXtUWVb1Km14sWZ2n6Uf7wS2JqPdZQnGk7kDZtUJZdA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<!-- Body 底部 -->
<body>
    <!-- 你的相册 HTML 内容 -->
    <!-- PhotoSwipe 核心文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.umd.min.js" integrity="sha512-3J8jA0nK6lkupCYSKt4h2d+H2L8qH7lIz6bTvQ5fz5A8wUyWJ5b7j5C5k+XfK1lD5Xf7L1l4qj3w5kz1ZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- PhotoSwipe UI 样式文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe-ui-default.min.js" integrity="sha512-kBZ5evBnjmXW2Wp1sLzN5iJ6UKjwB6pA2y9U5q6q1Kz2Zc6Vq5T+X4y8Z5f5U5k6U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U5U

（图片来源网络，侵删）