Web前端大作业：基于html+css+js的仿酷狗音乐项目（内附源码）

已于 2024-09-13 11:18:25 修改
阅读量1.5k 收藏 29
点赞数 19
分类专栏： Web前端项目合集 文章标签： 前端 课程设计
于 2024-06-10 17:46:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84040513/article/details/139579558
版权

文章目录

一、项目介绍

课设是要仿照酷狗音乐的首页进行设计。酷狗音乐是国内知名的音乐应用程序,凭借其优秀的音乐库和智能推荐功能吸引了大量用户群体。模仿酷狗音乐的首页设计,可以让课设展现出专业水准,体现出对优秀产品设计的理解。

二、项目展示

首页
在这里插入图片描述
榜单
在这里插入图片描述
歌单
在这里插入图片描述
电台
在这里插入图片描述

三、源码展示

首页

<div class="headerbox">
        <div class="header">

            <div class="header-left">
                <a href="./主页.html" style="width:153px;height: 37px;display: block;"> <img src="" alt=""></a>
            </div>
            <div class="header-content">
                <input class="headerinp" type="text" placeholder="张靓颖 如果爱下去">
                <i class="search_icon"></i>
            </div>

            <div class="header-right">
                <div class="header-right-kf">
                    <ul>
                        <li> <a href="">客服中心</a></li>
                        <li> <a href="">招贤纳士</a></li>
                        <li> <a href="">会员中心</a></li>
                        <li> <a href="">商务合作</a></li>

                    </ul>



                </div>
                <div class="header-right-dl"><a href="">登录</a> </div>
            </div>
        </div>
        <div class="navWrap">
            <div class="nav">
                <ul class="homeNav">
                    <li><a class="normal kugoutab active" href="./主页.html" >首页</a></li>
                    <li><a class="normal" href="./Kglist(榜单).html">榜单</a></li>
                    <li><a class="normal" id="productCenter" href="./下载客户端.html">下载客户端</a></li>
                    <li class="more" id="more"><a href="" class="icon icon-nav6" id="showMore">更&nbsp;多</a>
                        <i class="iconfont icon-shangjiantou"> </i>
                        <i class="iconfont icon-xiajiantou"></i>
                        <ul class="secondMenu" id="secondMenu">
                            <li><a href="./radioStation.html">电台</a></li>
                            <li><a href="./MV界面.html">MV</a></li>
                            <li><a href="./song-sheet.html">歌单</a></li>
                            <li><a href="./酷狗歌手排行.html">歌手</a></li>
                        </ul>
                    </li>
                </ul>
                <a href="" class="aaa"></a>
                <ul class="subNav">
                    <style>
                        .navWrap .subNav li {
                            margin-left: 15px;
                        }
                        
                        .navWrap .subNav li.kgPlayer a {
                            background: url(https://webimg.kgimg.com/eadc2676a352ce14ec5f8050c8c42061.png) no-repeat left center;
                        }
                        
                        .navWrap .subNav li.kgPlayer a:hover {
                            background-image: url(https://webimg.kgimg.com/316067c6630d7375bd5c6503662ae4c4.png);
                        }
                        
                        .navWrap .subNav li.openPlat a {
                            background: url(https://webimg.kgimg.com/7366e06d43da71239d4f2ebd24b4e02e.png) no-repeat left center;
                        }
                        
                        .navWrap .subNav li.openPlat a:hover {
                            background-image: url(https://webimg.kgimg.com/34891849f2a47e7ef62b5fe43b5c46ee.png);
                        }
                    </style>
                    <li><a target="_blank" href="http://fanxing.kugou.com/?action=spreadIndex&amp;id=3" class="iconfont icon-star">直播</a></li>
                    <li><a target="_blank" href="https://www.kugou.com/shop/product/kugouproduct/index.html" class="iconfont icon-icon-">商城</a></li>

                    <li><a target="_blank" href="https://www.kugou.com/imusic/" class="iconfont icon-V">音乐人</a></li>
                    <li class="kgPlayer">
                        <a target="_blank" href="https://sp.kugou.com/" class="icon">代理商</a>
                    </li>
                    <!-- <li><a target="_blank" href="http://games.kugou.com/?f=7" class="icon icon-nav4">游戏</a></li> -->
                    <li>
                        <a target="_blank" href="http://www.kugou.com/fmugc-v2/dist/index.html" class="iconfont icon-ktv">主播电台</a>
                    </li>
                    <li class="openPlat">
                        <a target="_blank" href="//open.kugou.com/" class="icon">开放平台</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

歌手排行榜

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌手排行榜</title>
    <link rel="stylesheet" href="./css/kgl.min.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2223764_kplv07w8n7f.css">
    <link rel="stylesheet" href="./css/singer.min.css">
    <link rel="stylesheet" href="./css/kgl.css">
</head>

<body>
    <div class="headerbox">
        <div class="header">

            <div class="header-left">
                <a href="./主页.html" style="width:153px;height: 37px;display: block;"> <img src="" alt=""></a>
            </div>
            <div class="header-content">
                <input class="headerinp" type="text" placeholder="张靓颖 如果爱下去">
                <i class="search_icon"></i>
            </div>

            <div class="header-right">
                <div class="header-right-kf">
                    <ul>
                        <li> <a href="">客服中心</a></li>
                        <li> <a href="">招贤纳士</a></li>
                        <li> <a href="">会员中心</a></li>
                        <li> <a href="">商务合作</a></li>

                    </ul>



                </div>
                <div class="header-right-dl"><a href="">登录</a> </div>
            </div>
        </div>
        <div class="navWrap">
            <div class="nav">
                <ul class="homeNav">
                    <li><a class="normal active" href="./主页.html">首页</a></li>
                    <li><a class="normal" href="./Kglist(榜单).html">榜单</a></li>
                    <li><a class="normal" id="productCenter" href="./下载客户端.html">下载客户端</a></li>
                    <li class="more" id="more"><a href="" class="icon icon-nav6" id="showMore">更&nbsp;多</a>
                        <i class="iconfont icon-shangjiantou"> </i>
                        <i class="iconfont icon-xiajiantou"></i>
                        <ul class="secondMenu" id="secondMenu">
                            <li><a href="./radioStation.html">电台</a></li>
                            <li><a href="./MV界面.html">MV</a></li>
                            <li><a href="./song-sheet.html">歌单</a></li>
                            <li><a href="./酷狗歌手排行.html">歌手</a></li>
                        </ul>
                    </li>
                </ul>
                <a href="" class="aaa"></a>
                <ul class="subNav">
                    <style>
                        .navWrap .subNav li {
                            margin-left: 15px;
                        }

                        .navWrap .subNav li.kgPlayer a {
                            background: url(https://webimg.kgimg.com/eadc2676a352ce14ec5f8050c8c42061.png) no-repeat left center;
                        }

                        .navWrap .subNav li.kgPlayer a:hover {
                            background-image: url(https://webimg.kgimg.com/316067c6630d7375bd5c6503662ae4c4.png);
                        }

                        .navWrap .subNav li.openPlat a {
                            background: url(https://webimg.kgimg.com/7366e06d43da71239d4f2ebd24b4e02e.png) no-repeat left center;
                        }

                        .navWrap .subNav li.openPlat a:hover {
                            background-image: url(https://webimg.kgimg.com/34891849f2a47e7ef62b5fe43b5c46ee.png);
                        }
                    </style>
                    <li><a target="_blank" href="http://fanxing.kugou.com/?action=spreadIndex&amp;id=3"
                            class="iconfont icon-star">直播</a></li>
                    <li><a target="_blank" href="https://www.kugou.com/shop/product/kugouproduct/index.html"
                            class="iconfont icon-icon-">商城</a></li>

                    <li><a target="_blank" href="https://www.kugou.com/imusic/" class="iconfont icon-V">音乐人</a></li>
                    <li class="kgPlayer">
                        <a target="_blank" href="https://sp.kugou.com/" class="icon">代理商</a>
                    </li>
                 
                    <li>
                        <a target="_blank" href="http://www.kugou.com/fmugc-v2/dist/index.html"
                            class="iconfont icon-ktv">主播电台</a>
                    </li>
                    <li class="openPlat">
                        <a target="_blank" href="//open.kugou.com/" class="icon">开放平台</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

四、获取源码

因为页面与源码太多了，所以页面与源码只展示了一部分，完整源码已经打包了，点击下面蓝色链接获取！

点我获取源码

2024年最值得关注的5大AIGC图像生成工具
AI天才研究院
05-12 1493
本文聚焦2024年技术突破显著、用户基数大、应用场景广的AIGC图像生成工具，通过技术原理对比、功能实测和行业案例分析，为开发者、设计师、内容创作者提供工具选型与实践指导。覆盖工具包括Stable Diffusion XL 1.0、MidJourney V7、DALL-E 3、Runway Gen-2、Adobe Firefly 3，均为2023-2024年发布的最新版本。本文从技术演进背景切入，解析AIGC图像生成的核心原理；
【通义千问】大模型Qwen GitHub开源工程学习笔记（5）-- 模型的微调【全参数微调】【LoRA方法】【Q-LoRA方法】
weixin_46481662的博客
01-07 2859
注意，如果你使用预训练模型进行LoRA微调，而非chat模型，模型的embedding和输出层的参数将被设为可训练的参数。秩分解矩阵可以看作是一种特殊的调料，它可以改变模型的行为，使模型更好地适应新的任务，但并不会改变原有的食材（即预训练模型的权重）。相比之下，LoRA将预训练模型的权重冻结，并在转换器架构的每一层注入可训练的秩分解矩阵。这意味着在这种方法中，原始的预训练权重 W 是固定的，不会在后续的训练过程中进行更新，而是只对 A 和 B 进行训练。在全参数微调中，所有的模型参数都会被重新训练。
LoRa速率计算工具（已修改去掉挡住数据的字）
06-12
原本官方的工具有个别参数被挡到，例如挡住了bps的数值，这边的这个工具已经稍加修改，把那些会挡住的字母去掉，请放心下载。工具可以设置扩频因子、带宽、频率等参数计算出最后的速率和功率，还可以计算发送前导码长度占用时间和数据包整体的时间。
升特LoRa芯片速率计算工具
10-20
通过设置扩频因子、带宽、频率等参数计算出最后的速率和功率的小工具。
semtechSX126xSX1272SX1280参数计算工具：高效计算LoRa射频芯片性能
gitblog_06730的博客
04-12 811
semtechSX126xSX1272SX1280参数计算工具：高效计算LoRa射频芯片性能 【下载地址】semtechSX126xSX1272SX1280参数计算工具 此开源项目为Semtech LoRa射频芯片的官方参数计算工具，支持SX126x、SX1272和SX1280三款型号。通过输入BWSFCR等关键参数，用...
LoRa Calculator Tool
04-13
LoRa Calculator Tool 1.1 官方安装包 针对SX127X系列参数计算 lora性能评估计算 1.可以计算扩频因子 2.可以计算空中时间 3.预计功率
LORA计算器
09-17
ora性能评估计算 1.可以计算扩频因子 2.可以计算空中时间 3.预计功率 (Lora performance evaluation calculation 1., spread spectrum factor can be calculated 2. can calculate air time 3. estimated power)
Lora 计算器
12-05
物联网无线通信，lora相关参数计算工具，可以计算出发射时间，不同的扩频因子下的空口速率，希望对开发者有帮助
LORA速率计算器 寄存器参数配置工具.zip
08-22
LORA速率计算器：可以计算数据传输速率，非常方便、实用。 LORA寄存器配置工具：可以输入你需要配置的参数（频率，带宽，扩频因子...等等），自动生成 相关寄存对应要配置的数值
自然语言处理: 第十九章LoRA&QLoRA微调技巧
victor_manches的博客
03-25 5148
本篇文章是由位来自威斯康星大学麦迪逊分校的统计学助理教授Sebastian Raschka，也是人工智能平台Lightning AI的LLM研究员，进行了成百上千次关于LoRA的实验。他的实验日记为我们提供了宝贵的见解，包括如何节省内存、选择最佳配置等问题。他的研究回答了一些关键问题，例如是否应该用SGD取代AdamW，使用调度器的潜在价值，以及如何调整LoRA的超参数。
LLaMA的解读与其微调(含LLaMA 2)：Alpaca-LoRA/Vicuna/BELLE/中文LLaMA/姜子牙
热门推荐
结构之法 算法之道
03-22 7万+
还开始研究一系列开源模型(包括各自对应的模型架构、训练方法、训练数据、本地私有化部署、硬件配置要求、微调等细节)​该项目部分一开始是作为此文《》的第4部分，但但随着研究深入 为避免该文篇幅又过长，将把『第4部分 开源项目』抽取出来 独立成本文。
LoRa数据速率，功率，空中时间计算工具
03-18
通过设置扩频因子、带宽、频率等参数计算出空中时间，传输速率和功率等的小工具
semtech官方LoRaCalculator计算工具
03-16
semtech官方LoRaCalculator计算工具，可以根据设置的参数（扩频因子，带宽、crc等）计算数据传输速率
LoRaCalculator-LoRa sx127x参数计算工具
08-20
LoRa sx127x参数计算工具，空中时间、电流等计算。 官方软件，有点bug，有部分参数会被挡住一点。 详细参数参照：https://blog.csdn.net/p1279030826/article/details/89496356#comments_13080478
LoRa计算器,适用于SX127x系列,包括SX1278/1276/1279
12-10
物联网研发工程师的福音,关于什么传输速率、空中时间、发射功耗、扩频因子，打开这个计算器，一算便知
LoRa Modem Calculator Tool
04-30
升特提供的软件，LoRa Modem Calculator Tool，填好你的配置，就可以计算通信速率等一些参数，例如填写好SF，BW，CR可以计算出若干个字节在空中传输的耗时，这样能预估数据传输耗时，根据你的应用场景进行参数优化。SX1272LoRaCalculatorV1.1版本
LoRa无线通信系统仿真项目：MATLAB实战
最新发布
weixin_42611177的博客
05-29 875
在当今物联网（IoT）技术发展的浪潮中，LoRa技术以其低功耗、远距离传输的独特优势脱颖而出。LoRa，即Long Range，是一种专为广域网设计的无线通信协议。它支持长距离的无线通信，且成本相对较低，这使得LoRa在智能城市、农业监测、工业自动化等领域中备受青睐。
LoRaMatlab:Matlab上的LoRa调制和编码方案模拟器-matlab开发
05-28
6. **性能评估**：在MATLAB环境中，我们可以计算误码率（BER）、接收机灵敏度和距离覆盖范围等指标，以评估LoRa通信系统的性能，并与理论值进行对比。 7. **github_repo.zip**：这个压缩包可能包含了LoRaMatlab项目...
Lora微调在计算机视觉任务中的应用：视觉模型创新微调方法
![Lora微调在计算机视觉任务中的...本文首先介绍了计算机视觉与微调的基本概念，随后深入探讨了LoRa微调技术的基础，包括LoRa技术的起源、作用以及在微调中的策略和方法。文章详细阐述了LoRa微调在图像分类、物体检测
lora速率计算工具(已修改去掉挡住数据的字)
09-04
### 回答1： LoRa速率是指在LoRa网络中传输数据的速率。具体来说，它表示每秒可以传输的比特数。为了方便用户计算LoRa速率，现在有一些LoRa速率计算工具可供使用。 在使用这种工具时，需要输入LoRa系统的参数，如扩频因子、带宽、编码速率等。这些参数不仅影响LoRa速率，而且还影响信号的距离、穿透能力和传输可靠性等。用户应该根据实际需要，选择适当的参数值，以达到理想的LoRa速率和其他性能指标。 通过LoRa速率计算工具，用户可以快速算出所需速率，从而更好地规划和优化LoRa网络。此外，这种工具也有助于LoRa应用的研发和推广，促进了LoRa技术的更广泛应用。 ### 回答2： Lora速率计算工具是一种用于计算Lora通信速率的工具。Lora（Long Range）是一种低功耗、远距离通信技术，广泛应用于物联网领域。Lora速率计算工具可以帮助用户估算Lora通信的传输速率，提供有效的参考和辅助工具。 Lora速率计算工具主要基于以下几个参数进行计算： 1. 频率带宽（BW）：Lora通信使用的频率带宽，通常有125kHz、250kHz和500kHz等选项。 2. 扩频因子（SF）：Lora通信的扩频因子，决定了数据传输的速率和传输距离。较高的扩频因子可以提供更远的传输距离，但速率较慢。常见的扩频因子有7到12个选项。 3. 码率（CR）：Lora通信的编码率，用于提高通信的抗噪声能力。常见的编码率例如4/5、4/6等。 4. 符号速率（RS）：Lora通信的符号速率，根据扩频因子和带宽确定。 用户可以在Lora速率计算工具中输入以上参数，点击计算按钮即可得到Lora通信的速率结果。该工具还会提供其他相关信息，例如码长、下行速率和上行速率等。 使用Lora速率计算工具可以帮助用户更好地规划Lora通信系统，根据通信需求和距离选择合适的参数。同时，该工具还可以提供参考，评估通信质量和效率。对于物联网项目开发和部署，Lora速率计算工具是一个非常有用的辅助工具，可以提高工作效率和可靠性。 总之，Lora速率计算工具是一种方便快捷的计算工具，用于Lora通信速率的估算和参考。用户可以根据实际需求和参数选择，规划和优化Lora通信系统。 ### 回答3： LoRa速率计算工具是用于计算LoRa网络中数据传输的速率的工具。LoRa（长距离低功耗）是一种低功耗无线通信技术，通常用于物联网设备之间的通信。 LoRa速率计算工具可以通过输入不同参数来计算数据传输速率。这些参数包括发射功率、信道带宽、扩频因子和编码率等。发射功率是指发送方向空中传输的功率。信道带宽是指用于传输数据的频谱范围。扩频因子是指扩展信号以提供更好的抗干扰能力的参数。编码率是指用于纠错的编码技术。 使用LoRa速率计算工具可以帮助我们优化数据传输速率。根据所需的传输范围和数据负载，我们可以选择适当的发射功率、信道带宽、扩频因子和编码率。较高的发射功率可以提供更远的传输距离，但会消耗更多的能量。较宽的信道带宽可以提供更高的传输速率，但也会导致更高的功耗。较高的扩频因子可以提供更好的抗干扰能力，但也会减慢数据传输速率。较高的编码率可以提供更好的纠错能力，但也会减少数据传输速率。 总之，LoRa速率计算工具是一个有用的工具，可以帮助我们根据特定的要求和限制选择最佳的LoRa参数，以实现高效的数据传输。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值