【Web网页大作业】改良中华诗词网（附代码链接）

为了冲个官方认证新星博主，发点库存

一、简介

本项目仅前端页面，模仿自中华诗词网。在其大致视觉效果不变的基础上，对其进行了结构的重构与CSS的改良

二、原网站效果及问题

1.原网站效果

2.存在的问题

• 技术栈相对落后
  没有使用最新的HTML5以及CSS3的技术，技术栈相对落后
• 没有做屏幕适配
  对于屏幕大小变更情况下会产生错位或其他显示异常的问题没有解决
  

三、改进方法

1.重构HTML

• 使用诸多如<nav>、<header>等HTML5的新标签
• 合并部分本应合并的div，拆分过于冗杂的div，重构页面设计
• 对部分元素进行HTML5化加工，如input标签的autofocus=“autofocus”

2.改良CSS

• 多个CSS文件，样式文件结构更清晰
• 部分CSS3写法改良
• 做好界面适配，修改已知的各种显示BUG

3.其他功能

• 重绘、自制网页LOGO
• 部分链接可点击跳转
• 另有多余制作古诗列表与古诗详情页面
• 自制了古代诗人的等页面
• 丰富了页面样式

四、成品截图（长图）

1.主页

2.列表页

3.详情页面

4.古代诗人页

五、项目特点

• 相较原网站优势
  • 项目完整、结构清晰、样式优美、主题明确
  • 充分运用HTML、CSS、JS相关知识，做到学以致用
  • 在原有网站的基础上，充分继承和发扬其优点
  • 经反复测试，修改若干已知前端BUG
• 美中不足:
  • 没有使用前端框架（本来想改成Vue项目的，后经考虑没有时间）
  • 没有后端【数据都是死数据】

六、源码链接

点击前往