宫崎骏作品网站搭建-CSDN博客

本文链接：https://blog.csdn.net/qq_41101110/article/details/128311690

一、部分网页截图

二、部分源代码

<!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')