建立文章卡

介绍

开发者们大家好！我很高兴向大家介绍我的最新项目：文章卡 Web 组件。该项目是对任何网站的一个很好的补充，提供了一种具有视觉吸引力的方式来显示文章、博客文章或新闻更新。这是一个绝佳的机会，可以提高您使用 HTML、CSS 和 JavaScript 的前端开发技能，同时创建实用且可重用的组件。

项目概况

文章卡组件旨在展示带有图像、标题、描述和作者信息的文章。它采用简洁、现代的布局，通过使内容更具视觉吸引力和更易于访问来增强用户参与度。该项目演示了如何创建可以轻松集成到各种 Web 应用程序中的优雅文章卡。

特征

• 响应式设计：文章卡完全响应式，确保它在桌面和移动设备上看起来都很棒。
• 悬停效果：应用微妙的悬停效果来增强卡片的交互性。
• 可自定义布局：可以轻松自定义布局以适应不同类型的内容，使其适用于各种用例。

使用的技术

• HTML：提供文章卡组件的结构。
• CSS：设置组件样式以创建具有视觉吸引力和响应式设计。
• JavaScript：（可选）可用于额外的交互性，例如单击时扩展内容或与其他组件集成。

项目结构

以下是项目结构的概述：

Article-Card/
├── index.html
├── style.css
└── script.js (optional)

• index.html：包含文章卡组件的 HTML 结构。
• style.css：包含 CSS 样式以创建引人入胜且响应式的设计。
• script.js：（可选）可用于添加交互性，例如单击时展开内容。

安装

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

1. 克隆存储库：
   

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

2. 打开项目目录:
   

   cd Article-Card
   

3. 运行项目:

   • 在网络浏览器中打开index.html文件以查看文章卡组件。

用法

1. 在网络浏览器中打开应用程序。
2. 将鼠标悬停在卡片上即可查看互动效果。
3. 通过编辑 HTML 和 CSS 文件来自定义内容以适合您的特定用例。
4. 添加更多卡片（如果需要创建网格或文章列表）。

代码说明

超文本标记语言

index.html 文件定义了文章卡组件的结构。这是一个片段：

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article Card</title>
    <link href="https://fonts.googleapis.com/css?family=Manrope:200,300,regular,500,600,700,800" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="./script.js" defer></script>
  
  
    <div class="header">
      <h1>Article Card</h1>
    </div>
    <div class="container">
      <div class="box">
        <div class="left-box"></div>
        <div class="right-box">
          <h3>
            Shift the overall look and feel by adding these wonderful touches to
            furniture in your home
          </h3>
          <p>
            Ever been in a room and felt like something was missing? Perhaps it
            felt slightly bare and uninviting. I’ve got some simple tips to help
            you make any room feel complete.
          </p>
          <div class="name-card">
            <div class="name">
              <img class="profile" src="./images/avatar-michelle.jpg" alt="Profile picture of Michelle Appleton">
              <h4>
                Michelle Appleton <br>
                <span>28 Jun 2020</span>
              </h4>
            </div>
            <div class="share">
              <img src="./images/icon-share.svg" alt="Share icon">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  

CSS

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

* {
    box-sizing: border-box;
}

body {
    background-color: #ecf2f8;
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
}

.header {
    margin: 20px;
    text-align: center;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    overflow: hidden;
    background-color: white;
    border-radius: 20px;
    margin: 0;
    width: 700px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
}

.left-box {
    width: 40%;
    height: 300px; /* Ensure height is defined */
    background: url("./images/drawers.jpg") no-repeat center center;
    background-size: cover; /* Ensures the image covers the entire area */
}

.right-box {
    background-color: white;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 25px;
}

.right-box h3 {
    font-size: 18px;
    margin-right: 55px;
}

.right-box p {
    font-size: 13px;
    margin-right: 55px;
}

.name-card {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.share {
    background-color: #ecf2f8;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 120px;
}

.share img {
    width: 20px;
}

.name {
    gap: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.name h4 {
    font-size: 14px;
}

.name span {
    font-size: 11px;
    color: gray;
}

.profile {
    width: 50px;
    border-radius: 50%;
}

.share-popup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(214, 214, 214);
    background-color: #48556a;
    padding-inline: 15px;
    border-radius: 7px;
    font-weight: 100;
    font-size: 15px;
    width: 220px;
    position: fixed;
    margin-top: 250px;
    margin-left: 550px;
}

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

@media (max-width: 750px) {
    .box {
        flex-direction: column;
        width: 400px;
        height: 600px;
    }

    .left-box {
        width: 100%;
    }

    .share-popup {
        margin-top: 550px;
        margin-left: 350px;
    }
}

JavaScript（可选）

script.js 文件可用于添加额外的交互性，例如展开或折叠内容。这是一个简单的例子：

const shareBtn = document.getElementsByClassName("share")[0];
const container = document.getElementsByClassName("container")[0];

shareBtn.addEventListener("click", () => {
    let sharePopup = document.querySelector(".share-popup");

    if (sharePopup) {
        container.removeChild(sharePopup);
    } else {
        sharePopup = document.createElement("div");
        sharePopup.innerHTML = `
            <p>S H A R E</p>
            <img class="fb" src="./images/icon-facebook.svg" alt="建立文章卡">
            <img class="tw" src="./images/icon-twitter.svg" alt="Twitter">
            <img class="pt" src="./images/icon-pinterest.svg" alt="Pinterest">
        `;
        sharePopup.classList.add("share-popup");
        container.appendChild(sharePopup);
    }
});

现场演示

您可以在此处查看 Article Card 项目的现场演示。

结论

构建文章卡组件是设计可重用且具有视觉吸引力的 Web 组件的绝佳体验。该项目强调了现代 Web 开发中简洁设计和响应式布局的重要性。通过应用 HTML、CSS 和可选的 JavaScript，我们创建了一个可以增强任何网站的视觉吸引力和可用性的组件。我希望这个项目能够激励您构建自己的自定义组件。快乐编码！

制作人员

这个项目是我在 Web 开发方面持续学习之旅的一部分。

作者

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

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