DEV Community
·
我从零开始构建了终极教育网站——第五天
💡
原文英文，约1700词，阅读约需6分钟。
📝
内容提要
昨天专注于周期性质，今天开始设计有机化学页面，创建基本HTML结构，添加交互元素和样式表，设置文章列表、主题卡片和3D分子查看器。接着实现汉堡菜单和文章搜索功能，最后创建结构相似的无机化学页面，复制部分代码并调整选择器。
🎯
关键要点
- 昨天专注于周期性质，今天开始设计有机化学页面。
- 创建基本HTML结构，添加交互元素和样式表。
- 设置文章列表、主题卡片和3D分子查看器。
- 实现汉堡菜单和文章搜索功能。
- 创建结构相似的无机化学页面，复制部分代码并调整选择器。
- 有机化学页面包含文章列表、关键主题和交互式分子查看器。
- 添加JavaScript以处理汉堡菜单和文章搜索功能。
- 无机化学页面结构与有机化学页面相似，包含文章列表和主题。
- 复制JavaScript代码以实现无机化学页面的基本功能。
- 后续计划包括添加内容、改进样式和增强交互性。
❓
延伸问答
今天我在教育网站上做了哪些设计工作？
今天设计了有机化学页面，创建了基本HTML结构，添加了交互元素和样式表。
有机化学页面包含哪些主要功能？
有机化学页面包含文章列表、关键主题和交互式分子查看器。
如何实现汉堡菜单和文章搜索功能？
通过JavaScript添加事件监听器来处理汉堡菜单的切换和文章搜索功能。
无机化学页面与有机化学页面有什么相似之处？
无机化学页面的结构与有机化学页面相似，包含文章列表和主题。
我如何为有机化学页面添加交互式元素？
通过使用MolGL库来实现3D分子查看器，并添加JavaScript代码来处理用户交互。
接下来我计划对网站进行哪些改进？
计划添加内容、改进样式和增强交互性。
➡️
