山丘乐队 Hill Band 民谣音乐人主页 HTML 单页源码

这是一款为原创民谣、独立乐队以及独立音乐人设计的个人主页模板。整体走暖木棕 + 米白 + 橄榄绿的「森林 / 老房 / 原声」调性，传达出诚恳、不浮夸的创作态度，特别适合走「城市民谣 / 原声吉他」路线的音乐人。首屏「唱给山丘，也唱给你听」点题，配合巡演日程 CTA，第一时间把流量导向近期演出。

页面结构为音乐人主页的标准三段：首屏品牌主张 → 三张专辑 / EP 卡片（用 CSS 渐变方块作封面 placeholder）→ 巡演日程列表（带城市 / 场地 / 购票状态，含售罄灰化处理）→ 关于乐队图文 → 邀请关注的 CTA。通篇不弹窗、不加社群堆叠，让作品本身唱主角。

适合民谣 / 独立音乐人、原声乐队、原创歌手、校园歌手、城市民谣厂牌，也适合诗歌创作者、词作者用作个人主页。替换乐队名、歌曲、巡演地点与平台链接后即可使用。

使用教程

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>山丘乐队 Hill Band · 民谣音乐人</title>
<style>
  :root{
    --bg:#f3ece0; --bg2:#efe6d6; --card:#fffaf2; --line:#d9c9b0;
    --wood:#6b4a2f; --wood2:#8a6240; --olive:#6f7a4a; --txt:#3a2e22; --mut:#7a6a55;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);line-height:1.7}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  header{background:rgba(243,236,224,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font-weight:800;letter-spacing:1px;font-size:20px;color:var(--wood)}
  .nav a{color:var(--mut);margin-left:26px;font-size:14px}
  .nav a:hover{color:var(--wood)}
  .hero{padding:84px 0 70px;text-align:center;background:radial-gradient(800px 380px at 50% -10%,rgba(138,98,64,.18),transparent 60%)}
  .hero .tag{color:var(--olive);letter-spacing:5px;font-size:13px}
  .hero h1{font-size:52px;line-height:1.14;margin:14px 0;color:var(--wood)}
  .hero p{color:var(--mut);max-width:540px;margin:0 auto 24px;font-size:16px}
  .btn{display:inline-block;background:var(--wood);color:#fdf6ec;padding:13px 34px;border-radius:999px;font-weight:700;letter-spacing:1px}
  .btn.ghost{background:transparent;border:1px solid var(--wood);color:var(--wood);margin-left:12px}
  section{padding:66px 0}
  .tag{color:var(--olive);letter-spacing:4px;font-size:13px;text-align:center}
  h2{font-size:30px;text-align:center;color:var(--wood);letter-spacing:1px;margin:8px 0 12px}
  .lead{color:var(--mut);text-align:center;max-width:620px;margin:0 auto}
  .albums{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
  .a{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center;transition:.25s}
  .a:hover{transform:translateY(-6px);border-color:var(--wood)}
  .a .cv{width:100%;aspect-ratio:1/1;border-radius:12px;background:linear-gradient(150deg,var(--wood2),var(--olive))}
  .a.playing .cv{background:linear-gradient(150deg,var(--olive),var(--wood))}
  .a h3{font-size:18px;color:var(--wood);margin-top:14px}
  .a .yr{color:var(--mut);font-size:13px}
  .tour{max-width:760px;margin:38px auto 0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .row{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line)}
  .row:last-child{border-bottom:none}
  .row .date{font-weight:800;color:var(--wood);min-width:84px}
  .row .city{color:var(--txt);font-weight:600}
  .row .venue{color:var(--mut);font-size:13px}
  .row .tk{background:var(--wood);color:#fdf6ec;padding:7px 16px;border-radius:8px;font-size:13px}
  .row .tk.sold{background:var(--line);color:var(--mut)}
  .about{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center;margin-top:38px;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:32px}
  .about .ph{height:200px;border-radius:14px;background:linear-gradient(150deg,var(--wood),var(--olive))}
  .about p{color:var(--mut);font-size:14.5px;margin-top:8px}
  .cta{text-align:center;background:linear-gradient(160deg,var(--bg2),var(--bg));border-top:1px solid var(--line)}
  footer{border-top:1px solid var(--line);padding:26px 0;text-align:center;color:var(--mut);font-size:13px}
  @media(max-width:860px){.hero h1{font-size:34px}.albums{grid-template-columns:1fr}.about{grid-template-columns:1fr;text-align:center}.row{flex-wrap:wrap;gap:8px}.nav a{margin-left:14px;font-size:13px}}
</style>
</head>
<body>
<header><div class="wrap nav">
  <div class="logo">山丘乐队 · Hill Band</div>
  <nav><a href="#music">音乐</a><a href="#tour">巡演</a><a href="#about">关于</a><a href="#listen">收听</a></nav>
</div></header>

<section class="hero"><div class="wrap">
  <div class="tag">FOLK · ACOUSTIC · STORIES</div>
  <h1>唱给山丘，<br>也唱给你听</h1>
  <p>三个在城市里长大的孩子，用吉他、口琴和一把好嗓子，写关于远方与回家的歌。</p>
  <a class="btn" href="#listen">在音乐平台收听</a><a class="btn ghost" href="#tour">看巡演日程</a>
</div></section>

<section id="music"><div class="wrap">
  <div class="tag">DISCOGRAPHY</div>
  <h2>专辑与单曲</h2>
  <div class="lead">从山谷到海边，每一张都记录了一段旅程。</div>
  <div class="albums">
    <div class="a playing"><div class="cv"></div><h3>慢火车</h3><div class="yr">2025 · 全长专辑</div></div>
    <div class="a"><div class="cv"></div><h3>海风来信</h3><div class="yr">2024 · EP</div></div>
    <div class="a"><div class="cv"></div><h3>晚安山丘</h3><div class="yr">2023 · 单曲</div></div>
  </div>
</div></section>

<section id="tour" style="background:var(--bg2)"><div class="wrap">
  <div class="tag">LIVE 2026</div>
  <h2>巡演日程</h2>
  <div class="tour">
    <div class="row"><span class="date">09/12</span><span><span class="city">成都</span> · <span class="venue">小酒馆</span></span><span class="tk">购票</span></div>
    <div class="row"><span class="date">09/19</span><span><span class="city">杭州</span> · <span class="venue">MAO Live</span></span><span class="tk">购票</span></div>
    <div class="row"><span class="date">09/26</span><span><span class="city">武汉</span> · <span class="venue">VOX</span></span><span class="tk sold">售罄</span></div>
    <div class="row"><span class="date">10/03</span><span><span class="city">厦门</span> · <span class="venue">坚果</span></span><span class="tk">购票</span></div>
  </div>
</div></section>

<section id="about"><div class="wrap">
  <div class="tag">ABOUT</div>
  <h2>关于山丘</h2>
  <div class="about">
    <div class="ph"></div>
    <div>
      <p>山丘乐队成立于 2021 年的一个夏天，三个人因为同一首歌走到一起。我们写城市里的小人物，写回不去的故乡，也写那些说不清的情绪。</p>
      <p>没有华丽的编曲，只有最诚实的旋律。如果你也曾在某个深夜被一首歌接住，那我们大概是一类人。</p>
    </div>
  </div>
</div></section>

<section class="cta" id="listen"><div class="wrap">
  <div class="tag">STAY CONNECTED</div>
  <h2>别错过下一场</h2>
  <p class="lead" style="margin:0 auto 24px">关注乐队账号，新歌与加场第一时间通知你。</p>
  <a class="btn" href="#">关注 + 收听</a>
</div></section>

<footer>© 2026 山丘乐队 Hill Band · 慢一点，唱久一点</footer>
</body>
</html>

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