建立新闻网站主页-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，我们开发了一个具有专业外观的新闻网站，为用户提供宝贵的资源。我希望这个项目能够激励您建立自己的新闻或内容驱动的网站。快乐编码！