公司网站的个人主页怎么做，实战案例告诉你怎么避开域名服务器搞不懂的坑

你是不是也遇到过这种情况？公司要做官网，领导说“主页得有个人介绍”，结果你一头雾水，不知道从哪儿下手，还听说什么“域名服务器搞不懂”？别急，今天就用一个实战案例，给你讲清楚“公司网站的个人主页怎么做”，从设计到代码，一步到位，省心省力。

设计原则：别被“个人主页”四个字骗了，这是个品牌展示页

很多人以为个人主页就是放一张照片、写几段经历就完事了，这在企业官网里可是大忌。个人主页其实是公司品牌形象的一部分，要像主页面一样，有逻辑、有层次、有视觉统一性。

1. 信息层级清晰

主页信息必须优先展示核心内容。比如，你是个产品经理，主页上就要突出“经验年限”、“主导项目”、“成就荣誉”等，而不是堆砌一堆工作经历，让读者看不清楚重点。

设计规范建议：

标题层级：主标题字号≥24px，副标题≥18px，字体加粗。
段落间距：正文段落之间保持1.5倍行高，避免拥挤。
信息分块：每个模块控制在3行以内，用卡片式设计分隔开。

2. 视觉统一性原则

个人主页的视觉风格必须与企业官网统一。比如公司主色调是蓝色，那么个人主页也不能乱用红色。统一的字体、配色、按钮样式，才能让整个网站看起来专业。

对比示例：

不统一风格	统一风格
用多种字体，颜色杂乱	采用公司标准字体与配色
按钮样式混乱	所有按钮采用统一样式

3. 响应式设计不可少

现在的用户浏览网站，移动设备占比超过60%，如果你的主页只适合电脑看，那就白做了。响应式设计要确保：

移动端页面加载速度更快（优化图片大小）；
内容布局自动适配屏幕；
交互元素（如按钮、链接）在手机上能正常点击。

布局与间距规范：让内容“呼吸感”更强

好的个人主页，不是塞满信息，而是让内容有“呼吸感”。这需要在布局与间距上下功夫。

1. 页面结构建议

建议采用三段式布局：

顶部区：个人姓名 + 头像 + 简短介绍（如“10年产品经理，擅长互联网产品设计”）。
中间区：分模块展示经历、技能、荣誉、项目案例等。
底部区：联系信息 + 社交链接（如LinkedIn、GitHub）。

2. 间距规范

页面的“呼吸感”来源于合理的间距。推荐间距规范如下：

元素	间距
主标题与正文	24px
正文段落之间	16px
卡片组件之间	32px
按钮与文字之间	12px
图片与文字之间	20px

设计工具推荐：使用Figma、Sketch进行布局与间距调整，导出后直接对接前端开发。

色彩与字体：别用“好看”来忽悠人，要让品牌“立得住”

很多人做主页的时候，喜欢用“高级感”、“时尚”等形容词，结果选的颜色和字体与公司整体风格格格不入。

1. 配色方案建议

建议使用公司官网的主色+辅色的组合，避免过多颜色混淆。比如：

主色：#007BFF（蓝色）
辅色：#28A745（绿色）
文字色：#2C3E50
背景色：#F8F9FA

字体建议：

标题字体：思源黑体 / Roboto（中英结合）
正文字体：阿里巴巴普惠体 / Open Sans
按钮字体：与标题保持一致

权威来源：腾讯云开发者社区推荐，企业官网字体统一使用系统级字体，确保不同设备下显示一致。

组件设计：按钮、卡片、图标怎么设计更专业

主页上常见的组件包括按钮、卡片、图标等，这些小细节决定整个页面的质感。

1. 按钮设计规范

类型	颜色	阴影	状态
主按钮	主色（如蓝色）	2px inset	hover时加深颜色
次按钮	辅色（如绿色）	无	hover时加阴影
灰色按钮	#888	无	无状态变化

2. 卡片设计

卡片是展示信息的最佳方式，建议设计如下：

边框圆角：8px
内边距：16px
阴影：0 2px 8px rgba(0,0,0,0.1)
最大宽度：720px，确保移动端适应

3. 图标设计

图标建议使用SVG格式，保证清晰度。图标大小建议如下：

主图标：32px × 32px
子图标：24px × 24px
状态图标：16px × 16px

前端实现：代码写对了，网站才能跑起来

好的设计需要好的代码实现。以下是一个HTML + CSS的完整示例，用于展示个人主页的基本结构。

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><link rel="stylesheet" href="style.css" />
</head>
<body><header class="header"><div class="profile"><img src="zhangsan.jpg" alt="张三" class="avatar" /><h1 class="name">张三</h1><p class="title">10年资深产品经理，擅长互联网产品设计</p></div></header><main class="content"><section class="section experience"><h2>工作经历</h2><div class="card"><h3>2018 - 至今 | 某互联网公司</h3><p>负责多个产品从0到1的全流程设计，主导项目上线后用户增长超300%。</p></div></section><section class="section skills"><h2>技能展示</h2><div class="skills-list"><div class="skill">Axure</div><div class="skill">Figma</div><div class="skill">用户调研</div><div class="skill">产品数据分析</div></div></section><section class="section contact"><h2>联系我</h2><div class="contact-info"><p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p><p>LinkedIn：<a href="https://www.linkedin.com/in/zhangsan" target="_blank">linkedin.com/in/zhangsan</a></p></div></section></main><footer class="footer"><p>© 2026 张三个人主页</p></footer>
</body>
</html>

CSS 样式

/* style.css */
body {font-family: 'Roboto', sans-serif;background-color: #f8f9fa;color: #2c3e50;margin: 0;padding: 0;
}.header {text-align: center;padding: 40px 20px;background-color: #007bff;color: #fff;
}.avatar {width: 120px;height: 120px;border-radius: 50%;object-fit: cover;margin-bottom: 10px;
}.name {font-size: 24px;font-weight: bold;
}.title {font-size: 18px;color: #ddd;
}.content {padding: 40px 20px;
}.section {margin-bottom: 40px;
}.section h2 {font-size: 22px;margin-bottom: 20px;color: #007bff;
}.card {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}.skills-list {display: flex;flex-wrap: wrap;gap: 10px;
}.skill {padding: 8px 16px;background-color: #007bff;color: #fff;border-radius: 20px;font-size: 14px;
}.contact-info {display: flex;flex-direction: column;gap: 10px;
}.contact-info a {color: #007bff;text-decoration: none;
}.footer {text-align: center;padding: 20px;background-color: #eee;font-size: 14px;color: #666;
}