夜行暗夜摄影作品集 HTML 单页源码

这是一款为街头摄影师、夜景爱好者或独立创作者设计的暗色作品集模板。整体以近乎纯黑的背景为底，搭配金棕色作为点缀色，营造出深夜城市的高级感与神秘感。页面顶部是品牌名「夜行」与极简导航，首屏以大字标题和一句系列说明直接点题，视觉冲击力极强。

主体部分使用 CSS columns 实现了三栏瀑布流画廊，适配不同高度的摄影作品占位，hover 时卡片轻微上浮并出现金色描边，细节处使用了微妙的阴影与高亮。下方还设置了「关于摄影师」双栏区域，左侧为肖像占位，右侧为自我介绍，方便创作者讲述自己的拍摄理念与故事。

非常适合需要快速搭建线上作品集、摄影比赛投稿页或客户作品展示页的个人摄影师。将占位图替换为真实摄影作品后，即可作为正式的个人主页上线，无需后端支持，也不需要任何额外依赖。

使用教程

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{
    --bg:#0a0908; --card:#131210; --gold:#d9b067; --gold2:#f3d79b;
    --ink:#f4efe6; --muted:#9c9488; --line:rgba(217,176,103,.18);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Songti SC","PingFang SC",Georgia,serif;background:var(--bg);color:var(--ink);
    line-height:1.8;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  header{display:flex;justify-content:space-between;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}
  .logo{font-size:24px;letter-spacing:6px;font-weight:600;color:var(--gold2)}
  .logo small{display:block;font-size:11px;letter-spacing:3px;color:var(--muted);margin-top:4px}
  nav a{margin-left:30px;color:var(--muted);font-size:14px;letter-spacing:1px;transition:.2s}
  nav a:hover{color:var(--gold)}
  .hero{text-align:center;padding:96px 0 64px}
  .hero .kicker{color:var(--gold);letter-spacing:8px;font-size:13px;margin-bottom:18px}
  .hero h1{font-size:64px;letter-spacing:14px;font-weight:400;margin-bottom:20px;
    background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p{color:var(--muted);max-width:560px;margin:0 auto;font-size:16px}
  .gallery{columns:3;column-gap:18px;padding-bottom:80px}
  figure{margin:0 0 18px;break-inside:avoid;border:1px solid var(--line);border-radius:10px;overflow:hidden;
    background:var(--card);transition:.3s;cursor:pointer}
  figure:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 18px 50px rgba(217,176,103,.15)}
  .ph{height:auto;display:block;width:100%}
  .ph.h1{aspect-ratio:3/4;background:linear-gradient(160deg,#1c1a16,#0d0c0a)}
  .ph.h2{aspect-ratio:1/1;background:linear-gradient(160deg,#241f17,#0d0c0a)}
  .ph.h3{aspect-ratio:4/5;background:linear-gradient(160deg,#2a2218,#0d0c0a)}
  .ph.h4{aspect-ratio:16/10;background:linear-gradient(160deg,#1a1814,#0d0c0a)}
  figure figcaption{padding:14px 16px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
  figure figcaption b{color:var(--gold2);font-weight:500}
  .about{padding:80px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .about h2{font-size:32px;font-weight:400;letter-spacing:4px;margin-bottom:18px;color:var(--gold2)}
  .about p{color:var(--muted);margin-bottom:16px}
  .about .port{aspect-ratio:1/1;border-radius:14px;border:1px solid var(--line);
    background:radial-gradient(circle at 40% 35%,#2a2218,#0a0908)}
  footer{text-align:center;padding:40px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--line);letter-spacing:1px}
  @media(max-width:900px){.gallery{columns:2}.hero h1{font-size:44px}.about{grid-template-columns:1fr;gap:32px}}
  @media(max-width:560px){.gallery{columns:1}nav{display:none}}
</style>
</head>
<body>
<header class="wrap">
  <div class="logo">夜行<small>NIGHT WALK · PHOTOGRAPHY</small></div>
  <nav><a href="#works">作品</a><a href="#about">关于</a><a href="#contact">联系</a></nav>
</header>

<section class="wrap hero">
  <div class="kicker">A  COLLECTION  OF  NIGHTS</div>
  <h1>夜　行</h1>
  <p>在城市的灯火与阴影之间，记录那些只属于深夜的安静瞬间。这里收录了 2021 年至今的街拍、夜景与光影实验。</p>
</section>

<main class="wrap gallery" id="works">
  <figure><div class="ph h1"></div><figcaption><span>霓虹巷口</span><b>2024 · 上海</b></figcaption></figure>
  <figure><div class="ph h2"></div><figcaption><span>午夜便利店</span><b>2023 · 东京</b></figcaption></figure>
  <figure><div class="ph h3"></div><figcaption><span>雨夜出租车</span><b>2024 · 香港</b></figcaption></figure>
  <figure><div class="ph h4"></div><figcaption><span>天台与远灯</span><b>2022 · 重庆</b></figcaption></figure>
  <figure><div class="ph h2"></div><figcaption><span>橱窗倒影</span><b>2023 · 巴黎</b></figcaption></figure>
  <figure><div class="ph h1"></div><figcaption><span>地铁尽头</span><b>2024 · 首尔</b></figcaption></figure>
  <figure><div class="ph h3"></div><figcaption><span>孤独的路灯</span><b>2022 · 北京</b></figcaption></figure>
  <figure><div class="ph h4"></div><figcaption><span>河岸长曝</span><b>2023 · 广州</b></figcaption></figure>
  <figure><div class="ph h2"></div><figcaption><span>末班电车</span><b>2024 · 大阪</b></figcaption></figure>
</main>

<section class="wrap about" id="about">
  <div class="port"></div>
  <div>
    <h2>关于摄影师</h2>
    <p>我是阿野，一名习惯在午夜出门的街头摄影师。比起白天的喧嚣，我更着迷于夜晚城市卸下伪装后的真实。</p>
    <p>这组「夜行」系列没有刻意摆拍，只是把镜头交给偶然——一束斜照的霓虹、一地未干的水光、一个等车人的侧影。</p>
    <p>如果你也喜欢这种安静的暗调美学，欢迎在下方与我交流，或邀我合作拍摄。</p>
  </div>
</section>

<footer id="contact">© 2026 夜行 NIGHT WALK · 合作请邮件 hi@nightwalk.photo</footer>
</body>
</html>

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