HTMLCSS實現異環網站，期末web作業

? ?

本網站是我在學習前端時敲得，僅供學習使用。

?這段代碼是一個完整的 HTML 網頁項目，包含 HTML、CSS 和 JavaScript 部分，用于構建一個名為 “異環” 的網頁。網頁具備頭部導航欄、主體視頻展示、圖片交互元素、音樂播放控制、視頻彈窗播放以及底部信息展示等功能。

代碼詳細分析

1. HTML 部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>異環</title><!-- 谷歌字體鏈接 --><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet" /><!-- CSS 鏈接 --><link rel="stylesheet" href="../css/index.css" />
</head><body><header><nav class="nav-wrapper"><section class="left"><img src="../png/NTE_logo.png" alt="NTE_logo" /></section><section class="middle"><ul><li><a href="./index.html" class="active">首頁</a></li><li><a href="./charater1.html">角色介紹</a></li><li><a href="./city.html">都市映像</a></li><li><a href="./qingbao.html">情報速遞</a></li><li><a href="./jiaru.html">加入我們</a></li></ul></section><section class="right"><div class="air"></div><div class="img" id="musicBtn"></div><audio id="music" src="../yh_gw_bgm.mp3" loop></audio></section></nav></header><main><div class="mainPartWrapper"><section class="mainVideo"><video src="../mp4/yh_bgv_20240704.mp4" loop autoplay muted></video></section><section class="left"><div class="NET"><img src="../png/indexNet.png" alt="NET" /></div></section><section class="middle"><div class="info1"></div><div class="img1"></div><div class="img2"></div></section><section class="video"><div><div class="img" id="videoTrigger"><video src="../mp4/3d3d139dbefb5bf8bc0fee2e1a2f5e06.mp4"></video></div></div></section><section class="taptap"><div class="img"><a href=""></a></div></section><section class="character"><div class="img"><a href="./charater1.html"><img src="../png/guide_role.png" alt="" /></a></div></section></div></main><!-- 視頻覆蓋層 --><div class="video-overlay" id="videoOverlay"><video id="centeredVideo" controls></video></div><footer><section class="wrapper"><div class="left"><ul><li class="item"><a href="#"></a></li><li class="item1"><a href="#"></a></li><li class="item2"><a href="#"></a></li><li class="item3"><a href="#"></a></li><li class="item4"><a href="#"></a></li><li class="item5"><a href="#"></a></li><li class="item6"><a href="#"></a></li><li class="item7"><a href="#"></a></li></ul></div><div class="middle"><img src="" alt="" /></div><div class="right"><div class="air"></div><div class="img"></div></div></section></footer><script>// 音樂控制const musicBtn = document.getElementById('musicBtn');const music = document.getElementById('music');// 初始狀態設為暫停music.pause();musicBtn.addEventListener('click', function () {if (music.paused) {music.play();this.style.backgroundPosition = '0 -4.31rem'; // 切換到播放狀態} else {music.pause();this.style.backgroundPosition = '0 0'; // 切換回暫停狀態}});// 視頻控制const videoTrigger = document.getElementById('videoTrigger');const videoOverlay = document.getElementById('videoOverlay');const centeredVideo = document.getElementById('centeredVideo');const smallVideo = videoTrigger.querySelector('video');videoTrigger.addEventListener('click', function () {centeredVideo.src = smallVideo.src;videoOverlay.style.display = 'flex';centeredVideo.play();});videoOverlay.addEventListener('click', function (e) {if (e.target === this) { // 只點擊覆蓋層時關閉centeredVideo.pause();videoOverlay.style.display = 'none';}});</script>
</body></html>

頭部（<head>）：
- 設置字符編碼為 UTF - 8，并配置視口以實現響應式設計。
- 引入谷歌字體?ZCOOL QingKe HuangYou，為網頁提供獨特的字體樣式。
- 鏈接外部 CSS 文件?index.css，用于定義網頁的樣式。
主體（<body>）：
- 頭部導航欄（<header>）：
  - 左側展示網站 logo 圖片。
  - 中間是導航菜單，包含首頁、角色介紹、都市映像、情報速遞和加入我們等鏈接。
  - 右側有一個音樂播放控制按鈕和一個音頻元素，音頻可循環播放。
- 主體內容（<main>）：
  - 頂部有一個全屏循環播放的靜音視頻作為背景。
  - 包含多個部分，有圖片展示區域、視頻觸發區域、角色引導圖片等。
- 視頻覆蓋層（.video - overlay）：用于在點擊視頻觸發區域時彈出視頻播放窗口，視頻可控制播放。
- 底部（<footer>）：分為左、中、右三個部分，左側有多個圖標鏈接，中間預留圖片展示區域，右側有一個占位元素和一個圖片。

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;
}