建立新聞網站首頁-css教學-PHP中文網

Build a News Website HomePage

介紹

開發者們大家好！我很高興分享我的最新項目：新聞主頁網站。該項目非常適合那些希望建立一個乾淨且實用的新聞網站來展示最新頭條新聞和文章的人。這是使用 HTML、CSS 和 JavaScript 增強前端開發技能的好方法，同時為使用者創建專業的 Web 體驗。

項目概況

新聞主頁網站是一個網絡應用程序，旨在以有組織的佈局顯示最新的新聞文章和標題。它採用現代且響應式的設計，使用戶可以輕鬆瀏覽各個部分，例如最新新聞、特色文章和類別。該專案演示瞭如何創建一個資訊豐富且美觀的網站。

特徵

響應式佈局：網站適應不同的螢幕尺寸，在桌面和行動裝置上提供最佳的觀看體驗。
互動式導航：允許使用者無縫瀏覽不同的新聞類別。
簡潔的設計：以視覺吸引力且易於閱讀的格式呈現新聞文章。

使用的技術

HTML：提供新聞首頁網站的架構。
CSS：設定網站樣式以建立現代且響應式的設計。
JavaScript：管理互動元素，包括動態內容載入。

專案結構

以下是項目結構的概述：

News-Homepage/
├── index.html
├── style.css
└── script.js

登入後複製

index.html：包含新聞首頁網站的 HTML 結構。
style.css：包含 CSS 樣式以創造引人入勝且響應式的設計。
script.js：管理網站的互動元素，例如動態內容載入。

安裝

要開始該項目，請按照以下步驟操作：

複製儲存庫：

git clone https://github.com/abhishekgurjar-in/News-Homepage.git

登入後複製

開啟專案目錄:
```
cd News-Homepage
```
登入後複製
運行項目:
- 在網頁瀏覽器中開啟index.html檔案以查看新聞主頁網站。

用法

在網頁瀏覽器中開啟網站。
瀏覽各部分使用頂部選單探索不同的新聞類別。
閱讀最新文章和精選新聞故事。
點選標題查看詳細新聞文章。

程式碼說明

超文本標記語言

index.html 檔案定義新聞首頁網站的結構，包括不同新聞類別和頁腳的部分。這是一個片段：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>News Homepage</title>
    <link
      href="https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <nav class="navigation">
        <div class="logo">
          <img src="./assets/images/logo.svg" alt="建立新聞網站首頁" />
        </div>
        <div class="menu-icon" onclick="toggleMenu()">
          <img src="./assets/images/icon-menu.svg" alt="Menu Icon" />
        </div>
        <div class="heading">
          <a href="/">Home</a>
          <a href="/">New</a>
          <a href="/">Popular</a>
          <a href="/">Trending</a>
          <a href="/">Categories</a>
        </div>
      </nav>
      <div id="mobile-menu" class="mobile-menu">
        <a href="/">Home</a>
        <a href="/">New</a>
        <a href="/">Popular</a>
        <a href="/">Trending</a>
        <a href="/">Categories</a>
      </div>
      <main>
        <div class="left-main">
          <img src="./assets/images/image-web-3-desktop.jpg" alt="Web 3.0" />
          <div class="body-text">
            <h1>The Bright <br />Future of <br />Web 3.0?</h1>
            <p>
              We dive into the next evolution of the web that claims to put the
              power of the platforms back into the hands of the people. But is
              it really fulfilling its promise?
              <br /><br />
              <span>Read more</span>
            </p>
          </div>
        </div>
        <div class="right-main">
          <h1> New</h1>
          <div class="section">
            <h3>Hydrogen VS Electric Cars</h3>
            <p>Will hydrogen-fueled cars ever catch up to EVs?</p>
            <hr />
          </div>
          <div class="section">
            <h3>The Downsides of AI Artistry</h3>
            <p>
              What are the possible adverse effects of on-demand AI image
              generation?
            </p>
            <hr />
          </div>
          <div class="section">
            <h3>Is VC Funding Drying Up?</h3>
            <p>
              Private funding by VC firms is down 50% YOY. We take a look at
              what that means.
            </p>
            <hr />
          </div>
        </div>
      </main>
      <footer>
        <div class="card">
          <div class="card-image">
            <img src="./assets/images/image-retro-pcs.jpg" alt="Retro PCs" />
          </div>
          <div class="card-text">
            <h1>01</h1>
            <h3>Reviving Retro PCs</h3>
            <p>What happens when old PCs are given modern upgrades?</p>
          </div>
        </div>
        <div class="card">
          <div class="card-image">
            <img src="./assets/images/image-top-laptops.jpg" alt="Top Laptops" />
          </div>
          <div class="card-text">
            <h1>02</h1>
            <h3>Top 10 Laptops of 2022</h3>
            <p>Our best picks for various needs and budgets.</p>
          </div>
        </div>
        <div class="card">
          <div class="card-image">
            <img src="./assets/images/image-top-laptops.jpg" alt="Growth of Gaming" />
          </div>
          <div class="card-text">
            <h1>03</h1>
            <h3>The Growth of Gaming</h3>
            <p>How the pandemic has sparked fresh opportunities.</p>
          </div>
        </div>
      </footer>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

登入後複製

CSS

style.css 檔案設定新聞主頁網站的樣式，確保其具有視覺吸引力和回應能力。以下是一些關鍵樣式：

* {
  box-sizing: border-box;
}

body {
  background-color: white;
  font-size: 16px;
  margin: 20px;
  font-family: Inter, sans-serif;
}

.container {
  max-width: 1100px;
  margin: auto;
}

.navigation {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  margin: auto;
}

.logo img {
  width: 50px;
}

.heading a {
  cursor: pointer;
  padding-left: 20px;
  text-decoration: none;
  color: gray;
  display: inline-block;
}

.heading a:hover {
  color: rgb(253, 81, 81);
}

.menu-icon {
  display: none;
  cursor: pointer;
}

.menu-icon img {
  width: 30px;
}

.active {
  display: none;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 10px;
}

.mobile-menu a {
  text-decoration: none;
  color: gray;
  padding: 10px;
  display: block;
}

.mobile-menu a:hover {
  color: rgb(253, 81, 81);
}

main {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.left-main {
  width: 80%;
  padding-right: 10px;
}

.left-main img {
  width: 100%;
}

.body-text {
  display: flex;
}

.body-text h1 {
  font-size: 40px;
  width: 50%;
}

.body-text p {
  font-size: 16px;
  width: 50%;
}

.body-text span {
  background-color: rgb(253, 81, 81);
  padding: 10px;
  cursor: pointer;
}

.body-text span:hover {
  background-color: black;
  color: white;
}

.right-main {
  padding: 10px;
  width: 40%;
  background-color: black;
}

.right-main h1 {
  color: rgb(237, 155, 15);
  font-size: 25px;
}

.right-main .section {
  margin: 10px;
}

.section h3 {
  cursor: pointer;
  color: white;
}

.section h3:hover {
  color: rgb(237, 155, 15);
}

.section p {
  color: gray;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.card-image img {
  width: 130px;
}

.card-text h1 {
  color: rgb(253, 81, 81);
}

.card-text h3:hover {
  color: rgb(253, 81, 81);
}

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

@media (max-width: 600px) {
  .heading {
    display: none;
  }

  .menu-icon {
    display: block;
  }

  main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .body-text {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  footer {
    flex-direction: column;
  }
}

登入後複製

JavaScript

script.js 檔案包含新聞主頁網站的所有動態功能。這是一個簡單的示範片段：

function toggleMenu() {
  const mobileMenu = document.getElementById("mobile-menu");
  const menuIcon = document.querySelector(".menu-icon img");

  if (mobileMenu.style.display === "flex") {
    mobileMenu.style.display = "none";
    menuIcon.src = "./assets/images/icon-menu.svg";
  } else {
    mobileMenu.style.display = "flex";
    menuIcon.src = "./assets/images/icon-menu-close.svg";
  }
}

登入後複製

現場演示

您可以在此處查看新聞主頁網站專案的現場演示。

結論

建立新聞主頁網站是創建一個乾淨且有組織的網路平台來展示新聞文章的絕佳經驗。該專案強調了響應式設計和使用者友好的導航在現代 Web 開發中的重要性。透過應用 HTML、CSS 和 JavaScript，我們開發了一個具有專業外觀的新聞網站，為使用者提供寶貴的資源。我希望這個項目能夠激勵您建立自己的新聞或內容驅動的網站。快樂編碼！