关于动漫的HTML网页设计作业——动漫网页(饼干警察5个页面)
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。
作品介绍
1.网页作品简介方面 ：日本动漫网页(5个页面)网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有：登录、注册、主页、动漫介绍、动漫列表 动漫时间表 等总共6个页面html下载。
2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）
3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。
4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）
一、作品演示
二、代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<title>巴拉巴拉小魔仙</title>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="wrapin">
<!--头部-->
<div class="carousel">
<div class="carousel-container">
<img src="images/banner_1.jpg" alt="图片1" class="carousel-image">
<img src="images/banner_4.jpg" alt="图片1" class="carousel-image">
<img src="images/banner_2.jpg" alt="图片1" class="carousel-image">
<img src="images/banner_3.jpg" alt="图片1" class="carousel-image">
</div>
<button class="prev" onclick="moveSlide(-1)">❮</button>
<button class="next" onclick="moveSlide(1)">❯</button>
</div>
<header>
<ul class="nav clearfix">
<li><a href="index.html">首页</a></li>
<li><a href="juqing.html">剧情故事</a></li>
<li><a href="tupian.html">精彩图集</a></li>
<li><a href="jingchai.html">剧情解说</a></li>
<li><a href="lianxi.html">联系我们</a></li>
</ul>
</header>
<!--内容-->
<section class="contact-info">
<h2>我们的联系方式</h2>
<p><strong>电子邮件:</strong> contact@example.com</p>
<p><strong>电话:</strong> +86-123-4567-890</p>
<p><strong>地址:</strong> xx市XX区XX路XX号</p>
</section>
<section class="contact-form">
<h2>给我们留言</h2>
<form action="submit_form.php" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>
<button type="submit">提交</button>
</form>
</section>
<!--底部-->
<footer>
<p>巴拉巴拉小魔仙</p>
</footer>
</div>
<script type="text/javascript" src="js/js.js"></script>
<audio controls="controls" autoplay="autoplay" hidden>
<source src="audio/song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>css
/* 联系信息部分的样式 */
.contact-info {
margin-bottom: 40px;
background: #ffffff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.contact-info h2 {
color: #35424a; /* 与header背景色相呼应 */
margin-top: 0;
}
.contact-info p {
margin: 10px 0;
}
/* 留言表单部分的样式 */
.contact-form {
background: #ffffff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.contact-form h2 {
color: #35424a;
margin-top: 0;
}
.contact-form label {
display: block;
margin-top: 10px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.contact-form button {
background: #35424a;
color: #ffffff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
margin-top: 520px;
}
.contact-form button:hover {
background: #495867; /* 鼠标悬停时背景色变深 */
}
// 循环处理
if (currentIndex < 0) {
currentIndex = totalSlides - 1; // 回到最后一张
} else if (currentIndex >= totalSlides) {
currentIndex = 0; // 回到第一张
}
// 移动轮播
const carouselContainer = document.querySelector('.carousel-container');
const offset = -currentIndex * 100; // 计算偏移量
carouselContainer.style.transform = `translateX(${offset}%)`;