1. 小蓝资源网首页
  2. 网站源码

律师事务所 HTML 单页源码（深蓝 + 金色，6 大业务领域 + 律师团队 + 案件展示）

小蓝IT • • 网站源码 • 阅读 12

深蓝与金色衬线字体律所模板，含业务领域、律师团队、服务流程与代表案例。

本源码是一款为律师事务所、商务合规顾问机构打造的「品牌官网」单页模板，采用深海军蓝 + 香槟金配色，搭配宋体衬线字与宽留白，视觉风格克制、专业、值得托付。首屏用一段克制品牌口号建立信任感，并搭配侧边案情评估卡，让访客进入即能完成初步留资。

页面结构覆盖一家成熟律所需要呈现的核心信息：数据条展示执业年限、案件数量与顾问单位；六大业务领域按编号排列，hover 反白以金色突出；三位合伙人卡片用渐变色头像块与执业领域标签呈现；服务流程以 01–04 大字号编号排列；深色背景下的代表案例与结果数据条清晰列出胜诉与重组的关键成果。

适合律师事务所、合规咨询公司、知识产权代理机构作为官网或落地页使用。替换律所名称、律师介绍、案例数据与联系方式后即可上线，也可作为高端专业服务机构的展示模板。

律师事务所 HTML 单页源码（深蓝 + 金色，6 大业务领域 + 律师团队 + 案件展示）

使用教程

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{
    --navy:#0e2038;
    --navy-2:#16304f;
    --gold:#c8a45c;
    --gold-soft:#e6d3a8;
    --paper:#f7f5f0;
    --line:#e3ddd0;
    --text:#243449;
    --muted:#6b7688;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Songti SC","Source Han Serif SC",Georgia,"Microsoft YaHei",serif;background:var(--paper);color:var(--text);line-height:1.85}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}

  /* 顶栏 */
  header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
  .nav{display:flex;align-items:center;justify-content:space-between;height:76px}
  .logo{display:flex;align-items:center;gap:12px;font-size:20px;letter-spacing:3px}
  .logo i{width:34px;height:34px;border:1.5px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-style:normal;font-size:16px}
  .nav ul{display:flex;gap:30px;list-style:none;font-size:14.5px;letter-spacing:1px}
  .nav a{color:#cfd8e4;text-decoration:none;transition:.25s}
  .nav a:hover{color:var(--gold)}
  .tel{border:1px solid var(--gold);color:var(--gold);padding:8px 18px;font-size:14px;letter-spacing:1px}

  /* 首屏 */
  .hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:88px 0 96px;position:relative;overflow:hidden}
  .hero::after{content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border:1px solid rgba(200,164,92,.25);transform:rotate(18deg)}
  .hero-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:56px;align-items:center;position:relative;z-index:2}
  .tagline{color:var(--gold);letter-spacing:6px;font-size:13px;margin-bottom:20px}
  .hero h1{font-size:46px;line-height:1.4;font-weight:600;margin-bottom:22px}
  .hero h1 em{font-style:normal;color:var(--gold-soft);border-bottom:2px solid var(--gold);padding-bottom:2px}
  .hero p{color:#b9c5d6;font-size:16px;max-width:520px;margin-bottom:34px}
  .btns{display:flex;gap:14px;flex-wrap:wrap}
  .btn{padding:14px 30px;font-size:15px;letter-spacing:2px;text-decoration:none;display:inline-block;transition:.25s}
  .btn-gold{background:var(--gold);color:var(--navy);font-weight:600}
  .btn-gold:hover{background:var(--gold-soft)}
  .btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

  .card-consult{background:rgba(255,255,255,.06);border:1px solid rgba(200,164,92,.35);padding:30px 28px;backdrop-filter:blur(4px)}
  .card-consult h4{color:var(--gold);letter-spacing:2px;font-size:16px;margin-bottom:6px}
  .card-consult small{color:#98a6ba;display:block;margin-bottom:20px;font-size:13px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12.5px;color:#9fb0c6;letter-spacing:1px;margin-bottom:6px}
  .field input,.field select,.field textarea{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.16);color:#fff;padding:10px 12px;font-size:14px;font-family:inherit;outline:none}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
  .field textarea{resize:vertical;min-height:64px}
  .card-consult button{width:100%;background:var(--gold);color:var(--navy);border:0;padding:13px;font-size:15px;letter-spacing:3px;font-weight:600;cursor:pointer;font-family:inherit}

  /* 数据条 */
  .stats{background:#fff;border-bottom:1px solid var(--line)}
  .stats-in{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:38px 0}
  .stats-in div+div{border-left:1px solid var(--line)}
  .stats b{display:block;font-size:34px;color:var(--navy);font-weight:600}
  .stats span{font-size:13.5px;color:var(--muted);letter-spacing:1px}

  section{padding:78px 0}
  .sec-head{text-align:center;margin-bottom:48px}
  .sec-head .en{color:var(--gold);letter-spacing:5px;font-size:12.5px;margin-bottom:10px}
  .sec-head h2{font-size:31px;font-weight:600;color:var(--navy);letter-spacing:2px}
  .sec-head i{display:block;width:44px;height:2px;background:var(--gold);margin:16px auto 0}

  /* 业务领域 */
  .fields{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .fitem{background:#fff;padding:36px 30px;transition:.3s}
  .fitem:hover{background:var(--navy);color:#fff}
  .fitem:hover h3,.fitem:hover .no{color:var(--gold)}
  .fitem:hover p{color:#b9c5d6}
  .no{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:12px}
  .fitem h3{font-size:19px;color:var(--navy);margin-bottom:12px;font-weight:600}
  .fitem p{font-size:14.5px;color:var(--muted);line-height:1.9}

  /* 律师团队 */
  .team{background:#fff}
  .lawyers{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .lw{border:1px solid var(--line);background:var(--paper)}
  .lw-photo{height:210px;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 100%);display:grid;place-items:center;color:var(--gold);font-size:52px;letter-spacing:4px}
  .lw-body{padding:24px 24px 28px}
  .lw-body h3{font-size:20px;color:var(--navy);margin-bottom:4px}
  .lw-body .role{color:var(--gold);font-size:13px;letter-spacing:2px;margin-bottom:14px}
  .lw-body p{font-size:14px;color:var(--muted);line-height:1.9}
  .tags{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
  .tags span{font-size:12px;border:1px solid var(--line);padding:4px 10px;color:var(--muted);background:#fff}

  /* 服务流程 */
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
  .step{background:#fff;border-top:3px solid var(--gold);padding:30px 24px;position:relative}
  .step::before{counter-increment:s;content:"0" counter(s);position:absolute;right:20px;top:16px;font-size:40px;color:var(--line);font-weight:700}
  .step h4{font-size:17px;color:var(--navy);margin-bottom:10px}
  .step p{font-size:13.8px;color:var(--muted)}

  /* 案例 */
  .cases{background:var(--navy);color:#fff}
  .cases .sec-head h2{color:#fff}
  .case-list{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
  .case{border:1px solid rgba(200,164,92,.3);padding:28px 30px;background:rgba(255,255,255,.04)}
  .case .cat{color:var(--gold);font-size:12.5px;letter-spacing:2px;margin-bottom:10px}
  .case h3{font-size:19px;margin-bottom:12px;font-weight:600}
  .case p{color:#b3c0d1;font-size:14.5px}
  .case .res{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.16);color:var(--gold-soft);font-size:14px}

  footer{background:#08172a;color:#8b9ab0;padding:56px 0 30px;font-size:14px}
  .f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;margin-bottom:36px}
  footer h5{color:#fff;font-size:16px;letter-spacing:2px;margin-bottom:16px}
  footer ul{list-style:none;line-height:2.2}
  .copy{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;text-align:center;font-size:13px;color:#63728a}

  @media(max-width:900px){
    .nav ul,.tel{display:none}
    .hero-grid,.fields,.lawyers,.flow,.case-list,.f-grid{grid-template-columns:1fr}
    .stats-in{grid-template-columns:repeat(2,1fr);gap:26px 0}
    .stats-in div:nth-child(3){border-left:0}
    .hero h1{font-size:32px}
    section{padding:56px 0}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo"><i>正</i>正衡律师事务所</div>
    <ul>
      <li><a href="#fields">业务领域</a></li>
      <li><a href="#team">律师团队</a></li>
      <li><a href="#flow">服务流程</a></li>
      <li><a href="#cases">代表案例</a></li>
    </ul>
    <a class="tel" href="#consult">咨询专线 400-800-1668</a>
  </div>
</header>

<div class="hero">
  <div class="wrap hero-grid">
    <div>
      <div class="tagline">ZHENGHENG LAW FIRM · EST. 2009</div>
      <h1>以专业与克制，<br>为企业守住<em>每一次关键决策</em></h1>
      <p>专注商事争议解决、公司合规与股权设计十七年。我们不承诺结果，只承诺把每一份证据、每一条法条、每一次谈判都做到位。</p>
      <div class="btns">
        <a class="btn btn-gold" href="#consult">免费案情评估</a>
        <a class="btn btn-ghost" href="#cases">查看代表案例</a>
      </div>
    </div>
    <div class="card-consult" id="consult">
      <h4>案情初步评估</h4>
      <small>提交后 2 小时内由承办律师回电，信息严格保密</small>
      <div class="field"><label>您的称呼</label><input type="text" placeholder="请输入姓名"></div>
      <div class="field"><label>联系电话</label><input type="tel" placeholder="请输入手机号"></div>
      <div class="field"><label>咨询类型</label>
        <select>
          <option>合同纠纷</option><option>股权与投融资</option><option>劳动争议</option>
          <option>知识产权</option><option>公司合规</option><option>其他</option>
        </select>
      </div>
      <div class="field"><label>简要描述</label><textarea placeholder="请简述争议背景与诉求"></textarea></div>
      <button>提交评估申请</button>
    </div>
  </div>
</div>

<div class="stats">
  <div class="wrap stats-in">
    <div><b>17</b><span>年执业积淀</span></div>
    <div><b>2600+</b><span>累计承办案件</span></div>
    <div><b>93%</b><span>争议解决满意度</span></div>
    <div><b>48</b><span>常年法律顾问单位</span></div>
  </div>
</div>

<section id="fields">
  <div class="wrap">
    <div class="sec-head">
      <div class="en">PRACTICE AREAS</div>
      <h2>业务领域</h2><i></i>
    </div>
    <div class="fields">
      <div class="fitem"><div class="no">— 01</div><h3>商事争议解决</h3><p>买卖、承揽、建设工程、金融借款等各类合同纠纷的诉讼与仲裁代理，擅长复杂证据梳理与执行阶段财产线索挖掘。</p></div>
      <div class="fitem"><div class="no">— 02</div><h3>公司股权设计</h3><p>创始团队股权架构、员工持股平台、对赌与回购条款审查，帮助企业在融资前把治理结构理顺。</p></div>
      <div class="fitem"><div class="no">— 03</div><h3>劳动人事合规</h3><p>规章制度审查、竞业限制与保密协议设计、裁员方案合规论证及群体性劳动争议应对。</p></div>
      <div class="fitem"><div class="no">— 04</div><h3>知识产权保护</h3><p>商标布局与异议、著作权登记、商业秘密维权及侵权诉讼，覆盖取证、维权到赔偿主张全流程。</p></div>
      <div class="fitem"><div class="no">— 05</div><h3>投融资与并购</h3><p>尽职调查、交易文件起草与谈判、交割条件设计，为买卖双方控制交易风险与后续整合成本。</p></div>
      <div class="fitem"><div class="no">— 06</div><h3>常年法律顾问</h3><p>合同模板体系搭建、日常法律咨询、内部培训与风险巡检，把纠纷解决在发生之前。</p></div>
    </div>
  </div>
</section>

<section class="team" id="team">
  <div class="wrap">
    <div class="sec-head">
      <div class="en">OUR LAWYERS</div>
      <h2>律师团队</h2><i></i>
    </div>
    <div class="lawyers">
      <div class="lw">
        <div class="lw-photo">陈</div>
        <div class="lw-body">
          <h3>陈立文</h3><div class="role">主任 · 高级合伙人</div>
          <p>华东政法大学法学硕士，执业十七年。长期为制造业与供应链企业提供争议解决服务，主办案件标的累计逾 12 亿元。</p>
          <div class="tags"><span>商事诉讼</span><span>执行异议</span><span>企业合规</span></div>
        </div>
      </div>
      <div class="lw">
        <div class="lw-photo">苏</div>
        <div class="lw-body">
          <h3>苏亦然</h3><div class="role">合伙人 · 公司部负责人</div>
          <p>曾任某上市公司法务总监，熟悉境内融资全流程。主导完成 30 余起股权架构重组与员工持股平台搭建项目。</p>
          <div class="tags"><span>股权设计</span><span>投融资</span><span>并购交易</span></div>
        </div>
      </div>
      <div class="lw">
        <div class="lw-photo">周</div>
        <div class="lw-body">
          <h3>周砚清</h3><div class="role">合伙人 · 争议解决部</div>
          <p>专注劳动人事与知识产权领域，擅长群体性劳动争议应对与商业秘密刑民交叉案件，年均出庭 90 余次。</p>
          <div class="tags"><span>劳动争议</span><span>商业秘密</span><span>商标维权</span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="flow">
  <div class="wrap">
    <div class="sec-head">
      <div class="en">HOW WE WORK</div>
      <h2>服务流程</h2><i></i>
    </div>
    <div class="flow">
      <div class="step"><h4>案情沟通</h4><p>了解事实背景、既有证据与核心诉求，判断是否存在利益冲突。</p></div>
      <div class="step"><h4>方案论证</h4><p>出具书面法律意见，列明可行路径、时间成本与风险点，供您决策。</p></div>
      <div class="step"><h4>签约承办</h4><p>明确收费方式与服务边界，组建承办团队并制定阶段性推进计划。</p></div>
      <div class="step"><h4>执行反馈</h4><p>每一节点主动同步进展，重大程序变化 24 小时内书面告知。</p></div>
    </div>
  </div>
</section>

<section class="cases" id="cases">
  <div class="wrap">
    <div class="sec-head">
      <div class="en">SELECTED CASES</div>
      <h2>代表案例</h2><i></i>
    </div>
    <div class="case-list">
      <div class="case">
        <div class="cat">商事诉讼</div>
        <h3>某精密制造企业买卖合同纠纷</h3>
        <p>对方以质量异议为由拒付货款 3200 万元。团队通过还原验收记录与往来函件时间线，证明异议已超合理期限。</p>
        <div class="res">结果：一审全额支持货款及逾期利息主张</div>
      </div>
      <div class="case">
        <div class="cat">股权设计</div>
        <h3>某消费品牌 Pre-A 轮股权重组</h3>
        <p>创始团队五人平均持股导致决策僵局。设计有限合伙持股平台与一致行动安排，在保留激励空间的同时集中表决权。</p>
        <div class="res">结果：三周内完成重组，融资顺利交割</div>
      </div>
      <div class="case">
        <div class="cat">劳动争议</div>
        <h3>某科技公司集体裁员合规方案</h3>
        <p>涉及 140 余名员工的架构调整。协助完成方案论证、协商沟通话术与补偿测算，全程留痕。</p>
        <div class="res">结果：协商解除率 96%，无群体性事件</div>
      </div>
      <div class="case">
        <div class="cat">知识产权</div>
        <h3>某设计品牌商标恶意抢注异议</h3>
        <p>他人在关联类别抢注核心商标。收集在先使用证据与市场知名度材料，提起异议并同步布局防御类别。</p>
        <div class="res">结果：异议成立，抢注商标不予注册</div>
      </div>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f-grid">
      <div>
        <h5>正衡律师事务所</h5>
        <p>地址：城市中心区金融街 88 号国贸中心 A 座 26 层<br>邮箱：contact@zhengheng-law.example<br>咨询专线：400-800-1668（工作日 9:00–18:00）</p>
      </div>
      <div>
        <h5>业务领域</h5>
        <ul><li>商事争议解决</li><li>公司股权设计</li><li>劳动人事合规</li><li>知识产权保护</li></ul>
      </div>
      <div>
        <h5>关于我们</h5>
        <ul><li>律所简介</li><li>律师团队</li><li>加入我们</li><li>法律声明</li></ul>
      </div>
    </div>
    <div class="copy">© 2026 正衡律师事务所　本页内容仅为模板演示，不构成任何法律意见</div>
  </div>
</footer>

</body>
</html>

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

430 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
微信提现免手续费全攻略：3个方法实测有效，每天都可以免费提！
上一篇 1天前
牙科诊所预约 HTML 单页源码（薄荷绿 + 天蓝，含时段选择 + 价目表 + 医生团队）
下一篇 8小时前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服