本源码是一款适合企业官网「关于我们」板块的单页模板，整体采用暖橙色与米白底色，气质温暖、亲和，能快速拉近品牌与访客之间的心理距离。首屏以品牌名、一句价值主张与四项核心数据（成立年份、服务客户、团队伙伴、行业奖项）建立第一眼信任感。
设计亮点丰富且实用：品牌故事采用图文左右分栏，右侧渐变视觉块营造记忆点；三条核心价值观卡片用图标 + 标题 + 描述的结构清晰呈现；发展历程时间轴带圆点节点与年份标签，叙事节奏自然；底部深色 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>星野工作室 · 关于我们</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--primary: #ff7a45;
--primary-dark: #e8590c;
--cream: #fff8f0;
--ink: #2b2118;
--muted: #7a6f63;
--card: #ffffff;
}
body {
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
color: var(--ink);
background: var(--cream);
line-height: 1.75;
}
.nav {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 48px; position: sticky; top: 0; z-index: 10;
background: rgba(255,248,240,.9); backdrop-filter: blur(8px);
border-bottom: 1px solid #f0e3d4;
}
.logo { font-size: 22px; font-weight: 800; color: var(--primary-dark); letter-spacing: 1px; }
.nav a { margin-left: 28px; color: var(--ink); text-decoration: none; font-size: 15px; }
.nav a:hover { color: var(--primary); }
.hero {
text-align: center; padding: 90px 24px 70px;
background: radial-gradient(1200px 400px at 50% -10%, #ffe6d2, transparent);
}
.hero .badge {
display: inline-block; padding: 6px 16px; border-radius: 999px;
background: #ffe2cf; color: var(--primary-dark); font-size: 13px; font-weight: 600; margin-bottom: 18px;
}
.hero h1 { font-size: 46px; line-height: 1.25; margin-bottom: 20px; }
.hero h1 span { color: var(--primary); }
.hero p { max-width: 640px; margin: 0 auto; color: var(--muted); font-size: 17px; }
.stats { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; margin: 54px auto 0; }
.stat { text-align: center; }
.stat b { display: block; font-size: 38px; color: var(--primary-dark); }
.stat span { color: var(--muted); font-size: 14px; }
section { max-width: 1080px; margin: 0 auto; padding: 70px 24px; }
.sec-head { text-align: center; margin-bottom: 44px; }
.sec-head h2 { font-size: 32px; margin-bottom: 12px; }
.sec-head p { color: var(--muted); }
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.story .text h3 { font-size: 22px; margin-bottom: 14px; color: var(--primary-dark); }
.story .text p { color: #5b5147; margin-bottom: 14px; }
.story .visual { height: 320px; border-radius: 20px; background: linear-gradient(135deg, #ffb088, #ff7a45); position: relative; overflow: hidden; }
.story .visual::after { content: "✦"; position: absolute; right: -10px; bottom: -20px; font-size: 180px; color: rgba(255,255,255,.18); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value { background: var(--card); border-radius: 18px; padding: 30px 26px; box-shadow: 0 10px 30px rgba(232,89,12,.08); border: 1px solid #fbe9d8; }
.value .ic { width: 48px; height: 48px; border-radius: 14px; background: #ffe2cf; color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.value h4 { font-size: 19px; margin-bottom: 10px; }
.value p { color: var(--muted); font-size: 15px; }
.timeline { border-left: 3px solid #ffd2b3; padding-left: 28px; max-width: 720px; margin: 0 auto; }
.tl-item { position: relative; margin-bottom: 30px; }
.tl-item::before { content: ""; position: absolute; left: -38px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; }
.tl-item b { color: var(--primary-dark); }
.tl-item p { color: var(--muted); }
.cta { text-align: center; background: linear-gradient(135deg, #ff7a45, #e8590c); color: #fff; border-radius: 24px; padding: 56px 24px; max-width: 1080px; margin: 30px auto 80px; }
.cta h2 { font-size: 30px; margin-bottom: 14px; }
.cta p { opacity: .9; margin-bottom: 26px; }
.cta a { display: inline-block; background: #fff; color: var(--primary-dark); padding: 14px 34px; border-radius: 999px; text-decoration: none; font-weight: 700; }
footer { text-align: center; padding: 30px; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
.nav { padding: 16px 20px; } .nav a { margin-left: 16px; font-size: 14px; }
.hero h1 { font-size: 32px; } .stats { gap: 32px; }
.story { grid-template-columns: 1fr; } .values { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<nav class="nav">
<div class="logo">星野工作室</div>
<div>
<a href="#story">我们的故事</a>
<a href="#values">价值观</a>
<a href="#journey">历程</a>
<a href="#contact">联系</a>
</div>
</nav>
<header class="hero">
<span class="badge">ABOUT US · 关于我们</span>
<h1>用设计让<span>每一个想法</span><br>都有温度地落地</h1>
<p>星野工作室是一支专注于品牌视觉与前端体验的小团队。我们相信，好的产品不只是功能堆叠，而是让人愿意停留的瞬间。</p>
<div class="stats">
<div class="stat"><b>2016</b><span>成立年份</span></div>
<div class="stat"><b>320+</b><span>服务客户</span></div>
<div class="stat"><b>48</b><span>团队伙伴</span></div>
<div class="stat"><b>12</b><span>行业奖项</span></div>
</div>
</header>
<section id="story">
<div class="sec-head"><h2>我们的故事</h2><p>从一间小出租屋，到一群人的热爱</p></div>
<div class="story">
<div class="text">
<h3>始于热爱，成于坚持</h3>
<p>2016 年，三个厌倦了流水线式交付的设计师，在一间不到二十平米的工作室里写下了第一行代码。他们想证明：用心打磨的细节，用户一定感受得到。</p>
<p>九年过去，我们依然保持小而美的状态——不盲目扩张，只接真正认同的项目。每个作品背后，都是反复推敲的配色、间距与文案。</p>
<p>今天，星野服务过餐饮、教育、科技等领域的 320 多位客户，但初心从未改变：让设计回归「人」。</p>
</div>
<div class="visual"></div>
</div>
</section>
<section id="values">
<div class="sec-head"><h2>我们坚持的价值观</h2><p>三条原则，贯穿每一个项目</p></div>
<div class="values">
<div class="value"><div class="ic">♥</div><h4>真诚优先</h4><p>不夸大效果，不隐瞒风险。我们能做什么、做不到什么，都摊在桌面上谈。</p></div>
<div class="value"><div class="ic">✦</div><h4>细节偏执</h4><p>1 像素的错位、0.2 秒的卡顿，我们都当成必须解决的问题。</p></div>
<div class="value"><div class="ic">◎</div><h4>长期陪伴</h4><p>交付不是结束。我们提供持续迭代与陪跑，陪你一起把产品养大。</p></div>
</div>
</section>
<section id="journey">
<div class="sec-head"><h2>成长历程</h2><p>一些值得记住的节点</p></div>
<div class="timeline">
<div class="tl-item"><b>2016 · 起点</b><p>三人工作室成立，接下第一个餐饮品牌全案。</p></div>
<div class="tl-item"><b>2019 · 转折</b><p>组建前端团队，开始提供从设计到上线的完整服务。</p></div>
<div class="tl-item"><b>2022 · 突破</b><p>作品斩获两项行业设计奖，团队扩展到 30 人。</p></div>
<div class="tl-item"><b>2025 · 现在</b><p>服务客户突破 320 家，开启远程协作与出海业务。</p></div>
</div>
</section>
<div class="cta" id="contact">
<h2>想和我们聊聊你的项目？</h2>
<p>无论是品牌升级还是从零搭建，都欢迎来撩。</p>
<a href="mailto:hello@xingye.studio">联系我们</a>
</div>
<footer>© 2026 星野工作室 · 用心做有温度的设计</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1853.html
微信扫一扫 
支付宝扫一扫 
