# 摄影网站

**Repository Path**: dcmnioa/photography-website

## Basic Information

- **Project Name**: 摄影网站
- **Description**: 个人设计网站
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-09
- **Last Updated**: 2026-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 个人摄影作品展示网站

这是一个基于HTML5和CSS3开发的个人摄影作品展示网站，用于展示摄影师的作品集和个人信息。

## 项目结构

```
├── index.html          # 主页面
├── landscape.html      # 山景日落作品详情页
├── portrait.html       # 人物肖像作品详情页
├── street.html         # 城市街头作品详情页
├── macro.html          # 微观世界作品详情页
├── architecture.html   # 建筑之美作品详情页
├── food.html           # 美食艺术作品详情页
├── variables.css       # CSS变量文件
├── lightbox.css        # 灯箱效果CSS文件
└── README.md           # 项目说明文档
```

## 功能特点

### 1. 现代化设计
- 简洁美观的界面布局
- 流畅的动画效果
- 响应式设计，适配各种设备

### 2. 核心功能
- **导航栏**：包含首页、作品、关于我、联系等导航链接
- **英雄区域**：全屏背景展示，突出摄影主题
- **作品集展示**：响应式网格布局，展示不同类别的摄影作品
- **作品详情页**：每个作品都有独立的详情页，展示作品大图和详细信息
- **灯箱效果**：点击作品图片可查看大图，支持键盘导航
- **下载功能**：在作品详情页可下载作品图片
- **联系表单**：支持访客留言，模拟数据存储到MongoDB数据库
- **关于我**：摄影师个人简介和头像
- **联系信息**：邮箱、电话和地址信息

### 3. 交互效果
- 图片悬停放大和信息叠加效果
- 平滑滚动效果
- 导航栏滚动时背景透明度变化
- 灯箱效果的平滑过渡动画
- 表单提交的反馈动画

## 技术实现

- **前端技术**：HTML5, CSS3, 原生JavaScript
- **图标库**：Font Awesome
- **CSS变量**：使用CSS变量统一管理颜色和样式
- **灯箱效果**：纯CSS和JavaScript实现的图片查看功能
- **表单处理**：客户端表单验证和模拟MongoDB存储
- **图片资源**：使用网络图片作为示例作品（通过text_to_image API生成）

## 如何使用

### 本地预览
1. 打开文件资源管理器，导航到项目目录
2. 双击 `index.html` 文件，浏览器会自动打开并显示网站
3. 或者在浏览器地址栏中输入 `file:///path/to/project/index.html`

### 部署到服务器
1. 将 `index.html` 文件上传到您的网站服务器
2. 确保服务器配置正确，能够正确解析HTML文件
3. 通过服务器域名或IP地址访问网站

## 自定义修改

### 替换作品图片
1. 打开 `index.html` 文件
2. 找到 `<div class="gallery">` 部分
3. 替换每个 `<img>` 标签的 `src` 属性为您自己的作品图片URL

### 修改个人信息
1. 打开 `index.html` 文件
2. 找到 `<section id="about">` 部分
3. 修改摄影师姓名、简介等信息
4. 替换头像图片的 `src` 属性

### 修改联系信息
1. 打开 `index.html` 文件
2. 找到 `<section id="contact">` 部分
3. 修改邮箱、电话和社交媒体链接

## 响应式设计

网站采用响应式设计，能够自适应不同屏幕尺寸：
- **桌面端**：多列网格布局
- **平板端**：适当调整布局和字体大小
- **移动端**：单列布局，隐藏导航菜单

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 许可证

本项目采用 MIT 许可证，详见 LICENSE 文件。

## 联系方式

如果您对本项目有任何问题或建议，欢迎联系：

- 邮箱：18733098655@163.com
- 电话：18733098655
- 地址：河北省沧州市开发区中心