HTML期末学生大作业-宫崎骏动漫网站11个页面html+css+javascript

一、部分网页截图

二、部分源代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宫崎骏映画馆</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="./public/favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 头部导航栏 -->
    <div class="nav">
        <!-- 用户头像部分 -->
        <div class="user">
            <img src="./image/userLogo.jpg" alt="用户头像">
            <span style="font-size:12px; margin-left: 10px;">宫崎骏映画馆</span>
        </div>
        <!-- 控制按钮 -->
        <div class="control">
            <a class="a1">首页</a>
            <a class="a2">作者介绍</a>
            <a class="a3">创作背景</a>
            <a class="a4">作品欣赏</a>
            <div class="guoxinye-select2">
                <a>千与千寻</a>
                <a>天空之城</a>
            </div>

            <a class="a5">社会效果</a>
            <a class="a6">观众评价</a>
        </div>
    </div>
    <!-- 版心 -->
    <iframe src="./index-iframe.html" frameborder="0" class="index-if"></iframe>
    <iframe src="./author.html" frameborder="0" class="author-if"></iframe>
    <iframe src="./background.html" frameborder="0" class="cartoon-if"></iframe>
    <iframe src="./cartoon.html" frameborder="0" class="bg-if"></iframe>
    <iframe src="./qyqx.html" frameborder="0" class="qyqx-if"></iframe>
    <iframe src="./tkzc.html" frameborder="0" class="tkzc-if"></iframe>
    <iframe src="./effect.html" frameborder="0" class="effect-if"></iframe>
    <iframe src="./eval.html" frameborder="0" class="eval-if"></iframe>
    <!-- 底部 -->
    <div class="footer"><span>版权所有 宫崎骏</span></div>
</body>
<script src="./js/index.js"></script>

</html>

三、部分样式

ul {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f1f1f1;
}

a {
    color: #000;
    text-decoration: none;
    font-size: 12px;
}

ul li {
    list-style: none;
}

a:hover {
    color: red;
    cursor: pointer;
}

.nav {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 5px 5px 5px #ccc;
}

.user {
    display: flex;
    align-items: center;
}

.nav img {
    width: 35px;
    height: 35px;
    border-radius: 25%;
}

.control {
    width: 500px;
    display: flex;
    justify-content: space-between;
}

.footer {
    width: 100%;
    height: 35px;
    background-color: #000;
    position: fixed;
    bottom: 0;
    left: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    margin: 0 auto;
    margin-top: 70px !important;
    width: 70%;
    /* background-color: skyblue; */
    margin-top: 50px;
    margin-bottom: 35px;
}

.swiper {
    margin: 0px auto;
    width: 100%;
    height: 400px;
    /* background-color: #91b; */
}

.swiper-slide img {
    width: 100%;
    height: 100%;
}

.authorName {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.authorName span {
    margin-top: 20px;
    display: block;
    height: 50px;
    line-height: 27px;
    font-size: 24px;
    font-weight: 700;
}

.authorDetails {
    background-color: #fff;
    width: 100%;
    display: flex;
}

.authorDetails img {
    display: block;
    padding: 20px;
    width: 45%;
    height: 300px;
}

.authorText {
    margin-top: 25px;
    padding-right: 10px;
}

.authorText p {
    font-size: 14px;
}

.longmao {
    background-color: #fff;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.longmao img {
    width: 400px;
    height: 240px;
}

.longmao div {
    flex: 1;
    margin-top: 10px;
}

.CTs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 60px;
    width: 100%;
}

.CTs li {
    margin: 0;
    padding: 0;
    width: 100%;
    margin-right: 18px;
}

.CTs li:nth-child(3) {
    margin: 0;
}

.CTs li img {
    width: 100%;
}

.LM-detail {
    margin: 10px;
    display: block;
}

iframe {
    width: 100%;
    height: 900px;
    display: none;
}

.a4 {
    position: relative;
    display: block;
}

.guoxinye-select2 {
    text-align: center;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 3vw;
    height: 5vh;
    border-radius: 10%;
    background-color: #ccc;
    position: absolute;
    top: 35px;
    left: calc(70% + 6px);
}

.guoxinye-select2 a {
    font-size: 12px;
    font-style: normal;
    text-align: center;
    display: block;
    width: 90%;
    height: 40%;
}

.guoxinye-select2 a:hover {
    color: red;
    cursor: pointer;
}

四、部分Javascript

let iframes = document.querySelectorAll('iframe')
let allA = document.querySelectorAll('a')
iframes[0].style.display = 'block'
allA[0].style.color = 'red'
allA.forEach((a, i) => {
  a.onclick = function () {
    allA.forEach(item => {
      item.style.color = '#000'
    })
    a.style.color = 'red'
    iframes.forEach(item => {
      item.style.display = 'none'
    })
    iframes[i].style.display = 'block'
  }
})

let footer = document.querySelector('.footer')
if (iframes[1].style.display == 'block') {
  footer.style.display = 'none'
}

const select2 = document.querySelector('.guoxinye-select2')
select2.style.display = 'none'
allA[3].onmouseenter = function () {
  select2.style.display = 'flex'
}
/* allA[3].onmouseleave = function () {
  select2.style.display = 'none'
} */
select2.onmouseleave = function () {
  select2.style.display = 'none'
}
const tkzc = document.querySelector('.tkzc-if')
对于这个HTML网页设计与制作的大作业,我会给你一些建议和思路,帮助你完成这个以宫崎骏和《你的名字》为灵感的项目。 1. 网页结构: - 使用div+CSS进行布局设计 - 可以考虑以下主要部分: - 头部(导航栏) - 主体内容区 - 页脚 2. 主题设计: - 结合宫崎骏动画和《你的名字》的元素 - 使用柔和的色调和梦幻的风格 - 添加一些动画电影中的经典场景或人物插画 3. 内容布局: - 创建一个banner区域,展示宫崎骏和《你的名字》的相关图片 - 制作一个关于宫崎骏和《你的名字》的简介部分 - 添加一个作品展示区,可以展示宫崎骏的经典作品和《你的名字》的精美画面 4. 交互效果: - 使用JavaScript制作一个轮播图,展示宫崎骏的经典作品和《你的名字》的精彩瞬间 - 添加一些悬停效果,例如图片放大或文字变色 - 可以考虑加入一些简单的动画效果,增强用户体验 5. 响应式设计: - 使用CSS媒体查询确保网页在不同设备上都能良好显示 6. 代码结构: - 使用语义化的HTML标签 -CSSJavaScript代码分别放在独立的文件中 - 添加适当的注释,提高代码可读性 7. 优化: - 压缩图片文件,减小网页体积 - 检查网页的加载速度和性能 示例代码片段(轮播图部分): ```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> <style> /* 轮播图样式 */ .carousel { position: relative; max-width: 800px; margin: auto; overflow: hidden; } .carousel img { width: 100%; display: none; } .carousel img.active { display: block; } </style> </head> <body> <div class="carousel"> <img src="image1.jpg" class="active" alt="图片1"> <img src="image2.jpg" alt="图片2"> <img src="image3.jpg" alt="图片3"> </div> <script> // 简单的轮播图脚本 let currentIndex = 0; const images = document.querySelectorAll('.carousel img'); const totalImages = images.length; function showNextImage() { images[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % totalImages; images[currentIndex].classList.add('active'); } setInterval(showNextImage, 3000); // 每3秒切换一次图片 </script> </body> </html> ``` 这个示例展示了如何使用div+CSS进行布局,以及如何使用简单的JavaScript代码实现图片轮播效果。你可以在此基础上进行扩展和美化。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT--精英联盟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值