前端必學 40個精選案例實戰 一課吃透HTML5+CSS3+JS
//xia仔ke：百度網盤
從0到1：用HTML、CSS和JavaScript構建經典案例
一、案例目標
本案例旨在通過構建一個簡單的新聞網站，使讀者從零開始學習並掌握HTML、CSS和JavaScript三大前端技術。通過實踐，讀者將能夠熟悉網頁的基本結構、樣式設計和交互功能。
二、案例內容
HTML結構搭建
首先，我們需要使用HTML來搭建網頁的基本結構。以下是一個簡單的新聞網站的HTML框架：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新聞網站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>新聞網站</h1>
</header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">國內新聞</a></li>
<li><a href="#">國際新聞</a></li>
<li><a href="#">體育新聞</a></li>
<li><a href="#">娛樂新聞</a></li>
</ul>
</nav>
<main>
<section>
<h2>最新新聞</h2>
<article>
<h3>新聞標題</h3>
<p>新聞內容...</p>
</article>
<!-- 更多新聞 -->
</section>
</main>
<footer>
<p>版權信息...</p>
</footer>
<script src="script.js"></script>
</body>
</html>CSS樣式設計
接下來，我們使用CSS為網頁添加樣式。以下是一個簡單的樣式設計：
css
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
nav ul li {
display: inline;
}
nav ul li a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}JavaScript交互功能
最後，我們使用JavaScript為網頁添加交互功能。以下是一個簡單的點擊導航鏈接時改變頁面標題的示例：
javascript
// script.js
document.querySelectorAll('nav ul li a').forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止鏈接的默認行為（跳轉到新頁面）
var pageTitle = this.textContent; // 獲取鏈接的文本內容作為頁面標題
document.title = pageTitle; // 設置頁面標題
});
});三、案例總結
通過本案例，讀者學習瞭如何使用HTML搭建網頁的基本結構，使用CSS設計網頁樣式，以及使用JavaScript為網頁添加交互功能。這是一個簡單的新聞網站案例，但它涵蓋了前端開發的三大核心技術。通過不斷學習和實踐，讀者可以逐漸掌握更多的前端技術，為構建更復雜的網站和應用打下基礎。
