李白的《静夜思》

创作时间:

作者:

@小白创作中心

李白的《静夜思》

引用

来源

https://docs.pingcode.com/baike/3088495

本文将详细介绍如何使用HTML、CSS和JavaScript制作一个展示李白《静夜思》的网页。从基础结构到样式设计，再到交互功能，逐步讲解整个制作过程，并提供完整的代码示例。

一、HTML基础结构

HTML的基础结构是网页的骨架，我们需要创建一个基本的HTML文件，并在其中添加必要的标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李白的《静夜思》</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>李白的《静夜思》</h1>
    </header>
    <main>
        <section class="poem">
            <h2>静夜思</h2>
            <p>床前明月光，</p>
            <p>疑是地上霜。</p>
            <p>举头望明月，</p>
            <p>低头思故乡。</p>
        </section>
        <section class="author">
            <h3>作者简介</h3>
            <p>李白（701年－762年），字太白，号青莲居士，唐代伟大的浪漫主义诗人，被誉为“诗仙”。</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 李白的《静夜思》网页</p>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

二、CSS样式设计

为了使网页更加美观，我们需要设计CSS样式。创建一个名为styles.css的文件，并添加以下样式代码：

/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}
header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
    text-align: center;
}
main {
    margin: 20px;
}
.poem {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}
.poem h2 {
    font-family: 'KaiTi', serif;
    font-size: 24px;
    margin: 0;
    padding-bottom: 10px;
}
.poem p {
    font-family: 'KaiTi', serif;
    font-size: 20px;
    margin: 0;
}
.author {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    padding: 20px;
}
.author h3 {
    font-size: 22px;
    margin: 0;
    padding-bottom: 10px;
}
footer {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}

三、JavaScript交互功能

如果我们希望在网页中增加一些交互功能，比如点击按钮显示更多信息，我们可以使用JavaScript。创建一个名为scripts.js的文件，并添加以下代码：

// scripts.js
document.addEventListener('DOMContentLoaded', () => {
    const authorSection = document.querySelector('.author');
    const toggleButton = document.createElement('button');
    toggleButton.textContent = '显示/隐藏作者简介';
    toggleButton.style.display = 'block';
    toggleButton.style.margin = '20px auto';
    authorSection.before(toggleButton);
    toggleButton.addEventListener('click', () => {
        if (authorSection.style.display === 'none' || !authorSection.style.display) {
            authorSection.style.display = 'block';
        } else {
            authorSection.style.display = 'none';
        }
    });
});