当前位置：首页 > news >正文

【期末网页设计作业】HTML+CSS+JavaScript 蜡笔小新动漫主题网站设计与实现（附源码）

news 2025/11/9 7:00:45

作品介绍：

网页作品简介方面：HTML 网站模板。主要有：首页、人物介绍、图片鉴赏、我的介绍、登录、注册等总共 6个页面 html 下载。
网页作品编辑：此作品为学生个人主页网页设计题材，代码为学生水平 html+css 布局制作，作品下载后可使用任意 HTML 编辑软件（如：DW、HBuilder、Vscode、NotePAD、Sublime、Webstorm、Notepad++ 等任意 HTML 软件编辑修改网页）。
网页作品技术：Div+CSS、JavaScript 表单校验特效、Table、导航栏效果、表单、盒子布局等等。所需的知识点全覆盖。
获取完整源码：请关注私信或者打在评论上

运行效果

项目概述

本次期末网页设计作业以经典动漫《蜡笔小新》为主题，采用 HTML、CSS 和 JavaScript 技术栈开发了一个包含多个页面的动漫主题网站。网站整体风格统一，功能完整，涵盖了首页介绍、人物角色展示、图片鉴赏、个人简介以及用户登录注册等功能模块，适合作为初学者的前端实践项目。

技术栈说明

HTML5：构建页面结构，使用语义化标签提升页面可读性
CSS3：负责页面样式设计，包括布局、颜色、字体等视觉呈现
JavaScript：实现表单验证等交互功能

网站结构设计

网站采用多页面结构设计，主要包含以下页面：

首页（index.html）：网站入口，展示《蜡笔小新》基本介绍
人物介绍（renwu.html）：展示主要角色信息
图片鉴赏（tupian.html）：展示动漫相关图片
我的简介（me.html）：展示个人喜欢的文学作品
登录页面（login.html）：用户登录功能
注册页面（register.html）：用户注册功能

页面设计与实现

1. 公共组件设计

导航栏设计

所有页面采用统一的导航栏设计，使用红色作为主色调，搭配白色文字，突出显示网站主题。导航栏包含网站 logo 和各个页面的链接，采用浮动布局实现左右排列。

<header class="clearfix"> <a href="index.html" class="logo">蜡笔小新</a><ul class="nav"><li><a href="index.html">首页</a></li><li><a href="renwu.html">人物介绍</a></li><li><a href="tupian.html">图片鉴赏</a></li><li><a href="me.html">我的简介</a></li><li><a href="login.html">登录</a></li><li><a href="register.html">注册</a></li></ul>
</header>

对应的 CSS 样式：

header {background: #cf2212;line-height: 60px;padding: 0 15px;
}
header .logo {float: left;font-size: 24px;color: #fff;font-weight: bold;line-height: 60px;
}
header .nav {float: right;
}
header .nav li {width: 120px;text-align: center;font-size: 16px;display: inline-block;
}
header .nav li a {color: #fff;
}

页脚设计

页脚采用与导航栏相同的红色背景，居中显示网站名称，保持整体风格一致性。

<footer><p>蜡笔小新</p>
</footer>

2. 首页设计（index.html）

首页作为网站的入口，包含三个主要部分：

横幅图片：展示《蜡笔小新》相关主题图片
动漫简介：介绍《蜡笔小新》的基本信息
创作背景：介绍作品的创作由来
剧情简介：概述动漫的主要剧情

采用浮动布局实现文字与图片的混排效果，使用.clearfix解决浮动带来的布局问题。

<div class="con_top clearfix"><div class="pic"><img src="images/quanjia.jpg" /></div><div class="text"> <b>《蜡笔小新》</b>是由日本漫画家臼井仪人创作的漫画。 <br><br>1990年8月，在《weekly漫画action》上开始连载。1992年，根据漫画改编的同名动画在朝日电视台播出。2010年7月16日，臼井仪人遗作《蜡笔小新》第50卷出版。在作者臼井仪人去世后，作品由"臼井仪人&UY工作室"沿袭原作风格继续创作。 <br><br></div>
</div>

3. 人物介绍页（renwu.html）

人物介绍页采用列表布局，每个列表项包含角色图片和角色说明两部分，使用绝对定位控制图片位置，文字部分设置左边距避开图片区域。

<ul class="renwu_box"><li><div class="pic"> <img src="images/renwu1.jpg" /> </div><div class="text"> <b>野原新之助</b><br>美伢、广志之子，小葵之兄。 <br>住在春日部郊区某住宅区一栋二层小平房。B型。喜欢漂亮的姐姐和辣妹。性格是我行我素。擅长的技能是"屁股外星人""大象"。 </div></li><!-- 其他角色... -->
</ul>

对应的 CSS 样式：

.renwu_box li {position: relative;height: 260px;padding-bottom: 15px;border-bottom: 1px dashed #ccc;margin-bottom: 15px;
}
.renwu_box li .pic {width: 260px;height: 260px;position: absolute;left: 0;top: 0;
}
.renwu_box li .text {margin-left: 280px;font-size: 16px;line-height: 28px;color: #333;
}

4. 图片鉴赏页（tupian.html）

图片鉴赏页采用网格布局，将图片按每行 3 张的方式排列，使用 CSS 的box-sizing: border-box属性确保布局的一致性，图片使用object-fit: cover保持比例并填充容器。

<ul class="pic_con clearfix"><li><div class="box"> <img src="images/pic_01.jpg" /> </div></li><!-- 其他图片... -->
</ul>

5. 登录与注册页面

登录和注册页面采用居中布局，使用白色背景的表单容器，配合阴影效果增强立体感。通过 JavaScript 实现表单验证功能，包括必填项检查、邮箱格式验证、密码强度验证等。

登录页面表单验证代码：

function validateForm() {var username = document.getElementById("username").value;var password = document.getElementById("password").value;var errorMessage = document.getElementById("error-message");// 检查用户名和密码是否为空if (username === "" || password === "") {errorMessage.textContent = "用户名和密码都是必填字段";document.getElementById("username").style.border = "1px solid red";document.getElementById("password").style.border = "1px solid red";} else {// 模拟登录成功，跳转至首页window.location.href = "index.html";}
}

注册页面增加了更多验证逻辑：

function validateForm() {var username = document.getElementById("username").value;var email = document.getElementById("email").value;var password = document.getElementById("password").value;var confirmPassword = document.getElementById("confirmPassword").value;var errorMessage = document.getElementById("error-message");// 检查是否所有字段都已填写if (username === "" || email === "" || password === "" || confirmPassword === "") {errorMessage.textContent = "所有字段都是必填的。";} else if (!isValidEmail(email)) {errorMessage.textContent = "无效的电子邮件地址。";} else if (password !== confirmPassword) {errorMessage.textContent = "密码不匹配。";} else if (password.length < 6 || !containsSpecialCharacter(password)) {errorMessage.textContent = "密码不符合要求（至少6位字符，必须包含一个特殊字符）。";} else {// 模拟成功注册，跳转至首页window.location.href = "index.html";}
}