联系我们 HTML 单页源码（左信息右表单 + 地图占位）

本源码是一款「联系我们」单页模板，采用深青绿色调，沉稳、专业，适合咨询、设计、服务类机构。页面采用经典的双栏布局：左侧是品牌色的联系方式卡片，集中展示邮箱、电话、工作时间、地址与地图占位；右侧是白底留言表单。

设计上注重信息密度与可读性的平衡：左侧信息卡片用图标 + 标题 + 内容的行式结构，一目了然；右侧表单包含称呼、邮箱、项目类型与留言框，输入框聚焦时边框高亮，提交按钮使用品牌主色。地图占位块预留了接入真实地图 API 的位置，后续可直接替换。

适合需要收集客户线索的企业官网、工作室、线下门店。将联系方式替换为真实信息、为表单接入后端或第三方表单服务后，即可作为联系页长期使用。

使用教程

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>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root { --teal: #0f766e; --teal-d: #115e59; --bg: #f0fdfa; --ink: #14302c; --muted: #5b7a74; }
  body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.7; }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; }
  .logo { font-weight: 800; font-size: 20px; color: var(--teal); }
  .nav a { margin-left: 24px; color: var(--ink); text-decoration: none; font-size: 15px; }
  .hero { text-align: center; padding: 60px 24px 30px; }
  .hero .badge { display:inline-block; padding:5px 14px; border-radius:999px; background:#ccfbf1; color:var(--teal); font-size:13px; font-weight:600; }
  .hero h1 { font-size: 40px; margin: 16px 0 12px; }
  .hero p { color: var(--muted); max-width: 540px; margin: 0 auto; }
  .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; max-width: 1040px; margin: 44px auto; padding: 0 24px; }
  .info { background: linear-gradient(160deg, var(--teal), var(--teal-d)); color: #fff; border-radius: 22px; padding: 38px 32px; }
  .info h3 { font-size: 22px; margin-bottom: 22px; }
  .info .item { display: flex; gap: 14px; margin-bottom: 22px; }
  .info .ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .info .item b { display: block; font-size: 15px; }
  .info .item span { font-size: 14px; opacity: .85; }
  .info .map { height: 130px; border-radius: 14px; margin-top: 14px; background: rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size: 14px; opacity:.8; }
  .form { background: #fff; border-radius: 22px; padding: 34px 30px; box-shadow: 0 16px 40px rgba(15,118,110,.08); }
  .form h3 { font-size: 20px; margin-bottom: 20px; color: var(--teal-d); }
  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
  .field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid #d4ece7; border-radius: 10px; font-size: 15px; font-family: inherit; background: #fafdfc; }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); }
  .form .submit { width: 100%; padding: 14px; border: none; border-radius: 12px; background: var(--teal); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
  .form .submit:hover { background: var(--teal-d); }
  footer { text-align: center; padding: 30px; color: var(--muted); font-size: 14px; }
  @media (max-width: 820px) {
    .wrap { grid-template-columns: 1fr; } .hero h1 { font-size: 30px; } .nav { padding: 16px 20px; }
  }
</style>
</head>
<body>
  <nav class="nav">
    <div class="logo">清泉设计</div>
    <div><a href="#">作品</a><a href="#">服务</a><a href="#">关于</a><a href="#">联系</a></div>
  </nav>

  <header class="hero">
    <span class="badge">CONTACT · 联系我们</span>
    <h1>说声你好，开始合作</h1>
    <p>无论是项目咨询还是单纯交个朋友，我们都很乐意收到你的消息。</p>
  </header>

  <div class="wrap">
    <aside class="info">
      <h3>联系方式</h3>
      <div class="item"><div class="ic">✉</div><div><b>邮箱</b><span>hello@qingquan.design</span></div></div>
      <div class="item"><div class="ic">☎</div><div><b>电话</b><span>400-820-1996</span></div></div>
      <div class="item"><div class="ic">⏰</div><div><b>工作时间</b><span>周一至周五 9:30 - 18:30</span></div></div>
      <div class="item"><div class="ic">⚲</div><div><b>地址</b><span>杭州市西湖区文三路 100 号创意园 B 座 502</span></div></div>
      <div class="map">📍 点击查看地图</div>
    </aside>

    <form class="form" onsubmit="return false;">
      <h3>给我们留言</h3>
      <div class="field"><label>你的称呼</label><input type="text" placeholder="怎么称呼你？"></div>
      <div class="field"><label>邮箱</label><input type="email" placeholder="name@example.com"></div>
      <div class="field"><label>项目类型</label><input type="text" placeholder="品牌设计 / 网站 / 其他"></div>
      <div class="field"><label>想说的话</label><textarea rows="4" placeholder="简单描述一下你的需求～"></textarea></div>
      <button class="submit">发送消息</button>
    </form>
  </div>

  <footer>© 2026 清泉设计 · 专注有温度的数字体验</footer>
</body>
</html>

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