Bina Laman Utama Laman Web Berita-tutorial css-php.cn

Build a News Website HomePage

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: Tapak Web Halaman Utama Berita. Projek ini sesuai untuk mereka yang ingin membina tapak web berita yang bersih dan berfungsi yang mempamerkan tajuk dan artikel terkini. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda menggunakan HTML, CSS dan JavaScript sambil mencipta pengalaman web profesional untuk pengguna.

Gambaran Keseluruhan Projek

Laman Web Laman Utama Berita ialah aplikasi web yang direka untuk memaparkan artikel dan tajuk berita terkini dalam reka letak yang teratur. Dengan reka bentuk yang moden dan responsif, ia membolehkan pengguna menavigasi pelbagai bahagian dengan mudah, seperti Berita Terkini, Artikel Pilihan dan Kategori. Projek ini menunjukkan cara membuat tapak web yang bermaklumat dan menyenangkan dari segi estetika.

Ciri-ciri

Reka Letak Responsif: Tapak web menyesuaikan diri dengan saiz skrin yang berbeza, memberikan pengalaman tontonan yang optimum pada kedua-dua desktop dan peranti mudah alih.
Navigasi Interaktif: Membolehkan pengguna menyemak imbas kategori berita yang berbeza dengan lancar.
Reka Bentuk Bersih: Mempersembahkan artikel berita dalam format yang menarik secara visual dan mudah dibaca.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk Laman Web Laman Utama Berita.
CSS: Menggayakan tapak web untuk mencipta reka bentuk yang moden dan responsif.
JavaScript: Mengurus elemen interaktif, termasuk pemuatan kandungan dinamik.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Laman Web Laman Utama Berita.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk yang menarik dan responsif.
script.js: Mengurus elemen interaktif tapak web, seperti pemuatan kandungan dinamik.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd News-Homepage
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk melihat Laman Web Berita.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Navigasi melalui bahagian menggunakan menu teratas untuk meneroka kategori berita yang berbeza.
Baca artikel terkini dan cerita berita yang ditampilkan.
Klik pada tajuk berita untuk melihat artikel berita terperinci.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Laman Web Halaman Utama Berita, termasuk bahagian untuk kategori berita yang berbeza dan pengaki. Berikut adalah coretan:

<!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="Bina Laman Utama Laman Web Berita" />
        </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>

Salin selepas log masuk

CSS

Fail style.css menggayakan Laman Web Halaman Utama Berita, memastikan ia menarik dan responsif secara visual. Di bawah ialah beberapa gaya utama:

* {
  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;
  }
}

Salin selepas log masuk

JavaScript

Fail script.js mengandungi sebarang fungsi dinamik untuk Laman Web Laman Utama Berita. Berikut ialah coretan ringkas untuk demonstrasi:

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";
  }
}

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Laman Web Laman Utama Berita di sini.

Kesimpulan

Membina Laman Web Laman Utama Berita merupakan pengalaman hebat dalam mencipta platform web yang bersih dan teratur untuk menyampaikan artikel berita. Projek ini menyerlahkan kepentingan reka bentuk responsif dan navigasi mesra pengguna dalam pembangunan web moden. Dengan menggunakan HTML, CSS dan JavaScript, kami telah membangunkan laman web berita yang kelihatan profesional yang berfungsi sebagai sumber yang berharga untuk pengguna. Saya harap projek ini memberi inspirasi kepada anda untuk membina laman web berasaskan berita atau kandungan anda sendiri. Selamat mengekod!