制作在线诗集可以通过HTML搭建页面结构，配合CSS调整排版样式来实现，整个过程不需要复杂的后端技术，只需要掌握基础的标记语言和样式规则就能完成。
一、搭建基础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="style.css">
</head>
<body>
<div class="poem-container">
<h1 class="poem-title">春晓</h1>
<p class="poem-author">作者：孟浩然</p>
<div class="poem-content">
<p>春眠不觉晓</p>
<p>处处闻啼鸟</p>
<p>夜来风雨声</p>
<p>花落知多少</p>
</div>
</div>
</body>
</html>
二、编写CSS样式实现诗歌排版
通过CSS可以调整诗歌的字体、颜色、行间距、对齐方式等，让排版更符合诗歌的阅读习惯，提升视觉美感。
1. 基础样式设置
先设置页面的全局样式，统一字体和背景，避免默认样式影响排版效果。
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
/* 诗集容器样式 */
.poem-container {
max-width: 800px;
margin: 50px auto;
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
2. 诗歌内容专属样式
针对诗歌的标题、作者、正文内容分别设置样式，突出诗歌的层次感。
/* 诗歌标题样式 */
.poem-title {
text-align: center;
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
color: #2c3e50;
}
/* 作者样式 */
.poem-author {
text-align: center;
font-size: 16px;
color: #7f8c8d;
margin-bottom: 30px;
}
/* 诗歌正文样式 */
.poem-content p {
text-align: center;
font-size: 18px;
line-height: 2;
margin-bottom: 5px;
letter-spacing: 2px;
}
三、添加多首诗歌与响应式适配
可以在容器中继续添加其他诗歌内容，同时通过媒体查询实现响应式布局，让诗集在手机等小屏设备上也能正常展示。
1. 添加多首诗歌
直接在poem-container内部新增诗歌模块即可，结构保持一致。
<div class="poem-item">
<h1 class="poem-title">静夜思</h1>
<p class="poem-author">作者：李白</p>
<div class="poem-content">
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
</div>
2. 响应式样式调整
当屏幕宽度小于768px时，调整容器边距和字体大小，适配移动端阅读。
@media screen and (max-width: 768px) {
.poem-container {
margin: 20px 15px;
padding: 20px;
}
.poem-title {
font-size: 24px;
}
.poem-content p {
font-size: 16px;
line-height: 1.8;
}
}
四、常见问题与优化建议
- 如果诗歌中有特殊标点或者生僻字，可以单独为对应内容添加
span标签设置特殊样式 - 想要实现翻页效果，可以在页面底部添加页码按钮，通过JavaScript控制不同诗歌模块的显示隐藏
- 可以调整
letter-spacing属性的值，让诗歌的字符间距更符合传统排版习惯 - 背景色和文字颜色要注意对比度，避免影响阅读体验
注意：在HTML中书写标签时，所有标签都需要正确闭合，比如<div>标签需要对应</div>闭合标签，避免出现页面样式错乱的问题。