HTML5的静态网页设计作业

# 极昼镜像个人博客 Polar-Day-Image Blog ## 1. 说明 Description 这是一个基于**HTML5**、**CSS**、**JavaScript**的静态网页博客，项目完成时间为2020年。该项目是网页前端设计课程大学作业，只完成了很基础的几个网页和功能。该项目遵循GPL开源协议，可进行二次开发。 This is a static web blog based on **HTML5**, **CSS**, **JavaScript**, and the project was completed in 2020. This project is a university assignment for a web front-end design course, which only completes a few basic web pages and functions. The project follows the GPL protocol and can be developed for secondary purposes. **运行环境**： Chromium 99.0及以上，FireFox 116.0.3及以上，推荐显示分辨率 1920*1080。推荐项目编辑工具为VS Code或HBuilderX。 **Operating environment**: Chromium 99.0 and above, FireFox 116.0.3 and above, recommended display resolution 1920 * 1080. The recommended project editing tool is VS Code or HBuilderX. ## 2. 预览 Preview 以下为极昼镜像个人博客项目预览： The following is a preview of the Polar-Day-Image Blog: ### 2.1 欢迎页 Welcome Page 光标移至网页中部箭头处自动展开为“进入博客”按钮。 The cursor will automatically expand to the "Enter Blog" button when moved to the arrow in the middle of the webpage. <img width="919" alt="Snipaste_2023-08-21_15-54-29 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/91901860-7a84-474e-9b3b-0d12f423367e"> <img width="919" alt="Snipaste_2023-08-21_15-56-23 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/1510d8c0-a45b-46d4-bb72-3554f75c3236"> ### 2.2 博客主页 Blog Index 首页分为导航栏、轮播图、置顶文章、文章流以及插件卡片。 The homepage is divided into navigation bar, rotation chart, top article, article flow, and plugin card. <img width="919" alt="Snipaste_2023-08-21_15-58-35 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/1cb90e21-dd1e-4dd0-b95b-52c3aa1c3459"> <img width="919" alt="Snipaste_2023-08-21_15-58-57 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/3c4863da-0428-47fc-8ea7-3ea1943ea34d"> <img width="919" alt="Snipaste_2023-08-21_15-59-17 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/334cf732-579a-47bd-a1b4-45cdfb90f9d5"> ### 2.3 导航栏 Navigation Bar 导航栏分为主页、艺术家（文章、摄影、绘画、播客）、开发者（算法与数据结构、搭建网站、数据库、信息系统项目开发、机器学习）、玩家、页面（欢迎页、错误页）以及关于。 The navigation bar is divided into homepage, ARTIST (Essay, Photo, Draw, Podcast), DEVELOPER(Algorithm and Data Structure, Website Building, Database, Information System Project Development, Machine Learning), GAMER, PAGES (Welcome page, Error page), and ABOUT ME. <img width="960" alt="Snipaste_2023-08-21_15-59-39 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/235deea6-0fcc-4e37-95b1-86138e886260"> ### 2.4 二级子页面 Second Page 二级子页面包含各种分类内容。 The second page contains various classified content. <img width="919" alt="Snipaste_2023-08-21_15-59-54 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/b40ce26a-53c8-4855-b1e7-17ab1141b257"> <img width="919" alt="Snipaste_2023-08-21_16-00-58 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/6b89cb61-8303-4894-a7d4-a44640c31059"> <img width="919" alt="Snipaste_2023-08-21_16-01-12 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/a07932ab-fad9-4c33-b155-cdae4c2d7222"> <img width="919" alt="Snipaste_2023-08-21_16-01-26 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/aeb7df90-9ec8-4c12-a471-1204537069ab"> <img width="919" alt="Snipaste_2023-08-21_16-02-33 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/08ce4352-dc62-4e66-bbb1-d0abcabc9e34"> ### 2.5 文章页面 Page article 文章结尾处可进行评论。 Comments can be made at the end of the article. <img width="919" alt="Snipaste_2023-08-21_16-00-14 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/de0ea538-e8af-425b-84ea-b3e13e244f64"> <img width="919" alt="Snipaste_2023-08-21_16-00-29 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/eaa9c791-2d74-41d3-bea2-3311058ba8a1"> <img width="919" alt="Snipaste_2023-08-21_16-00-38 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/ade65fa9-70f9-4382-80b4-2d59148cb2b6"> ### 2.5 流媒体播放插件 Streaming Media Playback Plugin 文章内可插入流媒体。 Streaming media can be inserted into the article. <img width="300" alt="Snipaste_2023-08-21_16-02-03 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/36ad8bde-b116-491b-80b6-7c77bb770f47"> <img width="300" alt="Snipaste_2023-08-21_16-02-15 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/e8341d0f-e8d8-4d3a-abe2-8ee907a18351"> <img width="919" alt="Snipaste_2023-08-21_16-03-44 (大)" src="https://github.com/aeon20071/PolarDayImage_Blog/assets/142590267/bb75a201-c9d9-452c-a791-4de3fbc9851e"> ## 3. 碎碎念 Meaningless Words 由于采用静态页面仅有前端设计没有后端代码，故这个项目已经被放弃。目前此项目唯一的作用可能就是未来搭建我的个人博客时提供视觉参考。项目中使用的都是很简单很基础的方法，但我很喜欢当时用积木拼出高楼外壳的感觉。谨以此项目献于我的第一堂前端设计启蒙课。😽 Due to the use of static pages with only front-end design and no back-end code, this project has been abandoned. The only purpose of this project at present may be to provide visual references for building my personal blog in the future. The methods used in the project were all very simple and basic, but I really liked the feeling of using building blocks to piece together the shell of a tall building at that time. I would like to dedicate this project to my first front-end design enlightenment class. 😽