水豚噜噜个人角色展示网站

社交兴趣格调案例ID：244636

找不着北的么么叽.

2 年经验· 郑州工业应用技术学院

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

独立完成纯静态前端展示网站开发，全程基于 HTML5+CSS3 + 原生 JavaScript 实现，不依赖第三方框架，适配 PC 端流式响应式布局，是大二前端综合实训课程完整落地项目。
网站共搭建首页、角色档案、图片鉴赏、在线视频、留言、注册、登录 7 个页面，统一顶部导航栏实现页面互相跳转，底部统一版权栏保证全站视觉一致性，整体采用温柔清新粉黄配色，统一色彩、字体规范。页面结构搭建：使用 HTML5 语义化标签搭建各页面骨架，划分导航、轮播、内容区、表单、页脚模块化结构，代码分层清晰、注释规范，符合 W3C 标准。
样式布局与视觉优化：运用 Flex 流式布局完成页面排版，借助 CSS 变量统一全站配色；通过 transition、transform 实现图片悬停渐变、元素过渡动画；导航栏、卡片、登录注册表单均自定义圆角、边框、交互样式，统一文艺柔和设计风格。
原生 JS 交互功能开发：实现页面基础动态逻辑，包含登录 / 注册表单输入框交互、页面切换联动、图片浏览展示交互；为图片、按钮添加悬停动效，提升页面层次感与用户体验。
多页面协同开发：统一复用导航、页脚公共模块，保证全站布局、样式规范统一；拆分角色介绍、图集展示、用户表单三大业务模块，便于代码维护与后续功能扩展。
项目完整覆盖静态网站从页面规划、布局编写、交互实现到多页面联调全流程，锻炼了原生前端代码规范编写、布局适配、原生 JS 交互开发能力，夯实前端基础开发功底。
个人前端技术掌握情况
HTML5：熟练使用语义化标签搭建页面结构，合理划分页面模块化区域，遵循 W3C 开发规范，能独立完成多页面网站骨架搭建；
CSS3：精通 Flex 流式布局，掌握 CSS 变量统一管理主题色彩；熟练运用 transition、transform 制作过渡、悬停动画；可独立完成表单、卡片、图文排版、导航栏等通用页面组件样式开发，具备统一全站视觉风格的设计实现能力；
原生 JavaScript：无需第三方框架即可编写基础交互逻辑，熟练 DOM 操作、事件监听、表单交互控制，能实现页面切换、输入框、图片浏览等基础动态效果。