【期末网页设计作业】HTML+CSS 唐诗学习网站主题的开发（附源码与效果演示）
作品介绍：
1.网页作品简介方面 ：HTML网站模板。主要有：首页人物简介 唐诗鉴赏 关于我 等总共 4 个页面html下载。
2.网页作品编辑：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、Vscode 、NotePAD 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、html div盒子布局、Table、导航栏效果、表单等。所需的知识点全覆盖。
4.获取完整源码：请关注联系或者打在评论上
作为期末作业，我选择了 "唐诗学习网站" 作为设计主题，将古典文化与现代网页技术相结合，既锻炼了前端开发技能，又加深了对传统文化的理解。本文将详细记录网站的设计思路、实现过程及技术要点，作为网页设计学习的实践总结。
部分效果：
一、项目背景与设计目标
1. 选题意义
唐诗作为中华文化的瑰宝，蕴含着丰富的历史价值和艺术魅力。设计一个唐诗学习网站，既能满足课程作业要求，又能实现文化传播的实际价值，是技术与文化结合的理想选题。
2. 核心目标
- 完成一个包含 4 个以上页面的完整网站
- 实现响应式布局，保证在不同设备上的显示效果
- 应用 HTML+CSS 基础技术，掌握页面布局核心原理
- 体现唐诗文化内涵，界面设计与主题风格统一
二、网站整体规划
1. 页面结构设计
根据唐诗学习的逻辑流程，规划了 4 个核心页面：
- 首页：唐诗概述与学习价值介绍
- 人物介绍：展示李白、杜甫等著名诗人信息
- 唐诗鉴赏：以图文形式呈现经典唐诗
- 喜欢的唐诗：个人推荐唐诗及赏析
2. 色彩方案设计
考虑到唐诗的文化属性，选择了以下色彩方案：
- 主色调：深蓝色系（#499bdee4）- 体现文化的深邃与厚重
- 辅助色：紫色（#5b4dc1）- 用于标题背景，增添古典韵味
- 中性色：白色、浅灰（#f4f8ff）- 作为背景色，保证内容清晰可读
3. 技术栈选择
- HTML5：语义化标签构建页面结构
- CSS3：实现样式设计与响应式布局
- 原生 JavaScript：未引入框架，专注基础技术实践
- 图片资源：唐诗相关意境图片，增强视觉表现力
三、页面实现详解（展示主要代码）
1. 公共组件设计
导航栏实现
所有页面采用统一的导航栏，使用 float 布局实现左右分布：
<header class="clearfix"> <a href="index.html" class="logo">唐诗学习网</a><ul class="nav"><li><a href="index.html">首页</a></li><li><a href="renwu.html">人物介绍</a></li><li><a href="tupian.html">唐诗鉴赏</a></li><li><a href="me.html">喜欢的唐诗</a></li></ul>
</header>
对应的 CSS 样式：
header {background: #499bdee4;line-height: 60px;padding: 0 15px;
}
header .logo {float: left;font-size: 24px;color: #fff;font-weight: bold;
}
header .nav {float: right;
}
header .nav li {width: 120px;text-align: center;font-size: 16px;display: inline-block;
}
页脚设计
简洁的页脚设计，强化品牌认知：
<footer><P>唐诗学习</P>
</footer>
footer {background: #499bdee4;line-height: 60px;text-align: center;color: #fff;
}
2. 首页设计（index.html）
首页采用 "概述 + 背景 + 学习意义" 的三段式结构，使用左图右文的布局方式：
<div class="con_top clearfix"><div class="pic"><img src="images/1.webp" /></div><div class="text"> <b>《唐诗》</b>唐诗是中华民族珍贵的文化遗产之一...</div>
</div>
通过 clearfix 解决浮动带来的父元素高度塌陷问题：
.clearfix::after {content: "";display: block;clear: both;
}
.con_top .pic {width: 300px;float: left;
}
.con_top .text {float: right;padding-right: 100px;width: 650px;line-height: 28px;
}
标题采用统一的样式设计，增强页面识别度：
.title {background: #5b4dc1;line-height: 40px;padding: 0 15px;margin: 20px 0;3. 人物介绍页（renwu.html）
采用卡片式布局展示诗人信息，每个诗人信息包含头像和详细介绍：
<ul class="renwu_box"><li><div class="pic"> <img src="images/libai.jpeg" /> </div><div class="text"> <b>李白</b><br>字号：太白、青莲居士、谪仙人 <br>李白（701年2月28日—762年12月）...</div></li><!-- 更多诗人信息 -->
</ul>
通过绝对定位实现图片与文字的排列：
.renwu_box li {position: relative;height: 260px;padding-bottom: 15px;border-bottom: 1px dashed #ccc;margin-bottom: 15px;
}
.renwu_box li .pic {width: 260px;height: 260px;position: absolute;left: 0;top: 0;
}
.renwu_box li .text {margin-left: 280px;font-size: 16px;line-height: 28px;
}
4. 唐诗鉴赏页（tupian.html）
采用响应式网格布局展示唐诗相关图片，实现不同屏幕尺寸下的自适应排列：
<ul class="pic_con clearfix"><li><div class="box"> <img src="images/gs1.webp" /> </div></li><li><div class="box"> <img src="images/gs2.jpg" /> </div></li><!-- 更多图片 -->
</ul>
CSS 网格布局实现：
.pic_con {margin: 0 -15px;
}
.pic_con li {float: left;width: 33.333%;box-sizing: border-box;padding: 15px;
}
.pic_con li img {width: 100%;height: 240px;object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}
5. 喜欢的唐诗页（me.html）
结合诗歌文本与赏析内容，采用与人物介绍页相似的布局结构，重点突出个人感悟与赏析内容：
<li><div class="pic"> <img src="images/gs1.webp" /> </div><div class="text"> <b>《使至塞上》</b><br>《使至塞上》是唐代诗人王维的一首边塞诗，我特别喜欢这首诗...</div>
</li>
四、技术难点与解决方案
1. 响应式布局实现
问题：在不同屏幕尺寸下保持页面美观解决方案：使用百分比宽度和盒模型计算，配合浮动布局实现自适应
.pic_con li {float: left;width: 33.333%; /* 三列布局 */box-sizing: border-box; /* 包含内边距和边框在宽度内 */padding: 15px;
}
2. 图片显示优化
问题：不同尺寸图片导致布局错乱解决方案：统一图片显示尺寸，使用 object-fit 属性保持图片比例
.pic_con li img {width: 100%;height: 240px;object-fit: cover; /* 图片覆盖容器，保持比例 */
}
3. 导航交互效果
问题：提升用户体验，明确当前位置解决方案：添加链接悬停效果，通过颜色变化反馈用户操作
.wrapin a:hover {color: red;font-weight: 700;
}
五、总结与反思
1. 收获与体会
通过本次网页设计实践，我掌握了：
- HTML 语义化标签的正确使用
- CSS 浮动布局与定位的核心原理
- 响应式设计的基本实现方法
- 网页整体风格统一的设计技巧
2. 不足与改进方向
- 交互效果较为简单，可增加 JavaScript 实现更丰富的交互
- 响应式设计可进一步优化，适配更多移动设备
- 可增加唐诗检索、背诵测试等功能模块
- 图片资源可添加懒加载功能，提升页面加载速度
3. 课程学习感悟
网页设计不仅是技术的堆砌，更是内容与形式的有机结合。本次唐诗学习网站的设计过程，让我深刻体会到 "内容为王，形式服务于内容" 的设计理念，也为今后的前端学习打下了坚实基础。
通过将传统文化与现代网页技术相结合，不仅完成了课程作业，更实现了文化传播的价值，这种技术与文化的融合正是 web 开发的魅力所在。
六、获取完整源码
请关注联系或者打在评论区