文章目录
- 一、项目介绍
- 二、项目展示
- 三、源码展示
- 四、获取源码
一、项目介绍
课设是要仿照酷狗音乐的首页进行设计。酷狗音乐是国内知名的音乐应用程序,凭借其优秀的音乐库和智能推荐功能吸引了大量用户群体。模仿酷狗音乐的首页设计,可以让课设展现出专业水准,体现出对优秀产品设计的理解。
二、项目展示
首页
榜单
歌单
电台
三、源码展示
首页
<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">更 多</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&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">更 多</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&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>
四、获取源码
源码已经打包了，点击下面蓝色链接获取！
点我获取源码
