关于动漫的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 lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小马宝莉主页</title>
<link rel="stylesheet" href="css/styles.css">
<!-- 如果使用了自定义字体，可以在这里引入 -->
<!-- <link rel="stylesheet" href="fonts/custom-font.css"> -->
</head>
<body>
<div class="xmbl">
<header>
<div class="logo">
<img src="images/mlp-logo.png" alt="小马宝莉">
</div>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="juese.html">角色介绍</a></li>
<li><a href="gushi.html">故事剧情</a></li>
<li><a href="tupian.html">图片画廊</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</header>
<img src="images/banner4.jpg" alt="" width="1200px" height="500px">
<main>
<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>
</main>
<footer>
<p>版权所有 © 2024 小马宝莉</p>
</footer>
</div>
<!-- 如果使用了JavaScript，可以在这里引入 -->
<!-- <script src="scripts.js"></script> -->
</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; /* 鼠标悬停时背景色变深 */
}