建立文章卡

介紹

開發者們大家好！我很高興向大家介紹我的最新專案：文章卡 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中文網其他相關文章！