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

原创 已于 2024-09-13 11:18:25 修改 · 1.6k 阅读 · 29 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #课程设计

于 2024-06-10 17:46:31 首次发布

文章目录

一、项目介绍

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

二、项目展示

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

三、源码展示

首页

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

四、获取源码

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

点我获取源码

java仿酷狗音乐源码_【附项目源码】仿酷狗音乐客户端，浅淡动感歌词补充
weixin_42375011的博客
02-25 1370
原标题：【附项目源码】仿酷狗音乐客户端，浅淡动感歌词补充1.前言之前写了几篇关于动感歌词的简单介绍，相信大家还有印象，这里就不多说了，这篇要说的是，关于翻译歌词和音译歌词，以及我在解析和显示这两种歌词的时候，遇到的一些难题、技术和心得。前面几篇可以点击文末左下角“阅读原文”查看。2.完整项目效果图 3.动感歌词格式下面我简单说一下，关于翻译歌词和音译歌词保存在哪里的问题。因为我主要研究的是krc歌...
基于HTML+CSS+JavaScript仿华为手机电子商城
专注于dreamweaver网页设计制作
08-19 288
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
仿酷狗音乐播放器源码
09-25
类似酷狗音乐播放器，很不错的源代码，值得学习！
html+css+js 制作 PC 端酷狗音乐网页
weixin_62332711的博客
02-19 3305
突然翻出来之前用 html+css+js 做的酷狗音乐，纪念一下，哈哈，那时候还挺认真的~😃，希望现在也能回到之前的状态。
Java仿酷狗音乐官网源码
01-06
Java仿酷狗音乐官网源码，网页播放器，酷狗游戏，下载客户端，分类：乐库，电台，MV，资讯，美女秀场，音乐达人，推荐，排行榜，精选，好歌，抢先听等功能
html仿酷狗音乐,winform 仿酷狗音乐列表(非常不错)
weixin_35836501的博客
06-03 559
【实例简介】【实例截图】【核心代码】using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;using ...
基于HTML实现的仿酷狗音乐手机wap网站模板(css+html+js+图样).zip
04-27
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
HTML5+CSS3+JAVASCRIPT仿酷我音乐app部分页面
最新发布
qq_30775283的博客
06-23 788
【代码】HTML5+CSS3+JAVASCRIPT仿酷我音乐app部分页面。
QT仿酷狗
chinaverygood的专栏
08-08 1877
最近项目比较轻松，抽时间看了两天QT，光看没感觉，闲着没事写了个QT仿酷狗，还有很多不足之处，后续慢慢完善，先看看效果把， 平时主要是做MFC的 ，也做过DUI，对windows下的客户端比较熟悉，用了一个月的QT才知道，其实windows界面库确实存在很多的先天不足，用QT实现一些功能有时候出乎意料的效果， 比如WIndows最常见的界面闪动问题，可以说这是一个令所有windows开发
高仿精仿酷狗音乐播放器源码完整版
移动开发记录
05-20 2722
今天给大家分享一款非常不错的android源码，高仿精仿酷狗音乐播放器源码完整版，希望大家能够喜欢。 源码下载： http://code.662p.com/view/56.html
仿酷狗播放器
11-14
模仿酷狗的音乐播放器，内含三个项目，分别是音乐播放器MusicPlayer、音乐服务器MusicServer、以及服务器管理ServerManage，适用于有兴趣的学习。
仿酷狗音乐播放器Redrain仿酷狗音乐播放器.zip
07-19
Redrain仿酷狗音乐播放器     这篇文章只是对开源的说明！关于这个Redrain音乐盒的发布程序的说明和使用方法，见《Redrain仿酷狗音乐播放器开发完毕，发布测试程序》。    今天，我把这个项目的源代码上传。包括了可以编译工程所需的所有代码文件，已经软件的布局文件，但是没有包括软件需要的素材，这也是为了避免引起与酷狗播放器的版权问题。        我在这个项目中使用的是 UiLib 库而不是 DuiLib 库，UiLib库是DuiLib库的扩展版本，增加了一些动画控件的支持，扩展了部分控件，但是核心代码并没有改变，与DuiLib使用方法完全一样，也可以用UiLib库直接编译使用 DuiLib 库编写的代码。项目中的 UiLib 是我为了适应仿酷狗而专门修改过的，也修复过必要的 bug，所以如果你使用原版的 DuiLib 或者 UiLib 库去编译这个功能，最终的程序效果和我发布的不一样。关于 bug的修复请看博客中更早期的文章。我自己使用并且维护的DuiLib库和UiLib库的下载地址见博客：《Redrain个人维护并使用的DuiLib和UiLib库源码下载地址》       在这个项目源码中，同时包含了webkit内核浏览器控件、音乐播放类、换肤功能、拖拽功能、菜单等等。这个菜单的功能如下：         1、可以展现多级菜单         2、可内嵌自定义控件，并且控件可以向主窗体发送消息，如图的红色叹号就是个按钮控件，可以制作酷狗音乐的托盘菜单的播放暂停按钮和进度控制进度条。         3、菜单拥有阴影效果         4、菜单可以自定义前方显示小图标，并且可以控制图标的大小和是否显示         5、菜单可以根据是否拥有子菜单决定是否显示小箭头         6、菜单可以添加分割线         7、每个菜单项都可以单选和复选的功能         8、优化菜单的xml描述文件，编写方便容易，如果要写一个二级菜单，比如编写图片中的菜单测试4以及他的子菜单，只需如下代码就可以了         9、可以通过键盘的按钮控制菜单的选项         10、每个菜单项的高度宽度是任意调整的 在这个项目中，还有一些未实现的功能，但是我并不打算继续完成这些功能了：      1、退出程序时逐渐缩小的动画特效      2、各个菜单的响应      3、歌词功能（已经有网友做出来了，我就不另外做了）      4、嵌入桌面的桌面歌词 注意 此项目开源代码只是为了学习交流，不可用于商业程序，源码对使用者造成的损失，概不负责！ 源码下载地址：点击打开链接 via http://blog.youkuaiyun.com/zhuhongshu/article/details/41037875
前端项目源码 前端项目源码 前端项目源码
01-12
前端项目源码 前端项目源码 前端项目源码
Web前端开发实训项目源代码
01-24
用bootstrap做的一个校园前端实训项目，有很强的参考价值。
android仿酷狗音乐播放器
06-02
仿酷狗音乐
html5酷狗音乐网页代码,酷狗音乐
weixin_42364040的博客
06-04 3684
ECAT翼少年 - 关键任务{"pay_type_320":3,"m4afilesize":0,"price_sq":200,"first":1,"filesize":3265721,"bitrate":128,"trans_param":{"cid":152574646,"cpy_attr0":0,"pay_block_tpl":1,"musicpack_advance":0,"display_...
Qt/C++ 模仿 酷狗音乐播放器
热门推荐
小乌龟的博客
12-19 3万+
注：我重新用markDown来编辑文章，所以把以前的博文删掉了~大家的评论没有了，不好意思哈~一，先上图 主界面 搜索界面 菜单 模式和音量 托盘菜单 精准歌词 MV 二，遇到的问题　　1. 刚开始不知道如何缩放无边框程序，琢磨了许久。。。 　　2. 播放列表的的那一坨！！不知道怎么搞，但还是被机智的我解决 　　3. QTableWidget的平滑滚动问题也是个头大
教你实现仿酷狗播放器(附源码)
qq_45768871的博客
04-25 2921
文章目录教你实现仿酷狗播放器CSSHTML & JavaScript后记 教你实现仿酷狗播放器 CSS <style> @charset "utf-8"; html, body, div, span, applet, object, iframe, ...
Android仿酷狗SlidingMenuLayout界面实现
aakzhangliangming的专栏
06-18 1481
引言该SlidingMenuLayout主要实现了左边侧边栏、主界面和多个Fragment功能。该控件主要是参考酷狗界面的功能，左侧菜单可设置缩放动画，及打开多个Fragment功能。该控件在后期会整合到乐乐音乐播放器项目中去。需求侧边栏处理与viewpager控件的冲突多个Fragment功能预览图imageimageimageimage实现思路imageimageimage源码具体的代码和调用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值