使用 HTMLCSS 和 JavaScript 构建优雅的交互式作品集画廊-js教程-PHP中文网

Building an Elegant Interactive Portfolio Gallery with HTMLCSSand JavaScript

在当今的数字时代，您的作品集可以作为您的专业名片。无论您是网络开发人员、平面设计师、摄影师还是任何创意专业人士，精美的交互式作品集都可以显着增强您的在线形象、展示您的技能并吸引潜在客户或雇主。在本教程中，我们将引导您使用 HTML5、CSS3 和 JavaScript 创建复杂的交互式作品集。最后，您将拥有一个响应式图库，具有动态过滤、实时搜索栏、暗/亮模式切换以及直观的灯箱模式，可以有效地显示您的项目。

图1：优雅的互动作品集预览

为什么是互动作品集？
先决条件
设置项目结构
创建 HTML 结构
使用 CSS 样式
使用 JavaScript 添加交互性
实现暗/亮模式
增强用户体验：搜索和过滤
优化响应能力和可访问性
部署您的投资组合
推广您的作品集
结论
为什么是互动作品集？
交互式作品集不仅仅是列出您的项目；它吸引访问者，突出您的技能，并展示您创建用户友好且美观的界面的能力。过滤、搜索栏和暗/亮模式等交互元素不仅可以增强用户体验，还可以展示您对现代 Web 开发技术的熟练程度。

先决条件
在深入构建您的投资组合之前，请确保您拥有：

HTML、CSS 和 JavaScript 的基础知识：了解基础知识至关重要。
代码编辑器：推荐使用 Visual Studio Code、Sublime Text 或 Atom 等工具。
网络浏览器：带有开发人员工具的现代浏览器，例如 Google Chrome 或 Mozilla Firefox。
您的项目图像：展示您作品的高质量视觉效果。
设置项目结构
系统地组织您的项目文件，以便于管理和可扩展性。

作品集画廊/
│
├──index.html
├── styles.css
├── script.js
└── 资产/
└── 图片/
├── web-project1.jpg
├── 图形项目1.jpg
└── 摄影-project1.jpg
index.html：主要 HTML 文件。
styles.css：包含所有 CSS 样式。
script.js：保存用于交互的 JavaScript 代码。
asset/images/: 项目图片目录。
创建 HTML 结构
首先制作语义且可访问的 HTML 结构。这个基础可确保您的作品集用户友好且经过 SEO 优化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Elegant Interactive Portfolio Gallery</title>
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <!-- Google Fonts for Typography -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <!-- Stylesheet -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Header Section -->
  <header>
    <div>



<p>Key Components:<br>
Header:</p>

<p>Logo and Title: Incorporates a Font Awesome icon for a professional touch.<br>
Search Bar: Allows users to search through your projects in real-time.<br>
Theme Toggle: Enables users to switch between dark and light modes.<br>
Navigation Filters: Buttons to filter projects by category.<br>
Gallery:</p>

<p>Gallery Items: Each project is encapsulated within a gallery-item div, containing an image and an overlay with the project title and description.<br>
Lightbox Modal:</p>

<p>Lightbox Structure: Displays an enlarged view of the project image along with detailed information when a gallery item is clicked.<br>
Footer:</p>

<p>Social Links: Provides links to your social media profiles and websites with corresponding icons.<br>
Styling with CSS<br>
To achieve a modern and elegant look, we'll utilize CSS Grid for the gallery layout, flexbox for the header and navigation, and CSS variables for easy theming. We'll also implement responsive design to ensure the portfolio looks great on all devices.<br>
</p>

<pre class="brush:php;toolbar:false">/* =====================================================================
   1. CSS Variables for Theme Management
   ===================================================================== */

/* Light Theme Colors */
:root {
  --color-bg-light: #f0f2f5;
  --color-text-light: #333333;
  --color-header-bg-light: #ffffff;
  --color-header-text-light: #333333;
  --color-overlay-light: rgba(0, 0, 0, 0.7);
  --color-footer-bg-light: #ffffff;
  --color-footer-text-light: #333333;
  --color-button-bg-light: #e0e0e0;
  --color-button-hover-light: #333333;
  --color-button-text-light: #333333;
  --color-button-hover-text-light: #ffffff;

  /* Font Sizes */
  --font-size-base: 16px;
  --font-size-large: 2.5rem;
  --font-size-medium: 1.2rem;
  --font-size-small: 0.9rem;

  /* Transition Duration */
  --transition-duration: 0.3s;
}

/* Dark Theme Colors */
body.dark-mode {
  --color-bg-dark: #121212;
  --color-text-dark: #e0e0e0;
  --color-header-bg-dark: #1e1e1e;
  --color-header-text-dark: #e0e0e0;
  --color-overlay-dark: rgba(0, 0, 0, 0.85);
  --color-footer-bg-dark: #1e1e1e;
  --color-footer-text-dark: #e0e0e0;
  --color-button-bg-dark: #333333;
  --color-button-hover-dark: #ffffff;
  --color-button-text-dark: #ffffff;
  --color-button-hover-text-dark: #333333;
}

/* =====================================================================
   2. Reset and Base Styles
   ===================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--color-bg-light);
  color: var(--color-text-light);
  transition: background-color var(--transition-duration), color var(--transition-duration);
  line-height: 1.6;
}

/* Dark Mode Background and Text */
body.dark-mode {
  background-color: var(--color-bg-dark);
  color: var(--color-text-dark);
}

/* =====================================================================
   3. Header Styles
   ===================================================================== */

header {
  background-color: var(--color-header-bg-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
}

body.dark-mode header {
  background-color: var(--color-header-bg-dark);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header h1 {
  font-size: var(--font-size-large);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-header-text-light);
  transition: color var(--transition-duration);
}

body.dark-mode .header-container h1 {
  color: var(--color-header-text-dark);
}

.header-controls {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

#searchBar {
  padding: 0.6rem 1.2rem;
  border: 1px solid #ccc;
  border-radius: 30px;
  width: 250px;
  transition: border-color var(--transition-duration), background-color var(--transition-duration), color var(--transition-duration);
}

#searchBar:focus {
  border-color: #555;
  outline: none;
}

body.dark-mode #searchBar {
  background-color: #2c2c2c;
  color: #e0e0e0;
  border: 1px solid #555;
}

body.dark-mode #searchBar::placeholder {
  color: #aaa;
}

#themeToggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--color-button-text-light);
  transition: color var(--transition-duration);
}

body.dark-mode #themeToggle {
  color: var(--color-button-text-dark);
}

#themeToggle:hover {
  color: var(--color-button-hover-text-light);
}

body.dark-mode #themeToggle:hover {
  color: var(--color-button-hover-text-dark);
}

/* =====================================================================
   4. Navigation Styles
   ===================================================================== */

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

nav .filter-btn {
  padding: 0.6rem 1.2rem;
  border: none;
  background-color: var(--color-button-bg-light);
  cursor: pointer;
  transition: background-color var(--transition-duration), color var(--transition-duration), transform var(--transition-duration);
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-medium);
}

nav .filter-btn:hover {
  background-color: var(--color-button-hover-light);
  color: var(--color-button-hover-text-light);
  transform: translateY(-3px);
}

nav .filter-btn.active {
  background-color: #333333;
  color: #ffffff;
}

body.dark-mode nav .filter-btn {
  background-color: var(--color-button-bg-dark);
  color: var(--color-button-text-dark);
}

body.dark-mode nav .filter-btn:hover {
  background-color: var(--color-button-hover-dark);
  color: var(--color-button-hover-text-dark);
}

body.dark-mode nav .filter-btn.active {
  background-color: #ffffff;
  color: #333333;
}

/* =====================================================================
   5. Gallery Styles
   ===================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 3rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.gallery-item:hover {
  transform: translateY(-15px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-duration);
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  bottom: 0;
  background: var(--color-overlay-light);
  color: #ffffff;
  width: 100%;
  transform: translateY(100%);
  transition: transform var(--transition-duration), background-color var(--transition-duration);
  padding: 1.2rem;
  text-align: center;
}

.gallery-item:hover .overlay {
  transform: translateY(0);
}

body.dark-mode .overlay {
  background: var(--color-overlay-dark);
}

.overlay h3 {
  margin-bottom: 0.6rem;
  font-size: var(--font-size-medium);
  font-weight: 700;
}

.overlay p {
  font-size: var(--font-size-small);
  line-height: 1.4;
}

/* =====================================================================
   6. Lightbox Styles
   ===================================================================== */

.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: 2000;
  animation: fadeIn 0.3s ease;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  animation: slideDown 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

body.dark-mode .lightbox-content {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

.lightbox img {
  width: 100%;
  height: auto;
  display: block;
}

.lightbox-caption {
  padding: 1.5rem;
  background-color: #f9f9f9;
  transition: background-color var(--transition-duration), color var(--transition-duration);
}

body.dark-mode .lightbox-caption {
  background-color: #2c2c2c;
}

.lightbox-caption h3 {
  margin-bottom: 0.8rem;
  font-size: var(--font-size-medium);
}

.lightbox-caption p {
  font-size: var(--font-size-small);
  line-height: 1.5;
}

/* Close Button Styles */
.close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  transition: color var(--transition-duration), transform var(--transition-duration);
}

.close:hover {
  color: #cccccc;
  transform: scale(1.1);
}

body.dark-mode .close {
  color: #e0e0e0;
}

body.dark-mode .close:hover {
  color: #ffffff;
}

/* =====================================================================
   7. Footer Styles
   ===================================================================== */

footer {
  text-align: center;
  padding: 2rem 1rem;
  background-color: var(--color-footer-bg-light);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 3rem;
  transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
}

body.dark-mode footer {
  background-color: var(--color-footer-bg-dark);
  box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.1);
}

footer p {
  font-size: var(--font-size-small);
  color: var(--color-footer-text-light);
  transition: color var(--transition-duration);
}

body.dark-mode footer p {
  color: var(--color-footer-text-dark);
}

footer a {
  color: inherit;
  text-decoration: none;
  margin: 0 0.5rem;
  transition: color var(--transition-duration), transform var(--transition-duration);
}

footer a:hover {
  color: #0073e6;
  transform: scale(1.05);
}

body.dark-mode footer a:hover {
  color: #1e90ff;
}

/* =====================================================================
   8. Responsive Design Adjustments
   ===================================================================== */

@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }

  .header-controls {
    flex-direction: column;
    gap: 0.5rem;
  }

  #searchBar {
    width: 200px;
  }

  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  .gallery {
    padding: 2rem 1rem;
    gap: 1.5rem;
  }

  .lightbox-content {
    max-width: 90%;
    max-height: 90%;
  }
}

@media (max-width: 480px) {
  header h1 {
    font-size: 1.8rem;
  }

  #searchBar {
    width: 180px;
  }

  .gallery-item {
    border-radius: 10px;
  }

  .overlay h3 {
    font-size: 1rem;
  }

  .overlay p {
    font-size: 0.8rem;
  }

  .lightbox-caption {
    padding: 1rem;
  }

  .lightbox-caption h3 {
    font-size: 1rem;
  }

  .lightbox-caption p {
    font-size: 0.8rem;
  }

  footer p {
    font-size: 0.8rem;
  }
}

/* =====================================================================
   9. Keyframe Animations
   ===================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

登录后复制

增强功能说明：
用于主题管理的 CSS 变量：

浅色和深色主题变量：利用 CSS 变量可以在整个样式表中轻松主题化和一致的颜色管理。
现代版式和布局：

字体大小和行高：各种字体大小的定义变量确保一致性和可扩展性。
盒子阴影和过渡：增加深度和流畅的交互增强视觉吸引力。
响应式设计：

媒体查询：确保产品组合无缝适应不同的屏幕尺寸，在移动设备、平板电脑和台式机上提供最佳的观看体验。
互动元素：

悬停效果：微妙的缩放和阴影增强使交互感觉更加动态和引人入胜。
平滑过渡：确保主题切换和灯箱动画等变化感觉自然流畅。
辅助功能注意事项：

颜色对比度：在文本和背景之间保持足够的对比度，以提高可读性。
交互式元素大小：按钮和交互式元素的大小适当，以便在所有设备上轻松交互。
使用 JavaScript 添加交互
JavaScript 通过处理用户交互（例如过滤项目、打开灯箱以及在深色和浅色模式之间切换）让您的作品集栩栩如生。

// =====================================================================
// 1. Selecting Elements
// =====================================================================

const filterButtons = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');
const searchBar = document.getElementById('searchBar');

const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxTitle = document.getElementById('lightbox-title');
const lightboxDescription = document.getElementById('lightbox-description');
const closeBtn = document.querySelector('.close');

const themeToggleBtn = document.getElementById('themeToggle');
const body = document.body;
const header = document.querySelector('header');
const galleryItemsArray = Array.from(galleryItems);
const lightboxContent = document.querySelector('.lightbox-content');
const overlayElements = document.querySelectorAll('.overlay');
const filterBtns = document.querySelectorAll('.filter-btn');

// =====================================================================
// 2. Filtering Functionality
// =====================================================================

function filterGallery() {
  const activeFilter = document.querySelector('.filter-btn.active').getAttribute('data-filter');
  const searchQuery = searchBar.value.toLowerCase();

  galleryItems.forEach(item => {
    const itemCategory = item.getAttribute('data-category');
    const itemTitle = item.querySelector('.overlay h3').textContent.toLowerCase();

    if (
      (activeFilter === 'all' || itemCategory === activeFilter) &&
      itemTitle.includes(searchQuery)
    ) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
}

// Event Listeners for Filter Buttons
filterButtons.forEach(button => {
  button.addEventListener('click', () => {
    // Remove 'active' class from all buttons
    filterButtons.forEach(btn => btn.classList.remove('active'));
    // Add 'active' class to the clicked button
    button.classList.add('active');

    // Filter the gallery based on the selected category
    filterGallery();
  });
});

// Event Listener for Search Bar
searchBar.addEventListener('input', () => {
  filterGallery();
});

// =====================================================================
// 3. Lightbox Functionality
// =====================================================================

// Function to Open Lightbox
function openLightbox(item) {
  const imgSrc = item.querySelector('img').src;
  const title = item.querySelector('.overlay h3').textContent;
  const description = item.querySelector('.overlay p').textContent;

  lightboxImg.src = imgSrc;
  lightboxTitle.textContent = title;
  lightboxDescription.textContent = description;

  lightbox.classList.add('active');
  body.style.overflow = 'hidden'; // Prevent background scrolling
}

// Event Listeners for Gallery Items
galleryItems.forEach(item => {
  item.addEventListener('click', () => {
    openLightbox(item);
  });
});

// Function to Close Lightbox
function closeLightbox() {
  lightbox.classList.remove('active');
  body.style.overflow = 'auto'; // Restore background scrolling
}

// Event Listener for Close Button
closeBtn.addEventListener('click', () => {
  closeLightbox();
});

// Event Listener for Clicking Outside Lightbox Content
window.addEventListener('click', (e) => {
  if (e.target === lightbox) {
    closeLightbox();
  }
});

// =====================================================================
// 4. Theme Toggle Functionality
// =====================================================================

// Retrieve Saved Theme from Local Storage
const savedTheme = localStorage.getItem('theme') || 'light-mode';

// Function to Apply Theme
function applyTheme(theme) {
  if (theme === 'dark-mode') {
    body.classList.add('dark-mode');
    header.classList.add('dark-mode');
    lightbox.classList.add('dark-mode');
    lightboxContent.classList.add('dark-mode');
    overlayElements.forEach(el => el.classList.add('dark-mode'));
    galleryItemsArray.forEach(item => item.classList.add('dark-mode'));
    filterBtns.forEach(btn => btn.classList.add('dark-mode'));

    // Change Icon to Sun
    themeToggleBtn.querySelector('i').classList.remove('fa-moon');
    themeToggleBtn.querySelector('i').classList.add('fa-sun');
  } else {
    body.classList.remove('dark-mode');
    header.classList.remove('dark-mode');
    lightbox.classList.remove('dark-mode');
    lightboxContent.classList.remove('dark-mode');
    overlayElements.forEach(el => el.classList.remove('dark-mode'));
    galleryItemsArray.forEach(item => item.classList.remove('dark-mode'));
    filterBtns.forEach(btn => btn.classList.remove('dark-mode'));

    // Change Icon to Moon
    themeToggleBtn.querySelector('i').classList.remove('fa-sun');
    themeToggleBtn.querySelector('i').classList.add('fa-moon');
  }
}

// Apply Saved Theme on Page Load
applyTheme(savedTheme);

// Event Listener for Theme Toggle Button
themeToggleBtn.addEventListener('click', () => {
  if (body.classList.contains('dark-mode')) {
    applyTheme('light-mode');
    localStorage.setItem('theme', 'light-mode');
  } else {
    applyTheme('dark-mode');
    localStorage.setItem('theme', 'dark-mode');
  }
});

登录后复制

主要功能：
筛选项目：

基于类别的过滤：用户可以按网页设计、平面设计和摄影等类别过滤项目。
实时搜索：搜索栏根据输入过滤项目，增强用户体验。
灯箱模态：

图像放大：单击项目将打开一个模式，显示更大的图像和详细说明。
无缝导航：用户可以通过单击关闭按钮或内容区域之外轻松关闭模式。
暗/亮模式切换：

用户偏好：用户可以在深色和浅色主题之间切换，并将他们的偏好保存在 localStorage 中以便跨会话持久保存。
图标切换：切换按钮图标动态变化以反映当前主题。
实施暗/亮模式
深色模式不仅提供了现代美感，还增强了用户在弱光环境下的可访问性。以下是如何在您的作品集中集成暗/亮模式切换：

CSS 变量：我们已经为浅色和深色主题定义了变量。
JavaScript Toggle：script.js 处理暗模式类的添加和删除，从而相应地更改主题。
保留用户偏好：使用 localStorage，保存用户的主题偏好并在后续访问时应用。
增强用户体验：搜索和过滤
动态过滤和实时搜索栏使用户能够轻松浏览您的项目。

按类别过滤：用户可以单击筛选按钮来查看特定类别内的项目。
实时搜索：当用户在搜索栏中输入内容时，系统会根据输入实时筛选项目，提供即时反馈。
优化响应能力和可访问性
优雅的产品组合必须响应迅速且易于访问，以满足所有用户的需求。

响应式设计：

灵活的布局：使用 CSS Grid 和 Flexbox 确保图库适应各种屏幕尺寸。
媒体查询：根据设备宽度调整字体大小、填充和布局，以获得最佳观看效果。
辅助功能：

图像的替代文本：描述性替代属性可提高屏幕阅读器的可访问性。
键盘导航：确保所有交互元素都可以通过键盘访问。
颜色对比度：保持文本和背景之间的高对比度以提高可读性。
部署您的投资组合
一旦对您的产品组合感到满意，就可以将其部署给全世界看。

托管平台：

GitHub Pages：静态网站的免费托管服务。
Netlify：提供持续部署和免费托管以及自定义域支持。
Vercel：为前端项目提供无缝部署。
自定义域：

购买自定义域名，让您的作品集更加专业和令人难忘。
SEO 优化：

使用有意义的元标签、标题和描述。
通过压缩图像和缩小 CSS/JS 文件来优化加载时间。
推广您的投资组合
拥有令人惊叹的投资组合只是第一步。推广它可以确保它到达您的目标受众。

社交媒体：

在 LinkedIn、Twitter 和 Facebook 等平台上分享您的作品集。
使用相关主题标签来提高可见度。
网络：

与 Reddit、Stack Overflow 或 Dribbble 上的社区互动。
参加虚拟或面对面的社交活动来展示您的作品。
搜索引擎优化和内容营销：

创建与您的领域相关的博客以增加自然流量。
使用相关关键字针对搜索引擎优化您的投资组合。
电子邮件签名：

在电子邮件签名中包含指向您的作品集的链接，以被动地推广它。
结论
创建优雅的交互式作品集画廊是一项有益的努力，它以专业且引人入胜的方式展示您的技能和项目。通过利用 HTML5、CSS3 和 JavaScript，您可以构建在数字领域脱颖而出的响应式动态产品组合。

探索更多我的作品：
LinkedIn：皮埃尔-罗曼·洛佩兹
角斗士之战：gladiatorsbattle.com
DivWeb：divweb.fr
推特：@GladiatorsBT
JeanFernandsEtti：jeanfernandsetti.fr
XavierFlabat：xavier-flabat.com
请随时通过我的社交媒体渠道或访问我的网站来了解有关我的项目和服务的更多信息。我始终对合作和新机会持开放态度！

祝您编码愉快，祝您的作品好运！ ?✨

作者简介
Pierre-Romain Lopez 是一位充满热情的 Web 开发人员和设计师，对细节有着敏锐的洞察力，致力于创造引人入胜且用户友好的数字体验。 Pierre-Romain 拥有涵盖网页设计、平面设计和摄影的多元化产品组合，擅长通过代码和设计将创意愿景变为现实。

以上是使用 HTMLCSS 和 JavaScript 构建优雅的交互式作品集画廊的详细内容。更多信息请关注PHP中文网其他相关文章！