HTMLCSS实现异环网站，期末web作业

   

本网站是我在学习前端时敲得，仅供学习使用。

 这段代码是一个完整的 HTML 网页项目，包含 HTML、CSS 和 JavaScript 部分，用于构建一个名为 “异环” 的网页。网页具备头部导航栏、主体视频展示、图片交互元素、音乐播放控制、视频弹窗播放以及底部信息展示等功能。

代码详细分析

1. HTML 部分

  
  
  
  
  
  
  
  
  



  

    

      

        
      
      

        

          
首页
          
角色介绍
          
都市映像
          
情报速递
          
加入我们
        
      
      

        

        

        
      
    
  
  

    

      

        
      

      

        

          
        
      

      

        

        

        

      

      

        

          

        
      
      

        

          
        
      
      

        

          
        
      
    
  
  
  

    
  
  

    

      

        

          

          

          

          

          

          

          

          

        
      
      

        
      
      

        

        

      
    
  
  

• 头部（）：

  • 设置字符编码为 UTF - 8，并配置视口以实现响应式设计。
  • 引入谷歌字体 ZCOOL QingKe HuangYou，为网页提供独特的字体样式。
  • 链接外部 CSS 文件 index.css，用于定义网页的样式。

• 主体（）：

  • 头部导航栏（
    ）：

    • 左侧展示网站 logo 图片。
    • 中间是导航菜单，包含首页、角色介绍、都市映像、情报速递和加入我们等链接。
    • 右侧有一个音乐播放控制按钮和一个音频元素，音频可循环播放。
  • 主体内容（
    ）：

    • 顶部有一个全屏循环播放的静音视频作为背景。
    • 包含多个部分，有图片展示区域、视频触发区域、角色引导图片等。
  • 视频覆盖层（.video - overlay）：用于在点击视频触发区域时弹出视频播放窗口，视频可控制播放。
  • 底部（
    ）：分为左、中、右三个部分，左侧有多个图标链接，中间预留图片展示区域，右侧有一个占位元素和一个图片。

• JavaScript 部分：

  • 音乐控制：通过点击音乐按钮控制音乐的播放和暂停，同时切换按钮的背景位置以显示不同状态。
  • 视频控制：点击视频触发区域，将小视频的源复制到覆盖层的视频中，显示覆盖层并播放视频；点击覆盖层空白处可关闭视频。
  • 2. CSS 部分

  • * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "ZCOOL QingKe HuangYou", "Courier New", Courier, monospace;
      font-size: 1rem;
      font-weight: normal;
    }
    
    body {
      overflow: hidden;
    }
    
    body header {
      box-shadow: 2px 2px 2px 1px rgba(29, 29, 29, 0.5);
    }
    
    body header nav.nav-wrapper {
      width: 100%;
      display: flex;
      background-size: cover;
      background: #1d1d1d url(https://yh.wanmei.com/images/cover240718/header.png) no-repeat right top;
      height: 8.3vh;
    }
    
    body header nav.nav-wrapper section.left {
      display: flex;
      justify-content: space-around;
      flex: 2 1 100px;
      width: 20%;
    }
    
    body header nav.nav-wrapper section.left img {
      padding: 1rem;
      width: 40%;
      height: 110%;
    }
    
    body header nav.nav-wrapper section.middle {
      display: flex;
      flex: 7 1 700px;
      width: 70%;
      align-items: center;
      justify-content: center;
    }
    
    body header nav.nav-wrapper section.middle ul {
      width: 75%;
      display: flex;
      list-style-type: none;
      justify-content: space-around;
    }
    
    body header nav.nav-wrapper section.middle ul {
      position: relative;
      /* 为伪元素定位做准备 */
      z-index: 1;
      /* 确保内容在背景之上 */
    }
    
    /* 添加三个背景层作为伪元素 */
    body header nav.nav-wrapper section.middle ul::before,
    body header nav.nav-wrapper section.middle ul::after,
    body header nav.nav-wrapper section.middle ul li:first-child::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      /* 确保可以点击下面的链接 */
    }
    
    body header nav.nav-wrapper section.middle ul li a {
      text-decoration: none;
      color: #a7a7a7;
      font-size: 1.3rem;
    }
    
    body header nav.nav-wrapper section.middle ul li a.active {
      color: aqua;
      font-size: 1.1rem;
      text-decoration: none;
    }
    
    body header nav.nav-wrapper section.right {
      display: flex;
      flex: 1 1 100px;
      width: 20%;
      justify-content: space-around;
      align-items: center;
    }
    
    body header nav.nav-wrapper section.right div.air {
      width: 5rem;
      height: 5rem;
    }
    
    body header nav.nav-wrapper section.right div.img {
      margin-left: -2rem;
      width: 4.31rem;
      height: 4.31rem;
      background-size: cover;
      background-image: url(../png/bgMusicSwitch.png);
      background-position: 0 0;
      cursor: pointer;
      transition: background-position 0.3s ease;
    }
    
    body main {
      position: relative;
    }
    
    body main div.mainPartWrapper {
      width: 100%;
      height: 80vh;
    }
    
    body main div.mainPartWrapper section.mainVideo {
      width: 100%;
      height: 100%;
    }
    
    body main div.mainPartWrapper section.mainVideo video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    body main div.mainPartWrapper section.left div.NET {
      top: 690px;
      left: 42px;
      position: absolute;
      width: 13%;
    }
    
    body main div.mainPartWrapper section.left div.NET img {
      width: 70%;
    }
    
    body main div.mainPartWrapper section.middle {
      position: absolute;
      width: 40vw;
      height: 20vh;
      top: 425px;
      left: 500px;
    }
    
    body main div.mainPartWrapper section.middle div.img1 {
      position: absolute;
      top: 74px;
      left: 180px;
      width: 70%;
      height: 15vh;
      background-image: url(../png/indexYyBtn.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: cover;
    }
    
    body main div.mainPartWrapper section.middle div.img1:hover {
      background-position: 0 -152px;
    }
    
    body main div.mainPartWrapper section.video {
      width: 10vw;
      height: 10vh;
    }
    
    body main div.mainPartWrapper section.video div {
      width: 100%;
      height: 100%;
    }
    
    body main div.mainPartWrapper section.video div div.img {
      position: absolute;
      top: 450px;
      left: 1210px;
      width: 9%;
      height: 14vh;
      background-position: 0 -123px;
      background-image: url(../png/pvBtn.png);
      background-size: cover;
      cursor: pointer;
    }
    
    body main div.mainPartWrapper section.video div div.img video {
      width: 100%;
      height: 100%;
      display: none;
    }
    
    body main div.mainPartWrapper section.taptap div.img {
      position: absolute;
      top: 280px;
      left: 1850px;
      width: 17.4vh;
      height: 32vh;
      background-image: url(../png/tapAside.png);
      background-repeat: no-repeat;
      background-position: -171px 0;
    }
    
    body main div.mainPartWrapper section.taptap div.img:hover {
      background-position: 0 0;
    }
    
    body main div.mainPartWrapper section.character div.img {
      top: 690px;
      left: 1750px;
      position: absolute;
      width: 20%;
    }
    
    body main div.mainPartWrapper section.character div.img img {
      width: 70%;
    }
    
    body footer {
      width: 100%;
      height: 11.7vh;
    }
    
    body footer section.wrapper {
      display: flex;
      width: 100%;
      height: 100%;
      background-color: #1d1d1d;
    }
    
    body footer section.wrapper div.left {
      flex: 2 1 200px;
    }
    
    body footer section.wrapper div.left ul {
      display: flex;
      list-style-type: none;
      justify-content: space-between;
    
    }
    
    body footer section.wrapper div.left ul {
      position: relative;
      /* 为绝对定位的子元素建立参照 */
      height: 55px;
      /* 设置与图标相同的高度 */
      margin-left: 50px;
      /* 初始左边距 */
    }
    
    body footer section.wrapper div.left ul li {
      position: absolute;
      top: 25px;
      width: 55px;
      height: 55px;
      background-image: url(../otherPlatform.png);
      background-size: 498px 110px;
    }
    
    /* 各个图标项的精确定位 */
    body footer section.wrapper div.left ul li.item {
      left: 0;
      background-position: -124px 0;
    }
    
    body footer section.wrapper div.left ul li.item:hover {
      background-position: -124px -55px;
      /* 修正悬停位置，应该是向下移动55px */
    }
    
    body footer section.wrapper div.left ul li.item1 {
      left: 70px;
      background-position: -58px 0;
    }
    
    body footer section.wrapper div.left ul li.item1:hover {
      background-position: -58px -55px;
    }
    
    body footer section.wrapper div.left ul li.item2 {
      left: 134px;
      background-position: 0 0;
    }
    
    body footer section.wrapper div.left ul li.item2:hover {
      background-position: 0 -55px;
    }
    
    body footer section.wrapper div.left ul li.item3 {
      left: 198px;
      background-position: -188px 0;
    }
    
    body footer section.wrapper div.left ul li.item3:hover {
      background-position: -188px -55px;
    }
    
    body footer section.wrapper div.left ul li.item4 {
      left: 262px;
      background-position: -252px 0;
    }
    
    body footer section.wrapper div.left ul li.item4:hover {
      background-position: -252px -55px;
    }
    
    body footer section.wrapper div.left ul li.item5 {
      left: 326px;
      background-position: -317px 0;
    }
    
    body footer section.wrapper div.left ul li.item5:hover {
      background-position: -317px -55px;
    }
    
    body footer section.wrapper div.left ul li.item6 {
      left: 390px;
      background-position: -380px 0;
    }
    
    body footer section.wrapper div.left ul li.item6:hover {
      background-position: -380px -55px;
    }
    
    body footer section.wrapper div.left ul li.item7 {
      left: 454px;
      background-position: -442px 0;
    }
    
    body footer section.wrapper div.left ul li.item7:hover {
      background-position: -442px -55px;
    }
    
    body footer section.wrapper div.middle {
      flex: 4 1 200px;
      background-image: url(../png/indexFoot.png);
      background-size: contain;
      margin-left: 100px;
      scale: 1.2;
    }
    
    body footer section.wrapper div.right {
      display: flex;
      flex: 2 1 200px;
      justify-content: space-around;
      align-items: center;
    }
    
    body footer section.wrapper div.right div.air {
      width: 10%;
    }
    
    body footer section.wrapper div.right div.img {
      width: 54%;
      height: 58%;
      background-image: url(../png/neverness.png);
      background-size: contain;
    }
    
    /* 视频覆盖层样式 */
    .video-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    
    .video-overlay video {
      max-width: 80%;
      max-height: 80%;
      outline: none;
    }

总结

这个网页项目通过 HTML 构建页面结构，CSS 实现页面样式和交互效果，JavaScript 实现音乐和视频的控制功能。整体布局合理，交互丰富，能够为用户提供较好的浏览体验。在实际使用时，需要确保图片和音视频文件的路径正确，以保证网页的正常显示和功能实现。

效果如图