# web design **Repository Path**: rubbish-dump/web-design ## Basic Information - **Project Name**: web design - **Description**: web 课程设计 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2024-12-15 - **Last Updated**: 2025-06-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 403B Web Design ## 素材：原神 ## 制作：403B --- ## 枫丹风格背景PPT介绍 --- ## 目录 1. Launcher & Index仿若无因飘落的轻雨 2. 向深水中的晨星 3. 雨轻的落飘因无若仿 4. 星晨的中水深向 --- ## 仿若无因飘落的轻雨 ### 01. Launcher 页面介绍这个页面以全屏视频背景和激励性口号“一次只做一件事，做到最好！”为核心，旨在吸引用户的注意力。页面设计简洁现代，使用了视口单位vh来确保响应式布局，适应不同设备。我们还巧妙地运用了CSS动画，比如按钮悬停时的缩放和背景模糊效果，增强了用户的互动体验。页面底部提供了外网部署链接和项目Gitee仓库，方便用户进一步探索和了解我们的工作。 --- ## 仿若无因飘落的轻雨 ### 01. Index 页面介绍首先，我们的网站主页采用了一个简洁而直观的导航栏设计。导航栏位于页面顶部，包含网站主页、入门指南、相关角色、原神活动等链接，方便玩家快速找到他们感兴趣的内容。此外，我们还提供了登录和注册链接，方便玩家加入我们的社区。 --- ## 使用ul li来提高网页 - 语义化 - 样式化 - 结构化 - 可扩展性为每个图片都设置了鼠标悬停动画。 --- ## 我们还特别设计了一个“直播间”板块通过滚动的图片列表，展示游戏的最新动态和活动，保持内容的更新和活力。这段代码通过`@keyframes`定义了一个水平滚动的动画效果，`.imgList`中的每个`.img2`元素将以18秒为周期，无限循环地从右向左滚动。 --- ## 最后，我们的网站底部包含了版权信息 --- ## 步骤1 在``标签中输入代码，构建页眉的结构，和之前的界面一样。 --- ## 步骤2 插入图片，效果如下。 --- ## 步骤3 创建一个全屏的背景区域，可以放置图片或其他内容。创建一个具有特定大小和位置的容器，其子元素在水平方向上均匀分布。 --- ## 这些样式通常用于增强用户界面的交互性和视觉效果例如，当用户将鼠标悬停在列表项上时，遮罩层会变得更加明显，提示用户可以点击；图片元素会填充其父元素的空间，并带有圆角和阴影效果；而特定菜单项的背景颜色会改变，以突出显示。 --- ## 效果如下 --- ## 插入一段GIF动画 ### 03. Login界面登录界面，左右各插入一个GIF动画包含标题，用户名输入框，密码输入框，登录按钮和忘记密码链接。其中，登录按钮设置了鼠标悬停效果。 --- ## 效果如果所示 --- ## 点击原神启动后，设置了一个登录成功的弹窗使用js实现了弹窗的效果。 --- ## 效果如图 --- ## 03. Login界面 --- ## 枫丹廷最值得一看的演出除了「欧庇克莱歌剧院」的审判，当属林尼与琳妮特的魔术节目。谢谢观赏403B WebDesign。 --- ## 感谢观看