Web前端大作业-个人网页设计html+css+javascript（高分项目）

## 1. 说明 Description 这是一个基于**HTML5**、**CSS**、**JavaScript**的静态网页博客，项目完成时间为2020年。该项目是网页前端设计课程大学作业，完成了很基础的几个网页和功能，可进行二次开发。 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">