很高兴您能点进来阅读！
一、网页介绍
网页介绍：此文章为设计“新海诚灾难三部曲”网页制作，运用HTML+CSS+JS制作，适用大学生web前端期末大作业，大学生网页设计源代码，画面美观，可后期自行修改，代码简单易懂，非常适合初学者学习使用。
编辑软件：网页代码简单，可使用任何HTML编辑软件（作者使用HBuilder进行编辑创作）
知识点运用：网页设计过程主要运用：Div+CSS、导航栏效果、按键效果、JS、视频、级别字体、超链接等所需知识点制作
二、网页效果
三、代码展示
1.HTML代码
首页HTML代码如下：
<body>
<div class="container">
<div id="slide">
<div class="item" style="background-image: url(img/合图.jpg);">
</div>
<div class="item" style="background-image: url(img/新海诚.png);">
<div class="content">
<div class="name">新海诚</div>
<div class="name1">XIN HAI CHENG</div>
<button><a href="zuozhejieshao.html">See more</a></button>
</div>
</div>
<div class="item" style="background-image: url(img/你的名字1.png);">
<div class="content">
<div class="name">你的名字。</div>
<div class="name1">君の名は。</div>
<button><a href="nidemingzi.html">See more</a></button>
</div>
</div>
<div class="item" style="background-image:url(img/天气之子1.png)">
<div class="content">
<div class="name">天气之子</div>
<div class="name1">天気の子</div>
<button><a href="tianqizhizi.html">See more</a></button>
</div>
</div>
<div class="item" style="background-image:url(img/铃芽之旅1.png)">
<div class="content">
<div class="name">铃芽之旅</div>
<div class="name1">すずめの戸締まり</div>
<button><a href="lingyazhilv.html">See more</a></button>
</div>
</div>
</div>
<div class="buttons">
<div class="s_button"><</div>
<div class="s_button">></div>
</div>
</div>
</body>子网页代码如下（只展示一个子网页HTML代码，其他子网页HTML代码如同，其他修改图片文字即可。作者界面无精彩视频介绍，将“box2-4”整个div删除即可）：
<body>
<div class="box">
<div class="box1">
<div class="box1-1">
<ul>
<li> <img src="img/你的名字1.png"></img> </li>
</ul>
</div>
</div>
<header>
<ul class="daohangtiao">
<li><a href="index.html">首页</a></li>
<li><a href="zuozhejieshao.html">新海诚</a></li>
<li><a href="nidemingzi.html">你的名字。</a></li>
<li><a href="tianqizhizi.html">天气之子</a></li>
<li><a href="lingyazhilv.html">铃芽之旅</a></li>
</ul>
</header>
<div class="box2">
<div class="box2-1">
<div class="text">
<h2>你的名字。</h2><br>
<P> 《你的名字。》是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影。作品于2016年8月26日在日本上映。中国内地于2016年12月2日上映。作品讲述了男女高中生在梦中相遇，并寻找彼此的故事。<br>
<br>
故事发生的地点是在每千年回归一次的彗星造访过一个月之后，日本某个深山的乡下小镇。在这里女高中生三叶每天都过着忧郁的生活，而她烦恼的不光有担任镇长的父亲所举行的选举运动，还有家传神社的古老习俗。在这个小小的城镇，周围都只是些爱瞎操心的老人。为此三叶对于大都市充满了憧憬，甚至幻想着“下辈子让我生做一个东京帅哥吧！”</P>
</div><br>
<div class="pic"> <img src="img/你的名字3.png"/> </div>
</div>
<div class="box2-2">
<p> </p><br>
<h2>影片评价</h2>
</div>
<div class="pingjia">
<div class="text">
<p> “只要记住你的名字，不管你在世界的哪个地方，我一定会，去见你。”</p>
<p> “ 就算我忘记了你的名字，我也一定会把你的感觉深深印在脑海里，然后在汹涌的人潮里，一眼认出你;如果可以，真想拥抱你。世间所有的相遇，大概真的就是久别重逢。”</p>
<p> 在时间的洪流中，我们渺小如尘埃，但我们可以用力拥抱着彼此，珍惜每一次相遇的机会。即使彼此分隔两地，即使彼此处于不同的时空，即使彼此遗忘对方的名字，但心底的思念却在加深我们的羁绊，指引着我们在正确的时间再次相遇。时间、距离、生死、记忆，在我们对彼此的思恋之间不会成为阻碍，在最终的相遇中都将转化为更加炽烈的爱意。或许对于“三叶”（“泷”）来说，对方就是自己跨过生死也要拥抱的人。</p>
</div>
</div>
<div class="box2-3">
<div class="tupian">
<h2>精彩图集</h2>
</div>
<ul class="clearfix">
<li><img src="img/你的名字6.png"/></li>
<li><img src="img/你的名字7.png"/></li>
<li><img src="img/你的名字4.png"/></li>
</ul>
</div>
<div class="box2-4">
<div class="shipin">
<h2>精彩视频</h2>
</div>
<video src="img/你的名字.mp4" controls="controls" width="100%" ></video>
</div>
</div>
<footer>
<p>你的名字。</p>
</footer>
</div>
</body>2.CSS代码
首页CSS代码如下：
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
background: #eaeaea;
overflow: hidden;
}
.container{
width:100%;
height: 100%;
position: absolute;
padding: 50px;
box-shadow: 0 30px 50px #dadada;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#slide{
width: -webkit-max-content;
margin-top: 50px;
}
.item{
width: 200px;
height: 300px;
background-position: 50%,50%;
display: inline-block;
background-size: cover;
position: absolute;
top: 58%;
border-radius:20px;
box-shadow: 0 30px 50px $505050;
transition: .5s;
}
.item:nth-child(1),
.item:nth-child(2){
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
box-shadow: none;
}
.item:nth-child(3){
left: 50%;
}
.item:nth-child(4){
left: calc(50% + 220px);
}
.item:nth-child(5){
left: calc(50% + 440px);
}
.item .content{
width: 300px;
position: absolute;
left: 100px;
top: 50%;
transform: translateY(-50%);
font-family: "微软雅黑";
color: #000;
display: none;
}
.item:nth-child(2) .content{
display: block;
}
.item .name{
font-size: 60px;
font-weight: bold;
opacity: 0;
animation: showcontent 1s ease-in-out 1 forwards;
}
.item .name1{
font-size: 30px;
margin: 20px 0;
opacity: 0;
animation: showcontent 1s ease-in-out 0.3s 1 forwards;
}
.item button{
padding: 10px;
border: none;
opacity: 0;
animation: showcontent 1s ease-in-out 0.6s 1 forwards;
}
@keyframes showcontent{
from{
opacity: 0;
transform: translateY(100px);
filter: blur(20px);
}
to{
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
.buttons{
width: 100%;
position: absolute;
bottom: 50px;
margin-left: -50px;
text-align: center;
}
.s_button{
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: gray;
background-color: #fff;
font-size: 25px;
border-radius: 50%;
font-weight: bold;
border: 1px solid #555;
margin: 0 25px;
transition: .5s;
}
.s_button:hover{
cursor: pointer;
background-color: #ccc;
}
</style>子网页代码如下（只展示一个子网页CSS代码，其他子网页CSS代码如同）：
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
font-size: 14px;
position: relative;
padding-top: 50px;
padding-bottom: 50px;
}
img {
border: none;
}
a {
cursor: pointer;
color: #333;
text-decoration: none;
outline: none;
}
ul {
list-style-type: none;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.box {
width: 1000px;
margin: auto;
}
header {
height: 50px;
border-bottom: 1px solid #ccc;
}
.daohangtiao li {
line-height: 50px;
float: left;
width: 20%;
text-align: center;
font-size: 16px;
}
.box1 {
display: block;
}
.box1 img {
width: 100%;
display: block;
}
.box1 {
width: 100%;
height: 560px;
overflow: hidden;
position: relative;
}
.box1-1 ul li {
width: 100;
height: 560px;
position: relative;
overflow: hidden;
}
.box1-1 ul li img {
display: block;
width: 100%;
height: 100%;
}
.box1-1 ul li h2 {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
background: rgba(125,125,120,.4);
padding-right: 500px;
font-size: 15px;
line-height: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: normal;
}
.box2 {
padding: 15px;
}
.box2-1 .text {
float: left;
width: 60%;
line-height: 26px;
}
.box2-1 .pic {
float: right;
width: 38%;
margin-top: 20px;
}
.box2-1 .pic img {
width: 100%;
}
.box2-2 {
padding: 20px 0;
}
.box2-2 h2 {
font-size: 20px;
}
.box2-3 ul {
margin: 0 -15px;
}
.box2-3 ul li {
width: 33.33%;
float: left;
padding: 15px;
box-sizing: border-box;
}
.box2-3 ul li img {
width: 100%;
height: 200px;
object-fit: cover;
}
.pingjia {
line-height: 26px;
font-size: 14px;
padding-bottom: 30px;
}
.shipin {
line-height: 26px;
font-size: 14px;
padding-bottom: 30px;
}
footer {
background: #282828;
text-align: center;
color: #fff;
line-height: 50px;
}
</style>3.JS代码
首页JS代码如下（代码为ChatGPT3.5生成）：
document.addEventListener("DOMContentLoaded", function () {
// 检查是否存在具有类名's_button'的元素
let sButtons = document.querySelectorAll('.s_button');
if (sButtons.length >= 2) {
// 为具有类名's_button'的第二个元素添加点击事件
sButtons[1].onclick = () => {
let lists = document.querySelectorAll('.item');
if (lists.length > 0) {
document.querySelector('#slide').appendChild(lists[0]);
}
};
// 为具有类名's_button'的第一个元素添加点击事件
sButtons[0].onclick = () => {
let lists = document.querySelectorAll('.item');
if (lists.length > 0) {
document.querySelector('#slide').prepend(lists[lists.length - 1]);
}
};
}
});将JS运用到首页HTML代码中：
<script src="js/script.js"></script>四、源代码链接
链接：https://pan.baidu.com/s/1VHp5TQpJW0hjX8qCrcBzlw?pwd=1234
五、交流学习
你的支持就是我创作的动力
以上内容技术相关问题可以互动学习交流，不足也可提出改进
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
