建立个人资料卡网站

介绍

开发者们大家好！我很高兴分享我的最新项目：个人资料卡。这个简单而优雅的项目是展示您的前端开发技能同时创建供个人或专业使用的可重用组件的好方法。无论您是要构建个人作品集还是商业网站，此个人资料卡都可以为您的网页增添精美和专业的风格。

项目概况

个人资料卡项目是一个基于Web的组件，用于显示用户的个人资料图片、姓名、状态和简短描述。它被设计为交互式的，允许用户只需单击按钮即可添加或删除朋友。该项目演示了如何使用 JavaScript 处理动态内容、事件侦听器和条件渲染。

特征

• 互动设计：用户可以通过添加或删除好友来与个人资料卡互动。
• 响应式布局：该卡片的设计在各种设备和屏幕尺寸上看起来都很棒。
• 动态内容：个人资料卡根据用户交互动态更新其内容。

使用的技术

• HTML：提供个人资料卡的结构。
• CSS：设置卡片的样式，确保其具有视觉吸引力和响应能力。
• JavaScript：处理交互功能，例如更新卡片的状态和重新渲染内容。

项目结构

以下是项目结构的概述：

Profile-Card/
├── index.html
├── style.css
└── script.js

• index.html：包含个人资料卡的 HTML 结构。
• style.css：包含 CSS 样式，实现干净、现代的设计。
• script.js：管理卡片的动态方面，例如用户交互和状态更新。

安装

要开始该项目，请按照以下步骤操作：

1. 克隆存储库：
   

   git clone https://github.com/abhishekgurjar-in/Profile-Card.git
   

2. 打开项目目录:
   

   cd Profile-Card
   

3. 运行项目:

   • 在网络浏览器中打开index.html 文件以查看个人资料卡。

用法

1. 在网络浏览器中打开网站。
2. 查看个人资料卡显示用户的信息。
3. 与卡片互动通过点击“添加好友”或“删除好友”按钮来更新用户的状态。

代码说明

超文本标记语言

index.html 文件定义了个人资料卡的结构，包括页眉、主要内容区域和页脚。这是一个片段：

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Profile Card6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    924ff17625d603f964501dd897c96cc6
      4a249f0d628e2318394fd9b75b4636b1Profile Card473f0a7621bec819994bb5020d29372a
    16b28748ea4df4d9c2150843fecfba68
    243a8f3f087936dc3f96e2f0cf018c2216b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

style.css 文件设置个人资料卡的样式，确保其具有视觉吸引力和响应能力。以下是一些关键样式：

body {
  width: 100%;
  height: 100%;
}

.header {
  font-family: sans-serif;
  margin: 50px;
  text-align: center;
}

#main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 65vh;
}

#card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  width: 200px;
  height: 300px;
  background-color: #ffffff;
}

#card #img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 10px;
  overflow: hidden;
}

#card button {
  padding: 12px 22px;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.footer {
  margin: 50px;
  text-align: center;
}

JavaScript

script.js 文件包含动态生成个人资料卡和处理用户交互的逻辑。这是一个片段：

var arr = [
  {
    name: "Alexander",
    img: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    status: "Stranger",
  },
  {
    name: "Alex",
    img: "https://images.unsplash.com/photo-1549780101-0c96c7eafbd9?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    status: "Stranger",
  },
];

function print() {
  var clutter = "";
  arr.forEach(function (val, index) {
    clutter += `2e0f9246e0efb13426a82c7a66cb8ecf
      da8f770b4b20bddacfe2892cf09d4dc4
        450cc9548020fb25015b4152370eff19
      16b28748ea4df4d9c2150843fecfba68
      684271ed9684bde649abda8831d4d355${val.name}39528cedfa926ea0c01e69ef5b2ea9b0
      c709bbc0c4dc83e77d44381701e7cbb2${val.status}46eb22d0a433f22cff9940d34d5612bf
      e388a4556c0f65e1904146cc1a846beeLorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia consequatur nobis natus. Provident?94b3e26ee717c64999d7867364b1b4a3
      a6f426b398845cafcd9b34afd8ec64a6
        ${val.status === "Stranger" ? "Add Friend" : "Remove Friend"}
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68`;
  });
  document.querySelector("#main").innerHTML = clutter;
}
print();

document.querySelector("#main").addEventListener("click", function (details) {
  arr[details.target.id].status = "Friends";
  print();
});

现场演示

您可以在此处查看个人资料卡项目的现场演示。

结论

个人资料卡项目是一次愉快的经历，它让我练习了基本的前端技能，例如 HTML、CSS 和 JavaScript。我希望这个项目能够激励您创建自己的交互式组件并继续磨练您的开发技能。快乐编码！

制作人员

这个项目是我在前端开发方面持续学习之旅的一部分，重点是创建交互式和可重用的 Web 组件。

作者

• 阿布舍克·古贾尔
  • GitHub 简介

以上是建立个人资料卡网站的详细内容。更多信息请关注PHP中文网其他相关文章！