跳转至

html卡片模板（项目介绍时，可以直接嵌入。可以嵌入markdown渲染）

参考：个人风采，一键展示：手把手教你HTML+CSS制作个人介绍卡片！-阿里云开发者社区

带样式版

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<div class="profile-container">
  <img src="https://q1.itc.cn/q_70/images03/20240609/1c1be14298be4dbe978e55bde6e958b0.jpeg" alt="头像" class="avatar">
  <h1>ZUO2302</h1>
  <p>你好！我是前端开发新手，正在学习HTML和CSS。</p>
  <div class="social-links">
    <a href="#" target="_blank">GitHub</a>
    <a href="#" target="_blank">Twitter</a>
  </div>
</div>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    animation: backgroundFade 10s infinite alternate;
  }

  @keyframes backgroundFade {
    0% {
      background-color: #f4f4f4;
    }

    100% {
      background-color: #d4e6f1;
    }
  }

  .profile-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;
    transform: scale(0.9);
    transition: transform 0.3s;
  }

  .hasClicked {
    border: 1px solid orange
  }

  .profile-container:hover {
    transform: scale(1);
  }

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
    animation: rotate 4s linear infinite;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  h1 {
    font-size: 24px;
    margin: 0 0 10px;
  }

  p {
    color: #666;
    margin: 0 0 20px;
  }

  .social-links a {
    display: inline-block;
    margin: 0 10px;
    color: #3498db;
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
  }

  .social-links a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #3498db;
    position: absolute;
    left: 0;
    bottom: -5px;
    transform: scaleX(0);
    transition: transform 0.3s;
  }

  .social-links a:hover {
    color: #2980b9;
  }

  .social-links a:hover::after {
    transform: scaleX(1);
  }
</style>
<script>
  /**
     * 当文档加载完成时，添加事件监听器以实现个人资料容器的点击交互效果。
     * 此函数等待文档完全加载后执行，确保所选元素已经存在于DOM中。
     */
  document.addEventListener("DOMContentLoaded", function () {
    // 选择页面中个人资料容器的元素，为后续的交互逻辑做准备。
    const profileContainer = document.querySelector('.profile-container');
    /**
     * 为个人资料容器添加点击事件监听器。
     * 当元素被点击时，切换其上的 'clicked' 类，以实现展开或收起的效果。
     */
    profileContainer.addEventListener('click', function () {
      // 切换 'clicked' 类，实现个人资料容器的展开和收起交互。
      profileContainer.classList.toggle('hasClicked');
    });
  });
</script>
简单不带动画版¶
<div style="
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;">
  <img src="https://cdn.jsdelivr.net/gh/dancehole/image@main/img/1080x1080.ico" alt="头像" style="
         width: 100px; 
         height: 100px; 
         border-radius: 50%; 
         margin-bottom: 20px; 
         display: block; 
         margin-left: auto; 
         margin-right: auto;">
  <h1 style="font-size: 24px; margin: 0 0 10px;">dancehole</h1>
  <p style="color: #666; margin: 0 0 20px;">我是邓仕昊，深圳技术大学大四在读（小白一只）</p>
  <div>
    <a href="http://brief.dancehole.cn" target="_blank" style="
            display: inline-block; 
            margin: 0 10px; 
            color: #3498db; 
            text-decoration: none; 
            position: relative;">
      我的简介
    </a>
    <a href="http://intro.dancehole.cn" target="_blank" style="
            display: inline-block; 
            margin: 0 10px; 
            color: #3498db; 
            text-decoration: none; 
            position: relative;">
      我的项目
    </a>
    <a href="https://github.com/dancehole" target="_blank" style="
            display: inline-block; 
            margin: 0 10px; 
            color: #3498db; 
            text-decoration: none; 
            position: relative;">
      Github
    </a>
  </div>
</div>
头像

ZUO2302

你好！我是前端开发新手，正在学习HTML和CSS。

简单不带动画版¶

头像

dancehole

我是邓仕昊，深圳技术大学大四在读（小白一只）