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

一、部分网页截图

二、部分源代码

    
    
    
    
    
    



    
    

        
        

            
            宫崎骏映画馆
        
        
        

            首页
            作者介绍
            创作背景
            作品欣赏
            

                千与千寻
                天空之城
            

            社会效果
            观众评价
        
    
    
    
    
    
    
    
    
    
    
    
    
版权所有 宫崎骏

三、部分样式

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