html简单网页代码古诗-html简单的网页代码

创建一个基于HTML的简单网页,展示几首经典古诗，并提供一些基本的CSS样式以增强视觉效果，下面是一个示例，展示了如何使用HTML和CSS来实现这一目标。

HTML 结构

我们需要一个基本的HTML结构来包含文本内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">古诗欣赏</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS文件 -->
</head>
<body>
    <h1>经典古诗赏析</h1>
    <div class="poem-container">
        <div class="poem-row">
            <p class="poem-title">静夜思</p>
            <p class="content"><span style="font-size:20px;">床前明月光，</span><span style="font-size:25px; color:#FF6347;">疑是地上霜。</span></p>
        </div>
        <div class="poem-row">
            <p class="poem-title">春眠不觉晓</p>
            <p class="content"><span style="font-size:20px;">春眠不觉晓，</span><span style="font-size:25px; color:#FF6347;">处处闻啼鸟。</span></p>
        </div>
        <div class="poem-row">
            <p class="poem-title">白日依山尽</p>
            <p class="content"><span style="font-size:20px;">白日依山尽，</span><span style="font-size:25px; color:#FF6347;">黄河入海流。</span></p>
        </div>
    </div>
</body>
</html>

CSS 样式

我们为上述HTML添加一些基本的CSS样式来美化页面：

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #F9FAFB;
    margin: 0;
    padding: 0;
}
.poem-container {
    width: 80%;
    max-width: 600px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
.poem-row {
    width: calc(100% / 3 - 20px); /* 每行宽度分配 */
    min-height: 150px;
    margin-bottom: 20px;
    text-align: left;
}
.poem-title {
    font-weight: bold;
    margin-bottom: 5px;
}
.content {
    line-height: 1.5;
    word-break: break-all; /* 防止文字溢出 */
}

解释

HTML：我们在<div>元素内嵌套了多个<div>元素来表示每一首诗的内容。
CSS：
- .poem-container 定义了一个容器，用于布局这些诗歌。
- .poem-row 控制每首诗在一行内的布局，确保它们均匀分布。
- .poem-title 是诗歌标题的文字样式。
- .content 包含具体的诗句内容，并设置了合适的字体大小和颜色，以及适当的对齐方式。