本源码是一款面向设计师、开发者、自由职业者的「数字名片」单页模板。采用深蓝灰底色搭配紫罗兰、青色与酸橙绿等霓虹渐变强调色，科技感强且不失质感，适合在微信中直接转发或在个人网站作为「联系我」页面使用。
模板结构完整：顶部渐变 Banner 与姓名首字母头像形成视觉焦点，在线状态点实时显示；技能标签、三项核心数据、保存/分享双按钮依次排布；电话、邮箱、网站、地址四类联系方式均可一键拨打/跳转；GitHub、微信、X、掘金、邮件订阅等社交入口一应俱全；底部还预留了二维码占位区，方便扫码加好友。所有按钮和交互都已接入原生 JavaScript 事件。
适合程序员、产品经理、设计师、自媒体博主等人群替代纸质名片使用。修改个人信息与配色变量后，部署到任意静态托管平台即可获得一个可长期使用的在线名片。
使用教程
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:#0d1117;
--bg2:#151b24;
--card:#1a212c;
--card-2:#212a37;
--line:#2b3543;
--text:#e8edf3;
--muted:#8b98a8;
--cyan:#22d3ee;
--violet:#a78bfa;
--lime:#a3e635;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
display:flex;align-items:center;justify-content:center;
padding:34px 18px;
background-image:
radial-gradient(circle at 15% 8%, rgba(167,139,250,.18), transparent 42%),
radial-gradient(circle at 88% 90%, rgba(34,211,238,.15), transparent 45%);
-webkit-font-smoothing:antialiased;
}
.card{
width:100%;max-width:420px;
background:var(--card);
border:1px solid var(--line);
border-radius:24px;
overflow:hidden;
box-shadow:0 28px 70px rgba(0,0,0,.55);
animation:rise .7s cubic-bezier(.22,1,.36,1);
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
/* --- 头部 --- */
.head{
position:relative;
padding:0 26px 24px;
text-align:center;
}
.banner{
height:104px;margin:0 -26px 0;
background:linear-gradient(120deg,#7c3aed 0%,#2563eb 48%,#06b6d4 100%);
position:relative;overflow:hidden;
}
.banner::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(circle at 22% 70%, rgba(255,255,255,.28), transparent 42%),
radial-gradient(circle at 78% 20%, rgba(255,255,255,.18), transparent 40%);
}
.avatar{
width:96px;height:96px;border-radius:50%;
margin:-52px auto 14px;position:relative;z-index:2;
background:linear-gradient(140deg,#a78bfa,#22d3ee);
border:4px solid var(--card);
display:flex;align-items:center;justify-content:center;
font-size:34px;font-weight:600;color:#0d1117;letter-spacing:.02em;
box-shadow:0 10px 26px rgba(34,211,238,.24);
}
.status{
position:absolute;right:calc(50% - 48px);bottom:20px;
width:20px;height:20px;border-radius:50%;background:var(--lime);
border:3px solid var(--card);z-index:3;
}
h1{font-size:23px;font-weight:600;letter-spacing:.02em}
.role{
margin-top:6px;font-size:13.5px;color:var(--cyan);letter-spacing:.04em;font-weight:500;
}
.company{margin-top:3px;font-size:12.5px;color:var(--muted)}
.bio{
margin-top:14px;font-size:13.5px;color:#b6c2d0;line-height:1.75;
}
.tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:16px}
.tag{
font-size:11.5px;padding:4px 11px;border-radius:20px;
background:rgba(167,139,250,.12);color:#c4b5fd;border:1px solid rgba(167,139,250,.24);
}
.tag.c{background:rgba(34,211,238,.1);color:#67e8f9;border-color:rgba(34,211,238,.24)}
.tag.g{background:rgba(163,230,53,.1);color:#bef264;border-color:rgba(163,230,53,.22)}
/* --- 数据 --- */
.stats{
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--bg2);
}
.stat{padding:16px 6px;text-align:center;position:relative}
.stat + .stat::before{
content:"";position:absolute;left:0;top:20%;height:60%;width:1px;background:var(--line);
}
.stat b{display:block;font-size:19px;font-weight:600}
.stat span{font-size:11px;color:var(--muted);letter-spacing:.06em}
/* --- 主操作 --- */
.actions{display:flex;gap:10px;padding:20px 22px 6px}
.btn{
flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
padding:12px 0;border-radius:12px;font-size:13.5px;font-weight:500;
text-decoration:none;cursor:pointer;border:none;transition:.22s;
font-family:inherit;
}
.btn.primary{
background:linear-gradient(120deg,#7c3aed,#06b6d4);color:#fff;
box-shadow:0 8px 20px rgba(99,102,241,.3);
}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(99,102,241,.42)}
.btn.ghost{
background:var(--card-2);color:var(--text);border:1px solid var(--line);
}
.btn.ghost:hover{background:#28323f;transform:translateY(-2px)}
/* --- 联系条目 --- */
.list{padding:14px 22px 4px}
.row{
display:flex;align-items:center;gap:13px;
padding:12px 13px;border-radius:12px;
text-decoration:none;color:inherit;transition:.2s;
border:1px solid transparent;
}
.row:hover{background:var(--card-2);border-color:var(--line)}
.ico{
width:36px;height:36px;flex:none;border-radius:10px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);color:var(--cyan);
}
.row:nth-child(2) .ico{color:var(--violet)}
.row:nth-child(3) .ico{color:var(--lime)}
.row:nth-child(4) .ico{color:#fbbf24}
.rt{flex:1;min-width:0}
.rt b{display:block;font-size:13.5px;font-weight:500}
.rt span{font-size:12px;color:var(--muted);word-break:break-all}
.copy{
font-size:11px;color:var(--muted);padding:4px 9px;border-radius:7px;
border:1px solid var(--line);flex:none;
}
/* --- 社交 --- */
.social{
display:flex;justify-content:center;gap:12px;
padding:20px 22px 6px;border-top:1px solid var(--line);margin-top:14px;
}
.sbtn{
width:42px;height:42px;border-radius:13px;
display:flex;align-items:center;justify-content:center;
background:var(--card-2);border:1px solid var(--line);color:var(--muted);
text-decoration:none;transition:.22s;
}
.sbtn:hover{color:#fff;transform:translateY(-3px);border-color:var(--cyan);
box-shadow:0 8px 18px rgba(34,211,238,.18)}
/* --- 二维码 --- */
.qr-area{
display:flex;align-items:center;gap:16px;
margin:20px 22px;padding:16px;border-radius:14px;
background:var(--bg2);border:1px solid var(--line);
}
.qr{
width:76px;height:76px;flex:none;border-radius:9px;background:#fff;padding:6px;
}
.qr svg{width:100%;height:100%;display:block}
.qr-text b{display:block;font-size:13px;margin-bottom:4px}
.qr-text p{font-size:11.8px;color:var(--muted);line-height:1.65}
footer{
text-align:center;padding:16px;font-size:11px;color:#5c6a7a;
border-top:1px solid var(--line);letter-spacing:.04em;
}
@media(max-width:420px){
.actions{flex-direction:column}
.qr-area{flex-direction:column;text-align:center}
}
</style>
</head>
<body>
<div class="card">
<div class="head">
<div class="banner"></div>
<div class="avatar">陈</div>
<div class="status" title="在线"></div>
<h1>陈 屿</h1>
<div class="role">全栈工程师 / 独立开发者</div>
<div class="company">砺石数字科技 · 杭州</div>
<p class="bio">写了 9 年代码，专注 Web 性能优化与工程化体系建设。业余做独立产品，也写技术博客。</p>
<div class="tags">
<span class="tag">TypeScript</span>
<span class="tag c">Node.js</span>
<span class="tag g">React</span>
<span class="tag c">性能优化</span>
<span class="tag">技术写作</span>
</div>
</div>
<div class="stats">
<div class="stat"><b>9<small style="font-size:12px">年</small></b><span>从业经验</span></div>
<div class="stat"><b>42</b><span>开源项目</span></div>
<div class="stat"><b>8.6k</b><span>技术关注</span></div>
</div>
<div class="actions">
<a class="btn primary" href="#" onclick="return save()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 3v12M7 10l5 5 5-5M5 21h14"/>
</svg>
保存联系方式
</a>
<a class="btn ghost" href="#" onclick="return share()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
<path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/>
</svg>
分享名片
</a>
</div>
<div class="list">
<a class="row" href="tel:13800001234">
<div class="ico">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>
</svg>
</div>
<div class="rt"><b>手机</b><span>138 0000 1234</span></div>
<span class="copy">拨打</span>
</a>
<a class="row" href="mailto:chenyu@example.com">
<div class="ico">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 6 10-6"/>
</svg>
</div>
<div class="rt"><b>邮箱</b><span>chenyu@example.com</span></div>
<span class="copy">复制</span>
</a>
<a class="row" href="#">
<div class="ico">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z"/>
</svg>
</div>
<div class="rt"><b>个人网站</b><span>chenyu.dev</span></div>
<span class="copy">访问</span>
</a>
<a class="row" href="#">
<div class="ico">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
<path d="M12 21s-7-6-7-11a7 7 0 1 1 14 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.6"/>
</svg>
</div>
<div class="rt"><b>办公地址</b><span>杭州市滨江区江南大道 588 号 B 座 12F</span></div>
<span class="copy">导航</span>
</a>
</div>
<div class="social">
<a class="sbtn" href="#" title="GitHub">
<svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.56-1.11-4.56-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2z"/>
</svg>
</a>
<a class="sbtn" href="#" title="微信">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
<path d="M9 3.6c-3.9 0-7 2.6-7 5.8 0 1.8 1 3.4 2.6 4.5L4 16.4l2.6-1.3c.7.2 1.5.3 2.4.3h.6"/>
<path d="M22 14.4c0-2.7-2.6-4.9-5.9-4.9s-5.9 2.2-5.9 4.9 2.6 4.9 5.9 4.9c.7 0 1.4-.1 2-.3l2.2 1.1-.5-1.7c1.3-.9 2.2-2.3 2.2-4z"/>
</svg>
</a>
<a class="sbtn" href="#" title="X">
<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.2 2H21l-6.6 7.5L22 22h-6.2l-4.8-6.3L5.4 22H2.6l7-8L2 2h6.3l4.4 5.8L18.2 2zm-1 18h1.6L7 3.9H5.3L17.2 20z"/>
</svg>
</a>
<a class="sbtn" href="#" title="掘金">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<path d="M12 4l7 5-7 5-7-5 7-5z"/><path d="M5 14l7 5 7-5"/>
</svg>
</a>
<a class="sbtn" href="#" title="邮件订阅">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1.6" fill="currentColor" stroke="none"/>
</svg>
</a>
</div>
<div class="qr-area">
<div class="qr">
<svg viewBox="0 0 29 29" shape-rendering="crispEdges">
<rect width="29" height="29" fill="#fff"/>
<g fill="#0d1117">
<rect x="1" y="1" width="7" height="7"/><rect x="2" y="2" width="5" height="5" fill="#fff"/><rect x="3" y="3" width="3" height="3"/>
<rect x="21" y="1" width="7" height="7"/><rect x="22" y="2" width="5" height="5" fill="#fff"/><rect x="23" y="3" width="3" height="3"/>
<rect x="1" y="21" width="7" height="7"/><rect x="2" y="22" width="5" height="5" fill="#fff"/><rect x="3" y="23" width="3" height="3"/>
<rect x="10" y="1" width="1" height="1"/><rect x="12" y="1" width="1" height="1"/><rect x="14" y="2" width="1" height="1"/>
<rect x="11" y="3" width="2" height="1"/><rect x="15" y="3" width="1" height="1"/><rect x="10" y="5" width="1" height="2"/>
<rect x="13" y="5" width="1" height="1"/><rect x="16" y="5" width="1" height="1"/><rect x="12" y="7" width="3" height="1"/>
<rect x="1" y="10" width="1" height="1"/><rect x="3" y="10" width="2" height="1"/><rect x="6" y="10" width="1" height="1"/>
<rect x="2" y="12" width="1" height="1"/><rect x="5" y="12" width="2" height="1"/><rect x="1" y="14" width="2" height="1"/>
<rect x="4" y="14" width="1" height="1"/><rect x="7" y="14" width="1" height="1"/><rect x="3" y="16" width="1" height="1"/>
<rect x="6" y="16" width="2" height="1"/><rect x="1" y="18" width="1" height="1"/><rect x="4" y="18" width="2" height="1"/>
<rect x="10" y="10" width="2" height="2"/><rect x="14" y="10" width="1" height="1"/><rect x="17" y="10" width="2" height="1"/>
<rect x="12" y="12" width="1" height="2"/><rect x="15" y="12" width="2" height="1"/><rect x="19" y="12" width="1" height="2"/>
<rect x="10" y="14" width="1" height="1"/><rect x="13" y="14" width="2" height="1"/><rect x="17" y="14" width="1" height="2"/>
<rect x="11" y="16" width="2" height="1"/><rect x="15" y="16" width="1" height="2"/><rect x="19" y="16" width="1" height="1"/>
<rect x="10" y="18" width="1" height="2"/><rect x="13" y="18" width="1" height="1"/><rect x="16" y="18" width="2" height="1"/>
<rect x="21" y="10" width="1" height="2"/><rect x="24" y="10" width="2" height="1"/><rect x="27" y="10" width="1" height="1"/>
<rect x="22" y="13" width="2" height="1"/><rect x="26" y="13" width="1" height="2"/><rect x="21" y="15" width="1" height="1"/>
<rect x="24" y="16" width="1" height="2"/><rect x="27" y="17" width="1" height="1"/><rect x="22" y="18" width="2" height="1"/>
<rect x="10" y="21" width="1" height="1"/><rect x="12" y="21" width="2" height="1"/><rect x="16" y="21" width="1" height="2"/>
<rect x="19" y="21" width="2" height="1"/><rect x="23" y="21" width="1" height="1"/><rect x="26" y="21" width="2" height="1"/>
<rect x="11" y="23" width="2" height="1"/><rect x="14" y="23" width="1" height="2"/><rect x="18" y="23" width="1" height="1"/>
<rect x="21" y="23" width="2" height="1"/><rect x="25" y="23" width="1" height="1"/><rect x="10" y="25" width="1" height="1"/>
<rect x="12" y="25" width="1" height="2"/><rect x="16" y="25" width="2" height="1"/><rect x="20" y="25" width="1" height="2"/>
<rect x="23" y="25" width="2" height="1"/><rect x="27" y="25" width="1" height="1"/><rect x="14" y="27" width="2" height="1"/>
<rect x="18" y="27" width="1" height="1"/><rect x="22" y="27" width="1" height="1"/><rect x="25" y="27" width="2" height="1"/>
</g>
</svg>
</div>
<div class="qr-text">
<b>扫码添加微信</b>
<p>手机扫描左侧二维码，即可直接添加好友并同步这张数字名片。</p>
</div>
</div>
<footer>© 2026 陈屿 · Digital Business Card</footer>
</div>
<script>
function save(){ alert("已生成 vCard 文件，请在通讯录中确认导入。"); return false; }
function share(){
if(navigator.share){ navigator.share({title:"陈屿的数字名片", url:location.href}); }
else { alert("名片链接已复制：" + location.href); }
return false;
}
document.querySelectorAll(".row").forEach(function(r){
r.addEventListener("click", function(e){
var c = r.querySelector(".copy");
if(c && c.textContent === "复制"){
e.preventDefault();
c.textContent = "已复制";
setTimeout(function(){ c.textContent = "复制"; }, 1600);
}
});
});
</script>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1804.html
微信扫一扫 
支付宝扫一扫 
