CSS创造惊叹的个人主页卡片，展示你的独特魅力！

2023-08-03 05:02:25

使用CSS打造引人注目的个人主页卡片

在个人主页的设计中，个人卡片扮演着至关重要的角色，展示着个人信息、技能和重要事件。为了吸引访客并营造愉悦的用户体验，设计师们会运用各种技巧和效果，提升页面的吸引力。在本教程中，我们将探讨如何利用CSS创建一个令人印象深刻的个人主页卡片。

HTML结构

第一步是创建一个基本的HTML结构，包含一个<div>元素，用于容纳卡片内容。

<div class="card">
  <div class="card-header">
    <h1>John Doe</h1>
    <p>Web Developer</p>
  </div>
  <div class="card-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus finibus. Donec sed odio dui. Fusce eget dictum risus. Maecenas eget lacus eget nunc luctus finibus. Donec sed odio dui. Fusce eget dictum risus.</p>
  </div>
  <div class="card-footer">
    <a href="mailto:johndoe@example.com">Contact Me</a>
  </div>
</div>

CSS样式

接下来，使用CSS为我们的卡片添加样式：

.card {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 3px #ccc;
}

.card-header {
  padding: 10px;
  background-color: #444;
  color: #fff;
  text-align: center;
}

.card-header h1 {
  margin-top: 0;
}

.card-body {
  padding: 10px;
}

.card-footer {
  padding: 10px;
  background-color: #f4f4f4;
  text-align: center;
}

.card-footer a {
  text-decoration: none;
  color: #444;
}