渡舟科技招聘职位列表页 HTML 单页源码

本源码是一款企业招聘 / Careers 页面模板，采用深墨绿到青碧色的渐变主视觉搭配浅色内容区，专业稳重又不失活力。首屏用一句有态度的招聘宣言配四项团队数据（规模/城市/满意度/在招职位数），迅速传递企业气质。

页面结构完整覆盖招聘场景所需：五张福利卡片以负边距上浮压在 Hero 之上形成层次；职位列表按研发、产品设计、市场增长、职能支持四个部门分组，每条职位展示城市、工作性质、经验要求、学历与薪资区间，并支持「急招」「可转正」等标签；顶部提供部门筛选标签；底部还有五步招聘流程图与自荐投递入口。

适合互联网公司、创业团队、设计工作室搭建官网招聘板块；HR 也可将其作为职位内推页单独投放。替换职位数据与邮箱地址即可使用，若职位较多可接入后端接口动态渲染列表。

使用教程

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:#fcfcfd;
  --card:#ffffff;
  --line:#e8eaef;
  --ink:#0f1729;
  --pri:#0d9488;
  --pri-d:#0b7c72;
  --pri-l:#e6f7f5;
  --text:#1a2233;
  --muted:#6b7484;
  --acc:#f97316;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.78;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* 顶栏 */
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px}
.logo i{
  width:31px;height:31px;border-radius:10px;background:var(--pri);color:#fff;font-style:normal;
  display:grid;place-items:center;font-size:14px;
}
.nav ul{display:flex;gap:28px;list-style:none;font-size:14.5px;color:var(--muted)}
.nav ul a:hover{color:var(--pri)}
.nav .cta{padding:9px 20px;border-radius:9px;background:var(--pri);color:#fff;font-size:14px;font-weight:700}

/* Hero */
.hero{background:linear-gradient(160deg,#0f2e2b,#134e4a 60%,#0d9488);color:#fff;padding:66px 0 74px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 68%);
  top:-180px;right:-140px;
}
.hero .in{position:relative;z-index:2;max-width:660px}
.kick{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.22em;opacity:.8;margin-bottom:20px}
.kick::before{content:"";width:26px;height:1px;background:currentColor}
.hero h1{font-size:clamp(31px,5.4vw,52px);line-height:1.16;font-weight:900;letter-spacing:-.025em;margin-bottom:18px}
.hero p{font-size:16.5px;opacity:.85;margin-bottom:30px}
.hstat{display:flex;gap:38px;flex-wrap:wrap}
.hstat div b{display:block;font-size:27px;font-weight:900;letter-spacing:-.02em}
.hstat div span{font-size:13px;opacity:.75}

/* 福利 */
.perks{margin-top:-38px;position:relative;z-index:5}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.p{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:22px 20px;box-shadow:0 10px 28px rgba(15,23,41,.06);transition:.28s}
.p:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,23,41,.1)}
.p .ic{width:38px;height:38px;border-radius:11px;background:var(--pri-l);color:var(--pri-d);display:grid;place-items:center;font-size:18px;margin-bottom:12px}
.p:nth-child(2) .ic{background:#fff1e6;color:var(--acc)}
.p:nth-child(3) .ic{background:#eef2ff;color:#4f46e5}
.p:nth-child(4) .ic{background:#fdf2f8;color:#db2777}
.p:nth-child(5) .ic{background:#f0fdf4;color:#16a34a}
.p h4{font-size:15px;margin-bottom:4px}
.p span{font-size:13px;color:var(--muted)}

/* 职位区 */
section{padding:70px 0}
.sh{margin-bottom:28px}
.sh h2{font-size:clamp(24px,3.8vw,34px);font-weight:900;letter-spacing:-.02em;margin-bottom:8px}
.sh p{color:var(--muted);font-size:14.5px}

.tools{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;align-items:center}
.chip{padding:8px 18px;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:13.5px;cursor:pointer;transition:.22s}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:hover:not(.on){border-color:var(--pri);color:var(--pri)}
.tools .cnt{margin-left:auto;font-size:13.5px;color:var(--muted)}

.jobs{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.j{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:22px 26px;border-bottom:1px solid var(--line);transition:.24s;cursor:pointer;
}
.j:last-child{border-bottom:none}
.j:hover{background:#fafcfc}
.j .tt{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:7px}
.j h4{font-size:17px;font-weight:800}
.j .nw{font-size:11px;padding:2px 9px;border-radius:99px;background:#fee2e2;color:#dc2626;font-weight:700}
.j .ug{font-size:11px;padding:2px 9px;border-radius:99px;background:var(--pri-l);color:var(--pri-d);font-weight:700}
.j .ln{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.j .ln span{display:flex;align-items:center;gap:5px}
.j .rt{text-align:right}
.j .sal{font-size:17px;font-weight:900;color:var(--pri-d);letter-spacing:-.01em;margin-bottom:6px;white-space:nowrap}
.j .go{font-size:13px;color:var(--muted);transition:.22s}
.j:hover .go{color:var(--pri)}

.dept{
  display:flex;align-items:center;gap:11px;padding:16px 26px;background:#f7f9f9;
  border-bottom:1px solid var(--line);font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--muted);
}
.dept b{width:7px;height:7px;border-radius:50%;background:var(--pri)}

/* 流程 */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px;position:relative}
.f{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 22px;text-align:center;position:relative;transition:.3s}
.f:hover{transform:translateY(-5px);border-color:var(--pri);box-shadow:0 16px 34px rgba(13,148,136,.12)}
.f .n{
  width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;margin:0 auto 14px;
  display:grid;place-items:center;font-weight:900;font-size:15px;
}
.f h4{font-size:16px;margin-bottom:6px}
.f p{font-size:13.5px;color:var(--muted)}

/* CTA */
.mail{
  background:var(--ink);color:#fff;border-radius:22px;padding:50px 40px;text-align:center;margin-top:26px;
}
.mail h3{font-size:clamp(22px,3.4vw,31px);font-weight:900;margin-bottom:12px;letter-spacing:-.02em}
.mail p{opacity:.72;margin-bottom:26px;max-width:480px;margin-left:auto;margin-right:auto;font-size:14.5px}
.mail .mb{display:inline-block;padding:14px 34px;border-radius:12px;background:var(--pri);color:#fff;font-weight:800;font-size:15px;transition:.25s}
.mail .mb:hover{background:#14b8a6;transform:translateY(-2px)}
.mail small{display:block;margin-top:16px;opacity:.5;font-size:12.5px}

footer{border-top:1px solid var(--line);padding:30px 0;text-align:center;color:var(--muted);font-size:13.5px;background:var(--card)}

@media(max-width:720px){
  .nav ul{display:none}
  .j{grid-template-columns:1fr;gap:12px}
  .j .rt{text-align:left;display:flex;align-items:center;gap:14px}
  .j .sal{margin-bottom:0}
  section{padding:48px 0}
  .mail{padding:34px 22px}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo"><i>渡</i>渡舟科技</div>
    <ul><li><a href="#">产品</a></li><li><a href="#">关于我们</a></li><li><a href="#jobs">加入我们</a></li><li><a href="#">博客</a></li></ul>
    <a href="#jobs" class="cta">查看职位</a>
  </div>
</header>

<div class="hero">
  <div class="wrap in">
    <div class="kick">W E &nbsp; A R E &nbsp; H I R I N G</div>
    <h1>和一群靠谱的人<br>做一件长期的事</h1>
    <p>渡舟成立于 2019 年，做面向中小企业的协作工具。我们不迷信 996，也不喜欢空转的会议——把事做成，然后按时下班。</p>
    <div class="hstat">
      <div><b>86</b><span>团队规模</span></div>
      <div><b>3</b><span>办公城市</span></div>
      <div><b>4.7</b><span>员工满意度</span></div>
      <div><b>12</b><span>在招职位</span></div>
    </div>
  </div>
</div>

<div class="wrap perks">
  <div class="pgrid">
    <div class="p"><div class="ic">☰</div><h4>弹性工作制</h4><span>10 点后到岗，做完即走</span></div>
    <div class="p"><div class="ic">✈</div><h4>15 天带薪年假</h4><span>入职即有，不看司龄</span></div>
    <div class="p"><div class="ic">◈</div><h4>顶格六险一金</h4><span>补充商保覆盖家属</span></div>
    <div class="p"><div class="ic">☕</div><h4>学习基金</h4><span>每年 6000 元报销额度</span></div>
    <div class="p"><div class="ic">⌂</div><h4>混合办公</h4><span>每周可远程 2 天</span></div>
  </div>
</div>

<section id="jobs">
  <div class="wrap">
    <div class="sh"><h2>开放职位</h2><p>找不到合适的？也欢迎投递「自荐岗位」，我们会为对的人创造位置。</p></div>

    <div class="tools">
      <div class="chip on">全部</div>
      <div class="chip">研发</div>
      <div class="chip">设计</div>
      <div class="chip">产品</div>
      <div class="chip">市场</div>
      <div class="chip">职能</div>
      <div class="cnt">共 12 个职位在招</div>
    </div>

    <div class="jobs">
      <div class="dept"><b></b>研 发 工 程</div>

      <div class="j">
        <div>
          <div class="tt"><h4>高级前端工程师</h4><span class="nw">急招</span></div>
          <div class="ln"><span>📍 杭州 · 滨江</span><span>💼 全职</span><span>⏳ 5 年以上</span><span>🎓 本科及以上</span></div>
        </div>
        <div class="rt"><div class="sal">30–50K · 15薪</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="j">
        <div>
          <div class="tt"><h4>后端工程师（Go）</h4></div>
          <div class="ln"><span>📍 杭州 / 成都</span><span>💼 全职</span><span>⏳ 3 年以上</span><span>🎓 本科及以上</span></div>
        </div>
        <div class="rt"><div class="sal">25–45K · 15薪</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="j">
        <div>
          <div class="tt"><h4>测试开发工程师</h4></div>
          <div class="ln"><span>📍 成都</span><span>💼 全职</span><span>⏳ 2 年以上</span><span>🎓 本科及以上</span></div>
        </div>
        <div class="rt"><div class="sal">18–30K · 14薪</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="j">
        <div>
          <div class="tt"><h4>前端开发实习生</h4><span class="ug">可转正</span></div>
          <div class="ln"><span>📍 杭州</span><span>💼 实习</span><span>⏳ 每周 4 天</span><span>🎓 在校生</span></div>
        </div>
        <div class="rt"><div class="sal">300 元/天</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="dept"><b></b>产 品 与 设 计</div>

      <div class="j">
        <div>
          <div class="tt"><h4>资深产品经理（B 端）</h4><span class="nw">急招</span></div>
          <div class="ln"><span>📍 杭州 · 滨江</span><span>💼 全职</span><span>⏳ 5 年以上</span><span>🎓 本科及以上</span></div>
        </div>
        <div class="rt"><div class="sal">28–45K · 15薪</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="j">
        <div>
          <div class="tt"><h4>UI / 交互设计师</h4></div>
          <div class="ln"><span>📍 杭州</span><span>💼 全职</span><span>⏳ 3 年以上</span><span>🎓 大专及以上</span></div>
        </div>
        <div class="rt"><div class="sal">20–35K · 14薪</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="j">
        <div>
          <div class="tt"><h4>品牌视觉设计师</h4></div>
          <div class="ln"><span>📍 杭州</span><span>💼 全职</span><span>⏳ 2 年以上</span><span>🎓 不限</span></div>
        </div>
        <div class="rt"><div class="sal">15–25K · 14薪</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="dept"><b></b>市 场 与 增 长</div>

      <div class="j">
        <div>
          <div class="tt"><h4>内容运营（技术方向）</h4></div>
          <div class="ln"><span>📍 杭州 / 远程</span><span>💼 全职</span><span>⏳ 2 年以上</span><span>🎓 本科及以上</span></div>
        </div>
        <div class="rt"><div class="sal">14–24K · 14薪</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="j">
        <div>
          <div class="tt"><h4>企业客户成功经理</h4></div>
          <div class="ln"><span>📍 上海</span><span>💼 全职</span><span>⏳ 3 年以上</span><span>🎓 本科及以上</span></div>
        </div>
        <div class="rt"><div class="sal">16–28K + 提成</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="dept"><b></b>职 能 支 持</div>

      <div class="j">
        <div>
          <div class="tt"><h4>HRBP（技术线）</h4></div>
          <div class="ln"><span>📍 杭州</span><span>💼 全职</span><span>⏳ 4 年以上</span><span>🎓 本科及以上</span></div>
        </div>
        <div class="rt"><div class="sal">18–28K · 14薪</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="j">
        <div>
          <div class="tt"><h4>财务分析专员</h4></div>
          <div class="ln"><span>📍 杭州</span><span>💼 全职</span><span>⏳ 3 年以上</span><span>🎓 本科及以上</span></div>
        </div>
        <div class="rt"><div class="sal">13–20K · 14薪</div><div class="go">查看详情 →</div></div>
      </div>

      <div class="j">
        <div>
          <div class="tt"><h4>自荐岗位（开放投递）</h4><span class="ug">长期有效</span></div>
          <div class="ln"><span>📍 不限</span><span>💼 全职 / 兼职</span><span>⏳ 不限</span><span>🎓 不限</span></div>
        </div>
        <div class="rt"><div class="sal">面议</div><div class="go">查看详情 →</div></div>
      </div>
    </div>
  </div>
</section>

<section style="padding-top:0">
  <div class="wrap">
    <div class="sh"><h2>招聘流程</h2><p>我们承诺每一份简历都会被认真读完，全流程通常在 2 周内完成。</p></div>
    <div class="flow">
      <div class="f"><div class="n">1</div><h4>简历投递</h4><p>邮箱或在线表单，3 个工作日内给出初筛结果。</p></div>
      <div class="f"><div class="n">2</div><h4>电话初聊</h4><p>20 分钟，双向了解，聊清楚岗位和期待。</p></div>
      <div class="f"><div class="n">3</div><h4>专业面试</h4><p>1–2 轮，以真实业务场景为主，不出脑筋急转弯。</p></div>
      <div class="f"><div class="n">4</div><h4>负责人面</h4><p>与部门负责人聊价值观与长期发展方向。</p></div>
      <div class="f"><div class="n">5</div><h4>发放 Offer</h4><p>薪资透明可谈，入职时间灵活协商。</p></div>
    </div>

    <div class="mail">
      <h3>没有找到心仪的岗位？</h3>
      <p>把你的简历和一段自我介绍发给我们。哪怕现在没有开放的坑，我们也会记住有意思的人。</p>
      <a href="#" class="mb">投递简历 → jobs@duzhou.tech</a>
      <small>请在邮件标题注明「岗位名称 + 姓名」，附件建议使用 PDF 格式</small>
    </div>
  </div>
</section>

<footer>© 2026 渡舟科技 · 杭州 · 成都 · 上海 · 本页面为演示模板，职位信息均为虚构</footer>

<script>
document.querySelectorAll('.chip').forEach(function(c){
  c.addEventListener('click',function(){
    document.querySelectorAll('.chip').forEach(function(x){x.classList.remove('on')});
    c.classList.add('on');
  });
});
</script>
</body>
</html>

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