宫崎骏的奇妙世界HTML+CSS+JS网页设计（动漫主题）——最美动漫网页设计作业（源码+报告+配套PPT）-CSDN博客

本文链接：https://blog.csdn.net/m0_71495714/article/details/141138989

一、网站策划

（一）建站目的以及功能定位

宫崎骏の奇妙世界是基于window操作系统平台下开发的，页面设计美观、简洁，功能全面，用户可以宫崎骏的相关信息以及作品集，用户根据自己的需求基本上能找到相对应的服务。操作简单，页面日后也会逐步进行需求迭代，不断修正和改进，持续优化，让它成为用户满意的一个网页。为宫崎骏动漫爱好者提供一个展示宫崎骏相关信息和资讯的平台。

（二）网站技术解决方案

Div+CSS+JavaScript、轮播图、鼠标滑过特效、Table、导航栏效果、banner、表单、二级页面等，视频、音频元素，同时设计了logo，基本期末作业所需的知识点全覆盖。

二、网站实现

（一）实现流程

1、实现导航部分和脚注部分,并以此为模板提供给其他子页面使用

2、实现首页轮播图

3、实现首页内容部分

4、实现子页面（宫崎骏简介）的内容部分

5、实现子页面（作品推荐）的banner部分

6、实现子页面（作品推荐）的内容部分

7、实现子页面（动漫人物分析）的电梯导航栏

8、实现子页面（动漫人物分析）的内容部分

9、实现子页面（联系我们）的banner

10、实现子页面（联系我们）的form表单部分

三、典型页面的代码实现

首页的实现：

轮播图的实现

效果图如下

HTML、CSS、JavaScript代码如下：

<!--轮播图部分-->
<section>
    <ul>
        <li><img src="images/p1.jpg" alt=""></li>
        <li><img src="images/p2.jpg" alt=""></li>
        <li><img src="images/p3.jpg" alt=""></li>
        <li><img src="images/p4.jpg" alt=""></li>
        <li><img src="images/p5.jpg" alt=""></li>
        <li><img src="images/p6.jpg" alt=""></li>
    </ul>
</section>

/*轮播图样式部分*/
section{
    /*轮播图盒子设置宽高*/
    width: 1300px;
    height: 400px;
    /*居中*/
    margin: 0 auto;
}
section>ul{
    /*设置轮播图图片集盒子的宽高以及相对定位*/
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    perspective:4000px;
}
section>ul>li{
    /*设置单个图片盒子的宽高*/
    width: 600px;
    height: 300px;
    /*设置绝对定位——水平垂直居中于ul*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -300px;
    /*给盒子设置圆角*/
    border-radius: 20px;
    overflow: hidden;
    /*过渡*/
    transition: all 0.5s linear;
    cursor: pointer;
}
section>ul>li>img{
    width: 100%;
    height: 100%;
}