开发者们大家好！我很高兴分享我的最新项目：新闻主页网站。该项目非常适合那些希望建立一个干净且实用的新闻网站来展示最新头条新闻和文章的人。这是使用 HTML、CSS 和 JavaScript 增强前端开发技能的好方法，同时为用户创建专业的 Web 体验。
新闻主页网站是一个网络应用程序，旨在以有组织的布局显示最新的新闻文章和标题。它采用现代且响应式的设计，使用户可以轻松浏览各个部分，例如最新新闻、特色文章和类别。该项目演示了如何创建一个内容丰富且美观的网站。
以下是项目结构的概述：
News-Homepage/ ├── index.html ├── style.css └── script.js
要开始该项目，请按照以下步骤操作：
克隆存储库：
git clone https://github.com/abhishekgurjar-in/News-Homepage.git
打开项目目录:
cd News-Homepage
运行项目:
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>
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;
}
}
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，我们开发了一个具有专业外观的新闻网站，为用户提供宝贵的资源。我希望这个项目能够激励您建立自己的新闻或内容驱动的网站。快乐编码！
这个项目是我在 Web 开发方面持续学习之旅的一部分。
以上是建立新闻网站主页的详细内容。更多信息请关注PHP中文网其他相关文章！
