本网站设计模仿次元小镇，是我在学习前端敲得。
一，网站描述
网站设计主要以HTML和css为主，也含有js。网页包括多个页面，如首页，消息，联系，登录，cosPLAY,动漫壁纸，插画，音乐，动漫头像，周边等。具体如下。
二
二，网站个页面描述。
网页包括，轮播图，内容，广告区域。其中每个页面的图片点击后都会有模态框，可以查看完整图片；音乐区域，点击图片可以播放音乐，再次点击暂停播放，其中图片底部有进度条可以滑动；在番剧区域，点击图片后可以跳转到囧次元具体的动漫链接，可以播放动漫。在此基础上还添加了很多功能，音乐加了进度条可以拖动和循环播放；底部版权区域全部改了；消息区域改了，更加真实了；联系区域加了上传作品功能；登入区域加了注册且整体更加真实了；图片加了虚拟框，点击可以查看完整图片。具体如下。
没有全部展示
三
三，部分代码展示
ds
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
<style>
/* 模态框样式 */
.modal {
display: none;
/* 固定定位 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* 溢出滚动 */
overflow: auto;
/* 背景色 */
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
/* 修改为最大宽度和最大高度，让图片完整显示 */
max-width: 90%;
max-height: 90%;
/* 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 这是叉，退出设置 */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
/* 悬停状态 */
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 轮播图设置 -------------------------------------*/
div.lu {
width: 1400px;
height: 400px;
box-sizing: border-box;
margin: 0px auto;
display: flex;
}
* {
box-sizing: border-box;
}
.slider {
width: 590px;
height: 400px;
/* 控制溢出元素内容的显示方式，溢出隐藏 */
overflow: hidden;
position: relative;
margin: 0px 20px;
}
.slider-wrapper {
width: 100%;
height: 320px;
position: relative;
}
.slider-wrapper img {
width: 100%;
height: 100%;
/* 转块级 */
display: block;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
cursor: pointer;
}
.slider-wrapper img.active {
opacity: 1;
}
.slider-footer {
height: 80px;
background-color: rgb(100, 67, 68);
padding: 12px 12px 0 12px;
/* 相对定位 */
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 4px;
/* 标指针的样式设置为手型指针 */
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
.pause-button {
position: absolute;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.pause-button:hover {
background: rgba(255, 255, 255, 0.2);
}
/* 右边广告区域----------------------------------------------- */
.ad-container {
width: 348px;
height: 400px;
margin: 0 10px;
border: 1px solid #e0e0e0;
overflow: auto;
position: relative;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
background-color: #fafafa;
}
.ad-item {
min-height: 50px;
width: 92%;
background-color: #ffffff;
margin: 18px auto;
text-align: left;
border-bottom: none;
display: flex;
align-items: center;
transition: all 0.3s ease;
cursor: pointer;
border-radius: 8px;
padding: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.ad-item:hover {
background-color: #f0f6ff;
transform: scale(1.03);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.ad-number {
width: 28px;
height: 28px;
background-color: #2196F3;
margin-left: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 50%;
font-size: 16px;
}
.ad-text {
margin-left: 18px;
font-size: 15px;
line-height: 1.5;
color: #444;
white-space: normal;
overflow: visible;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 右边图片 */
div.lu2 li {
width: 320px;
height: 180px;
margin: 10px 20px;
}
div.lu2 img {
width: 320px;
height: 180px;
object-fit: cover;
cursor: pointer;
}
</style>
</head>
<body>
<div class="header">
<div class="tobu">
<div class="wrapper">
<div class="logo">
<h2><a href="#">次元小镇</a></h2>
</div>
<div class="nav">
<ul>
<li><a href="网页设计.html" class="active">首页</a></li>
<li><a href="消息.html">消息</a></li>
<li><a href="联系.html">联系</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="请输入关键词">
<a href="#"></a>
</div>
<!-- 登录区域 -->
<div class="user">
<form action="登录1.html">
<button>登录</button>
</form>
</div>
</div>
</div>
</div>
<!-- 精品推荐区域 -->
<div class="recommend wrapper">
<h3>精品推荐</h3>
<ul>
<li><a href="cosPLAY.html">cosPLAY</a></li>
<li><a href="番剧.html">番剧</a></li>
<li><a href="动漫壁纸.html">动漫壁纸</a></li>
<li><a href="插画.html">插画</a></li>
<li><a href="P站美图.html">P站美图</a></li>
<li><a href="音乐.html">音乐</a></li>
<li><a href="动漫头像.html">动漫头像</a></li>
<li><a href="周边.html">周边</a></li>
<li><a href="动漫推荐.html">动漫推荐</a></li>
</ul>
</div>
<!-- 轮播图设置--------------------------------------- -->
<div class="lu">
<div class="slider">
<div class="slider-wrapper">
<!-- 图片将通过 JavaScript 动态添加 -->
</div>
<div class="slider-footer">
<p id="slider-title">对人来说太超前了</p>
<ul class="slider-indicator">
<!-- 指示器将通过 JavaScript 动态添加 -->
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
<button class="pause-button" id="pause-button">暂停</button>
</div>
<div class="ad-container">
<div class="ad-item">
<div class="ad-number"> 1 </div>
<div class="ad-text">【插画精选】蔚蓝档案 砂狼白子 NIKKE：胜利女神 红莲 白雪公主 会员动漫美图推荐（共29张）</div>
</div>
<div class="ad-item">
<div class="ad-number"> 2 </div>
<div class="ad-text">【动漫下载】新妹魔王的契约者 Shinmai Maou no Testament [无修正] 第一季 +第二季+OAD+OVA (乳)
[BD][720P][磁力下载]</div>
</div>
<div class="ad-item">
<div class="ad-number"> 3 </div>
<div class="ad-text">【P站画师】米哈游同人作品大合集，雷电芽衣 刻晴 爱莉希雅 中国画师乌橄榄菜的插画作品</div>
</div>
<div class="ad-item">
<div class="ad-number"> 4 </div>
<div class="ad-text">【动漫壁纸】虚拟主播 猫又小粥 游戏王 绝区零 伊芙琳 简杜 现在就吃双层芝士堡娘 蔚蓝档案 妃咲 插画美图推荐</div>
</div>
<div class="ad-item">
<div class="ad-number"> 5 </div>
<div class="ad-text">【插画美图】游戏王 绝区零 伊芙琳 简杜 虚拟主播 猫又小粥 现在就吃双层芝士堡娘 蔚蓝档案 妃咲 动漫壁纸推荐</div>
</div>
<div class="ad-item">
<div class="ad-number"> 6 </div>
<div class="ad-text">【插画美图】原神 芙宁娜 瓦雷莎 穹妹 鸣潮 菲比 绝区零 艾莲乔 星穹铁道 三月七 崩坏3 爱莉希雅 动漫壁纸推荐</div>
</div>
<div class="ad-item">
<div class="ad-number"> 7 </div>
<div class="ad-text">【插画精选】蔚蓝档案 砂狼白子 NIKKE：胜利女神 红莲 白雪公主 会员动漫美图推荐（共29张）</div>
</div>
<div class="ad-item">
<div class="ad-number"> 8 </div>
<div class="ad-text">【插画美图】游戏王 绝区零 伊芙琳 简杜 虚拟主播 猫又小粥 现在就吃双层芝士堡娘 蔚蓝档案 妃咲 动漫壁纸推荐</div>
</div>
<div class="ad-item">
<div class="ad-number"> 9 </div>
<div class="ad-text">COSPLAY 精打细算 扶眼镜 蔚蓝档案 早濑优香@-屿鱼Yukako</div>
</div>
<div class="ad-item">
<div class="ad-number"> 10 </div>
<div class="ad-text">【动漫壁纸】原神 胡桃 绝区零 零 蔚蓝档案 妃咲 一之濑明日奈 插画美图推荐</div>
</div>
<div class="ad-item">
<div class="ad-number">11</div>
<div class="ad-text">【插画美图】兽耳粉毛女仆 Miku 蔚蓝档案 飞鸟马时 伊落マリー 星穹铁道 风堇 雪花菈米 动漫壁纸推荐</div>
</div>
<div class="ad-item">
<div class="ad-number">12</div>
<div class="ad-text">【插画美图】兽耳粉毛女仆 Miku 蔚蓝档案 飞鸟马时 伊落マリー 星穹铁道 风堇 雪花菈米 动漫壁纸推荐</div>
</div>
<div class="ad-item">
<div class="ad-number">13</div>
<div class="ad-text">【插画美图】兽耳粉毛女仆 Miku 蔚蓝档案 飞鸟马时 伊落マリー 星穹铁道 风堇 雪花菈米 动漫壁纸推荐</div>
</div>
<div class="ad-item">
<div class="ad-number">14</div>
<div class="ad-text">【插画美图】兽耳粉毛女仆 Miku 蔚蓝档案 飞鸟马时 伊落マリー 星穹铁道 风堇 雪花菈米 动漫壁纸推荐</div>
</div>
<div class="ad-item">
<div class="ad-number">15</div>
<div class="ad-text">【插画美图】兽耳粉毛女仆 Miku 蔚蓝档案 飞鸟马时 伊落マリー 星穹铁道 风堇 雪花菈米 动漫壁纸推荐</div>
</div>
<div class="ad-item">
<div class="ad-number">16</div>
<div class="ad-text">【插画美图】兽耳粉毛女仆 Miku 蔚蓝档案 飞鸟马时 伊落マリー 星穹铁道 风堇 雪花菈米 动漫壁纸推荐</div>
</div>
</div>
<div class="lu2">
<ul>
<li>
<img src="图片\9f163ee4cd58aa001e06399c768c67bc.jpg" alt="" onclick="openModal(this.src)">
</li>
<li>
<img src="20221005201441886.jpg" alt="" onclick="openModal(this.src)">
</li>
</ul>
</div>
</div>
<script>
const sliderDate = [
{ url: '图片/轮播图/20230902232839267.jpg', title: '关于我转生成史莱姆这档事', color: 'rgb(100,67,68)' },
{ url: '图片/轮播图/20250208144613874.jpg', title: '只有我不存在的城市', color: 'rgb(100,67,68)' },
{ url: '图片/轮播图/20250307001248383.jpg', title: '', color: 'rgb(100,67,68)' },
{ url: '图片/轮播图/20250307001412736.jpg', title: '', color: 'rgb(100,67,68)' },
{ url: '图片/轮播图/20241125224841934.jpg', title: '', color: 'rgb(100,67,68)' },
{ url: '图片/9f163ee4cd58aa001e06399c768c67bc.jpg', title: '', color: 'rgb(100,67,68)' },
{ url: '图片/b9d05cc938713a3667cca870ae488cf5.jpg', title: '', color: 'rgb(100,67,68)' },
{ url: '图片/轮播图/20250307001412736.jpg', title: '', color: 'rgb(100,67,68)' }
];
const sliderWrapper = document.querySelector('.slider-wrapper');
const sliderTitle = document.getElementById('slider-title');
const sliderFooter = document.querySelector('.slider-footer');
const indicators = document.querySelector('.slider-indicator');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
const pauseButton = document.getElementById('pause-button');
let currentIndex = 0;
let intervalId;
let isPaused = false;
// 动态添加图片和指示器
function addSlidesAndIndicators() {
sliderDate.forEach((slide, index) => {
const img = document.createElement('img');
img.src = slide.url;
img.alt = slide.title;
if (index === 0) {
img.classList.add('active');
}
img.addEventListener('error', () => {登录界面设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
<style>
body {
width: 1500px;
margin: 0 auto;
}
div.be {
width: 1300px;
height: 540px;
background-color: #fff;
box-sizing: border-box;
margin: 20px 50px;
display: flex;
}
.be li.m {
width: 620px;
height: 480px;
background-color: blueviolet;
margin: 0px 0px;
border-radius: 10%;
}
/* 图片 */
.be .m .r {
width: 620px;
height: 480px;
/* 可以让图片等比例缩放，填满整个内容 */
object-fit: cover;
border-radius: 10%;
}
.be li.n {
width: 360px;
height: 500px;
background-color: #fff;
margin: 0 260px;
padding: 30px 40px;
box-sizing: border-box;
border: 1px solid;
border-radius: 10%;
box-shadow: 2px 1px;
}
.n h2 {
font-size: 24px;
font-weight: 700;
}
.n h3 {
font-weight: 700;
font-size: 18px;
}
.n a {
color: blue;
}
.n input {
border: 1px solid #000;
}
.n button {
border: 1px solid #000;
background-color: #f0f0f0;
}
.be ul {
display: flex;
}
#message {
color: red;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header">
<div class="wrapper">
<div class="logo">
<h2><a href="#">次元小镇</a></h2>
</div>
<div class="nav">
<ul>
<li><a href="网页设计.html" class="active">首页</a></li>
<li><a href="消息.html">消息</a></li>
<li><a href="联系.html">联系</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="请输入关键词">
<a href="#"></a>
</div>
<!-- 登录区域 -->
<div class="user">
<form action="登录1.html">
<button>登录</button>
</form>
</div>
</div>
</div>
<div class="be">
<ul>
<li class="m">
<img class="r" src="./20240213213425304.jpg">
</li>
<li class="n">
<h2>注册信息</h2>
<form id="registrationForm" action="网页设计.html">
<br>
<h3>个人信息</h3>
<label>用户名：</label><input type="text" id="username" placeholder="请输入用户名">
<br><br>
<label>密码：</label><input type="password" id="password" placeholder="请输入密码">
<br><br>
<label>确认信息：</label><input type="password" id="confirmPassword">
<br><br>
<label>性别：</label>
<label><input type="radio" name="gender" value="男">男</label>
<label><input type="radio" name="gender" value="女">女</label>
<br><br>
<input type="checkbox" id="agreement"><label>已阅读同意此协议</label>
<br>
<ul>
<li><a href="用户协议.html">《用户协议》</a></li>
</ul>
<br><br>
<button type="submit">免费注册</button>
<button type="reset">重新填写</button>
</form>
<p id="message"></p>
</li>
</ul>
</div>
<!-- 底部区域版权区域 -->
<div class="footer bg-gray-100 py-8 px-4 md:px-12">
<div class="container mx-auto flex flex-col md:flex-row justify-between">
<div class="left mb-8 md:mb-0 md:mr-8">
<div class="p mb-2">
<h3 class="text-xl font-bold text-gray-700">友情链接:</h3>
</div>
<hr class="border-gray-300 mb-4">
<div class="h">
<ul class="flex flex-wrap">
<li class="mr-4 mb-4">
<a href="https://dimtown.com/" class="link">次元小镇</a>
</li>
<li class="mr-4 mb-4">
<a href="https://acgdog.com/" class="link">YY次元街</a>
</li>
<li class="mr-4 mb-4">
<a href="#" class="link">次元导航</a>
</li>
<li class="mr-4 mb-4">
<a href="https://yiimii.com/" class="link">Yiimi</a>
</li>
</ul>
</div>
</div>
<div class="right">
<ul class="flex flex-col md:flex-row justify-between">
<li class="mb-8 md:mb-0 md:mr-8">
<h3 class="hh text-xl font-bold text-gray-700 mb-4 text-center">推荐栏目</h3>
<ul class="ww flex flex-wrap justify-center">
<li class="mb-2 mr-2">
<a href="#" class="item">插画</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">动漫壁纸</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">动漫头像</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">动漫推荐</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">番剧</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">音乐</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">周边</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">P 站美图</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">cosPL</a>
</li>
</ul>
</li>
<li class="mb-8 md:mb-0 md:mr-8">
<h3 class="hh text-xl font-bold text-gray-700 mb-4 text-center">联系方式</h3>
<p class="text-gray-600 mb-1">新浪微博：喵次元 </p>
<p class="text-gray-600 mb-1">腾讯QQ：1815919191</p>
<p class="text-gray-600">公众号：DIMTOWN</p>
</li>
<li>
<h3 class="hh text-xl font-bold text-gray-700 mb-4 text-center">关于小镇</h3>
<p class="text-gray-600">次元小镇（创漫小镇）是一个动漫分享平台资讯、动漫美图壁纸、音乐和cosplay资源的小站，阿宅们快到碗里来ヽ(✿ﾟ▽ﾟ)ノ</p>
</li>
</ul>
</div>
</div>
</div>
<script>
const registrationForm = document.getElementById('registrationForm');
const message = document.getElementById('message');
registrationForm.addEventListener('submit', function (e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
const gender = document.querySelector('input[name="gender"]:checked');
const agreement = document.getElementById('agreement').checked;
if (!username || !password || !confirmPassword || !gender || !agreement) {
message.textContent = '请填写所有必填项并同意用户协议';
return;
}
if (password !== confirmPassword) {
message.textContent = '两次输入的密码不一致';
return;
}
const data = {
username: username,
password: password,
gender: gender.value,
agreement: agreement
};
// 模拟的后端接口，实际需要替换为真实接口
const url = 'https://example.com/register';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('注册失败');
}
})
.then(result => {
message.textContent = result.message;
})
.catch(error => {
message.textContent = '注册失败: ' + error.message;
});
});
</script>
</body>
</html>音乐区域代码设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
<style>
.music-boxes {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div img {
object-fit: cover;
}
.music-box {
width: 45%;
margin-bottom: 20px;
display: flex;
}
.music-img-box {
width: 50%;
background-color: lightgray;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.music-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.music-text-box {
width: 50%;
background-color: white;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #ccc;
cursor: pointer;
}
.progress {
height: 100%;
background-color: #007BFF;
width: 0%;
}
</style>
</head>
<body>
<div class="header">
<div class="wrapper">
<div class="logo">
<h2><a href="#">次元小镇</a></h2>
</div>
<div class="nav">
<ul>
<li><a href="网页设计.html" class="active">首页</a></li>
<li><a href="消息.html">消息</a></li>
<li><a href="联系.html">联系</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="请输入关键词">
<a href="#"></a>
</div>
<div class="user">
<form action="登录1.html">
<button>登录</button>
</form>
</div>
</div>
</div>
<div class="recommend wrapper">
<h3>精品推荐</h3>
<ul>
<li><a href="cosPLAY.html">cosPLAY</a></li>
<li><a href="番剧.html">番剧</a></li>
<li><a href="动漫壁纸.html">动漫壁纸</a></li>
<li><a href="插画.html">插画</a></li>
<li><a href="P站美图.html">P站美图</a></li>
<li><a href="音乐.html">音乐</a></li>
<li><a href="动漫头像.html">动漫头像</a></li>
<li><a href="周边.html">周边</a></li>
<li><a href="动漫推荐.html">动漫推荐</a></li>
</ul>
</div>
<div>
<h1>音乐</h1>
<div class="music-boxes" id="music-boxes"></div>
</div>
<div class="footer bg-gray-100 py-8 px-4 md:px-12">
<div class="container mx-auto flex flex-col md:flex-row justify-between">
<div class="left mb-8 md:mb-0 md:mr-8">
<div class="p mb-2">
<h3 class="text-xl font-bold text-gray-700">友情链接:</h3>
</div>
<hr class="border-gray-300 mb-4">
<div class="h">
<ul class="flex flex-wrap">
<li class="mr-4 mb-4">
<a href="https://dimtown.com/" class="link">次元小镇</a>
</li>
<li class="mr-4 mb-4">
<a href="https://acgdog.com/" class="link">YY次元街</a>
</li>
<li class="mr-4 mb-4">
<a href="#" class="link">次元导航</a>
</li>
<li class="mr-4 mb-4">
<a href="https://yiimii.com/" class="link">Yiimi</a>
</li>
</ul>
</div>
</div>
<div class="right">
<ul class="flex flex-col md:flex-row justify-between">
<li class="mb-8 md:mb-0 md:mr-8">
<h3 class="hh text-xl font-bold text-gray-700 mb-4 text-center">推荐栏目</h3>
<ul class="ww flex flex-wrap justify-center">
<li class="mb-2 mr-2">
<a href="#" class="item">插画</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">动漫壁纸</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">动漫头像</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">动漫推荐</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">番剧</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">音乐</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">周边</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">P 站美图</a>
</li>
<li class="mb-2 mr-2">
<a href="#" class="item">cosPL</a>
</li>
</ul>
</li>
<li class="mb-8 md:mb-0 md:mr-8">
<h3 class="hh text-xl font-bold text-gray-700 mb-4 text-center">联系方式</h3>
<p class="text-gray-600 mb-1">新浪微博：喵次元 </p>
<p class="text-gray-600 mb-1">腾讯QQ：1815919191</p>
<p class="text-gray-600">公众号：DIMTOWN</p>
</li>
<li>
<h3 class="hh text-xl font-bold text-gray-700 mb-4 text-center">关于小镇</h3>
<p class="text-gray-600">次元小镇（创漫小镇）是一个动漫分享平台资讯、动漫美图壁纸、音乐和cosplay资源的小站，阿宅们快到碗里来ヽ(✿ﾟ▽ﾟ)ノ</p>
</li>
</ul>
</div>
</div>
</div>
<script>
const musicData = [
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/Suno.ai - Your Mark.mp3",
title: "Suno.ai - Your Mark.mp3"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/Suno.ai - いやいいや.mp3",
title: "Suno.ai - いやいいや.mp3"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/[Playlist] 느낌 좋은 여자아이돌 케이팝 플레이리스트 ➂(M4A_128K) (1).m4a",
title: "[Playlist] 느낌 좋은 여자아이돌 케이팝 플레이리스트 ➂(M4A_128K) (1).m4a"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
},
{
image: "./图片/音乐/20220921203926470.jpg",
audio: "./音乐/2024年最火的英文歌曲｜超好聽的英文歌｜超好聽中文｜歐美流行音樂｜英文歌曲 (精心挑選) 2024最近很火的英文歌【動態歌詞】_很火的英文歌(M4A_128K).m4a",
title: "[Hi-Res]赛博朋克：边缘跑者OST&EP1+2"
}
];
const musicBoxes = document.getElementById('music-boxes');
musicData.forEach((music, index) => {
const musicBox = document.createElement('div');
musicBox.className = 'music-box';
const musicImgBox = document.createElement('div');
musicImgBox.className = 'music-img-box';
const img = document.createElement('img');
img.src = music.image;
img.alt = "音乐封面";
const audio = document.createElement('audio');
audio.id = `audio${index}`;
audio.src = music.audio;
audio.loop = true; // 设置音乐循环播放
const progressBar = document.createElement('div');
progressBar.className = 'progress-bar';
const progress = document.createElement('div');
progress.className = 'progress';
progressBar.appendChild(progress);
musicImgBox.appendChild(img);
musicImgBox.appendChild(audio);
musicImgBox.appendChild(progressBar);
const musicTextBox = document.createElement('div');
musicTextBox.className = 'music-text-box';
const title = document.createTextNode(music.title);
musicTextBox.appendChild(title);
musicBox.appendChild(musicImgBox);
musicBox.appendChild(musicTextBox);
musicBoxes.appendChild(musicBox);
});
const images = document.querySelectorAll('.music-img-box img');
const audios = document.querySelectorAll('audio');
const progressBars = document.querySelectorAll('.progress-bar');
images.forEach((img, index) => {
img.addEventListener('click', () => {
const audio = audios[index];
if (audio.paused) {
audios.forEach(otherAudio => {
if (otherAudio !== audio) {
otherAudio.pause();
}
});
audio.play();
} else {
audio.pause();
}
});
});
progressBars.forEach((progressBar, index) => {
const audio = audios[index];
const progress = progressBar.querySelector('.progress');
audio.addEventListener('timeupdate', () => {
const percent = (audio.currentTime / audio.duration) * 100;
progress.style.width = percent + '%';
});
progressBar.addEventListener('click', (e) => {
const rect = progressBar.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const percent = (clickX / rect.width) * 100;
audio.currentTime = (percent / 100) * audio.duration;
progress.style.width = percent + '%';
});
});
</script>
</body>
</html>四，效果展示。
首页
登录页
消息页
轮播图和广告区域
音乐界面，图片可以改。我就统一用一张图片了。
底部版权区域
网站源码，联系
QQ：3341742487
扫一扫
2994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
