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

一、项目介绍

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

二、项目展示

首页

榜单

歌单

电台

三、源码展示

首页

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

四、获取源码

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

点我获取源码