本网站是我在学习前端时敲得，仅供学习使用。
这段代码是一个完整的 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; }
总结
这个网页项目通过 HTML 构建页面结构，CSS 实现页面样式和交互效果，JavaScript 实现音乐和视频的控制功能。整体布局合理，交互丰富，能够为用户提供较好的浏览体验。在实际使用时，需要确保图片和音视频文件的路径正确，以保证网页的正常显示和功能实现。
效果如图
