原神风格博客静态页面设计，手写HTML/CSS/JS实现

项目要求学生使用纯手工编码实现，涵盖了HTML、CSS和JavaScript的技术栈。具体实现中，页面布局需要运用div盒子模型以及flex布局技术，同时包括瀑布流布局和定位技术（绝对定位和相对定位）的应用。此外，还包括了JavaScript在登录表单验证上的应用，以及简洁的下拉菜单设计和侧边栏手风琴效果的实现。页面风格定位为动漫游戏博客的小清新风格，通过正常流布局和浮动布局的综合运用，创造了直观且富有吸引力的用户界面。导航栏和网页logo设计利用左右浮动布局实现，而导航栏背景图片上的内容则采用了相对定位和绝对定位技术。" 知识点详细说明： 1. HTML + CSS + JavaScript纯手写 - HTML（HyperText Markup Language）是构建网页内容的骨架，负责页面的结构。 - CSS（Cascading Style Sheets）用来设计网页的视觉表现，包括布局、颜色、字体等样式。 - JavaScript（JS）是网页实现动态交互和数据处理的关键技术。 2. Div盒子布局 - DIV是HTML中的一个块级元素，可以用于创建分区或盒子模型。在布局中使用DIV可以实现更为灵活和复杂的页面结构设计。 3. Flex布局 - Flex布局是一种CSS布局模式，提供了一种更加高效的方式来对齐和分布容器内项目空间，即使项目大小未知或是动态变化的。 4. 瀑布流布局 - 瀑布流布局是一种网页设计模式，用于实现内容在垂直方向上连续排列，而每一项的高度可以不同，使得页面内容的展示有如瀑布般自然流动。 5. 绝对定位和相对定位 - 绝对定位（Absolute Positioning）允许你将元素放在页面上的任何位置，它会脱离正常的文档流。 - 相对定位（Relative Positioning）则允许你相对于元素的正常位置移动它。 6. JavaScript登录表单验证 - 在网页中，JavaScript经常被用于增强表单的用户体验，通过编写验证函数来确保用户输入的数据格式正确。 7. 简洁的下拉菜单 - 下拉菜单是网页中常见的导航组件，通常通过JavaScript和CSS共同实现其交互和样式效果。 8. 侧边栏手风琴效果 - 手风琴效果是一种通过点击触发，使元素展开或收起的交互效果，常用于侧边栏或内容区域的组织。 9. 动漫游戏博客小清新风格 - 风格设计是指网页的总体视觉感受和个性表达，小清新风格通常意味着色彩温和、设计简洁自然。 10. 正常流布局和浮动布局 - 正常流布局是指HTML元素按照其在代码中的顺序自然排列。 - 浮动布局（Float Layout）通过设置CSS的float属性，使得元素脱离正常流并靠向其容器的边缘。 11. 左右浮动 - 左右浮动是CSS中float属性的两种基本值，分别对应将元素向左或向右浮动。这在设计导航栏和页面布局时非常有用。 12. 导航栏和网页logo - 导航栏是网站中的关键部分，用于链接到网站的不同部分。网页logo则是品牌形象的体现，通常位于网站的左上角或中心位置。 13. 相对定位和绝对定位在背景图片上的应用 - 定位技术可以用来精确控制页面元素的位置，包括在背景图片上的特定区域放置文字或图标。 通过上述知识点的应用和实现，一个具备原神风格和动漫游戏博客特点的静态网页设计项目将被完成。该项目不仅要求学生掌握前端开发的基本技能，也要求他们能够灵活运用各种布局和交互技术来实现美观且功能完善的网页设计。