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

作品介绍：

网页作品简介方面：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 和各个页面的链接，采用浮动布局实现左右排列。

html 复制代码

<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 样式：

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;
}

页脚设计

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

html 复制代码

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

2. 首页设计（index.html）

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

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

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

html 复制代码

<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）

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

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 样式：

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保持比例并填充容器。

html 复制代码

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

5. 登录与注册页面

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

登录页面表单验证代码：

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";
  }
}

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

javascript 复制代码

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";
  }
}

网站特色与亮点

统一的视觉风格：整个网站采用一致的配色方案和布局风格，红色作为主色调呼应《蜡笔小新》的活泼风格
响应式设计：通过 CSS 的媒体查询和弹性布局，确保网站在不同设备上都有良好的显示效果
交互体验优化：表单验证提供即时反馈，增强用户体验
语义化 HTML：使用合适的 HTML 标签，提升页面的可访问性和 SEO 友好性
模块化结构：代码结构清晰，便于维护和扩展

总结与展望

本项目通过实现《蜡笔小新》动漫主题网站，综合运用了 HTML、CSS 和 JavaScript 的相关知识，完成了一个功能完整、界面美观的多页面网站。在开发过程中，重点掌握了页面布局技巧、响应式设计原则和基本的前端交互实现方法。

未来可以考虑增加更多功能，如动漫剧集介绍、角色投票互动、评论区等，进一步提升网站的交互性和趣味性。同时，可以引入更多前端框架和工具，优化网站性能和开发效率。

通过本次实践，不仅巩固了前端基础知识，也提升了问题解决能力和项目开发经验，为今后更复杂的 Web 开发打下了基础。

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

运行效果

项目概述

技术栈说明

网站结构设计

页面设计与实现

1. 公共组件设计

导航栏设计

页脚设计

2. 首页设计（index.html）

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

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

5. 登录与注册页面

网站特色与亮点

总结与展望

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