联系卡片单页 - 白泽博客

纯html好看简洁
图片[1] - 联系卡片单页 - 白泽博客
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #f5f5f7;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 个人信息样式 */
        .user-profile {
            background: white;
            padding: 24px;
            margin-bottom: 20px;
            border-radius: 16px;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 2px solid #f0f0f0;
            object-fit: cover;
        }

        .profile-info {
            flex: 1;
        }

        .nickname {
            font-size: 22px;
            color: #1d1d1f;
            margin: 0 0 4px 0;
            font-weight: 600;
        }

        .bio {
            color: #86868b;
            font-size: 15px;
            margin: 0 0 12px 0;
        }

        .tech-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .tag {
            background: #f5f5f7;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            color: #1d1d1f;
        }

        /* 联系方式样式 */
        .contact-list {
            width: 100%;
            max-width: 600px;
        }

        .contact-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        .contact-item {
            background: white;
            padding: 16px;
            margin: 8px 0;
            border-radius: 12px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            transition: transform 0.1s ease;
        }

        .contact-item:active {
            transform: scale(0.98);
            background-color: #f8f8f8;
        }

        .icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
        }

        /* 平台品牌色 */
        .qq { background-color: #12B7F5; }      /* QQ蓝 */
        .wechat { background-color: #07C160; }  /* 微信绿 */
        .douyin { background-color: #000000; }  /* 抖音黑 */
        .weibo { background-color: #E6162D; }   /* 微博红 */
        .zhihu { background-color: #0084FF; }   /* 知乎蓝 */

        .content {
            flex-grow: 1;
        }

        .platform {
            font-size: 17px;
            color: #1d1d1f;
            font-weight: 500;
        }

        .account {
            font-size: 15px;
            color: #86868b;
            margin-top: 2px;
        }
    </style>
</head>
<body>
    <!-- 个人信息模块 -->
    <div class="user-profile">
        <img src="http://q.qlogo.cn/headimg_dl?dst_uin=123456&spec=640&img_type=jpg" class="avatar" alt="用户头像">
        <div class="profile-info">
            <h2 class="nickname">Yi</h2>
            <p class="bio">探索数字世界的无限可能</p>
            <div class="tech-tags">
                <span class="tag">Python</span>
                <span class="tag">JavaScript</span>
                <span class="tag">Golang</span>
                <span class="tag">Vue3</span>
            </div>
        </div>
    </div>

    <!-- 联系方式列表 -->
    <div class="contact-list">
        <!-- QQ -->
        <a href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=123456789" class="contact-link">
            <div class="contact-item">
                <div class="icon qq">
                    <i class="fab fa-qq" style="font-size: 20px; color: white;"></i>
                </div>
                <div class="content">
                    <div class="platform">QQ</div>
                    <div class="account">123456789</div>
                </div>
            </div>
        </a>

        <!-- 微信 -->
        <a href="weixin://" class="contact-link">
            <div class="contact-item">
                <div class="icon wechat">
                    <i class="fab fa-weixin" style="font-size: 20px; color: white;"></i>
                </div>
                <div class="content">
                    <div class="platform">微信</div>
                    <div class="account">TechMaster2023</div>
                </div>
            </div>
        </a>

        <!-- 抖音 -->
        <a href="https://www.douyin.com/user/your_douyin_id" class="contact-link" target="_blank">
            <div class="contact-item">
                <div class="icon douyin">
                    <i class="fab fa-tiktok" style="font-size: 20px; color: white;"></i>
                </div>
                <div class="content">
                    <div class="platform">抖音</div>
                    <div class="account">@coding_life</div>
                </div>
            </div>
        </a>

        <!-- 微博 -->
        <a href="https://weibo.com/u/your_weibo_id" class="contact-link" target="_blank">
            <div class="contact-item">
                <div class="icon weibo">
                    <i class="fab fa-weibo" style="font-size: 20px; color: white;"></i>
                </div>
                <div class="content">
                    <div class="platform">微博</div>
                    <div class="account">@TechGeek</div>
                </div>
            </div>
        </a>

        <!-- 知乎 -->
        <a href="https://www.zhihu.com/people/your_zhihu_id" class="contact-link" target="_blank">
            <div class="contact-item">
                <div class="icon zhihu">
                    <i class="fab fa-zhihu" style="font-size: 20px; color: white;"></i>
                </div>
                <div class="content">
                    <div class="platform">知乎</div>
                    <div class="account">全栈工程师</div>
                </div>
            </div>
        </a>
    </div>
</body>
</html>