400字范文 > HTML+CSS期末大作业：音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) H

HTML+CSS期末大作业：音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) H

时间：2023-11-30 08:45:56

HTML+CSS期末大作业：在线音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

🧡作者主页

🧡HTML期末大作业文章专栏

作品介绍

1.网页作品简介：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML+CSS期末大作业：在线音乐网站设计——简洁大气的KK音乐官网模板html源码(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、完整源码六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Demo</title><link rel="icon" href="favicons/1.png"><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/index.css"></head><body><header class="header"><div class="header-container"><div class="header-top"><a href="#" class="logo"></a><nav class="header-nav"><ul><li><a href="#" class="header-nav__cur">音乐馆</a></li><li><a href="#">我的音乐</a></li><li><a href="#">下载客户端</a></li><li><a href="#">VIP</a></li></ul></nav><div class="header-search"><input type="text" class="text" placeholder="here..."><div class="btn"><i class="icon-sprite"></i></div><div class="result"><a href="#" class="result-item"><span class="rank">1</span><span class="title">默</span><span class="num">3.4万</span></a><a href="#" class="result-item"><span class="rank">2</span><span class="title">侧田</span><span class="num">3.4万</span></a><a href="#" class="result-item"><span class="rank">3</span><span class="title">让我留在你身边</span><span class="num">3.4万</span></a><a href="#" class="result-item"><span class="rank">4</span><span class="title">皮皮虾我们走</span><span class="num">3.4万</span></a><a href="#" class="result-item"><span class="rank">5</span><span class="title">欢乐好声音</span><span class="num">3.4万</span></a><div class="history"><span>搜索历史</span><i class="icon-sprite"></i></div></div></div><div class="header-login"><a href="#" class="login">Login</a><a href="#" class="open-green">开通绿钻豪华版</a><a href="#" class="open-vip">开通付费包</a></div></div><ul class="header-subNav"><li><a href="#" class="subNav-cur">首页</a></li><li><a href="#">歌手</a></li><li><a href="#">专辑</a></li><li><a href="#">排行榜</a></li><li><a href="#">分类歌单</a></li><li><a href="#">MV</a></li></ul></div></header><div class="main" id="newSong"><div class="main-inner"><div class="main-title"><h2 class="title"><i></i></h2><span class="line line-left"></span><span class="line line-right"></span></div><a href="#" class="readAll">全部<i class="icon-sprite"></i></a><div class="main-tab tab-title"><a href="javascript:;" class="item item-cur">全部</a><a href="javascript:;" class="item">华语</a><a href="javascript:;" class="item">欧美</a><a href="javascript:;" class="item">韩国</a><a href="javascript:;" class="item">日本</a></div><div class="main-slider tab-cont"><ul class="slider-wrapper"><li><a href="#" class="img"><img src="images/cont/slider_img1.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img2.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img3.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img4.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img1.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img2.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img3.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img4.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img1.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img2.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img3.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img4.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">范玮琪</a></div></li></ul><div class="slider-btns"><span class="cur"><i></i></span><span><i></i></span><span><i></i></span></div></div></div><div class="main-operate"><a href="javascript:;" class="slider-prev"><i class="icon-sprite"></i></a><a href="javascript:;" class="slider-next"><i class="icon-sprite"></i></a></div></div><div class="main" id="recommend"><div class="main-inner"><div class="main-title"><h2 class="title"><i></i></h2><span class="line line-left"></span><span class="line line-right"></span></div><div class="carousel"><div class="carousel-slider"><a href="#" class="item item-pic1"><img src="images/cont/carousel_img1.jpg" alt="#"></a><a href="#" class="item item-pic2"><img src="images/cont/carousel_img2.jpg" alt="#"></a><a href="#" class="item item-pic3"><img src="images/cont/carousel_img3.jpg" alt="#"></a><a href="#" class="item item-pic4"><img src="images/cont/carousel_img4.jpg" alt="#"></a><a href="#" class="item item-pic5"><img src="images/cont/carousel_img5.jpg" alt="#"></a><a href="#" class="item item-pic6"><img src="images/cont/carousel_img6.jpg" alt="#"></a></div></div></div><div class="main-operate"><a href="#" class="slider-prev"><i class="icon-sprite"></i></a><a href="#" class="slider-next"><i class="icon-sprite"></i></a></div></div><div class="main" id="rank"><div class="main-inner"><div class="main-title"><h2 class="title"><i></i></h2><span class="line line-left"></span><span class="line line-right"></span></div><a href="#" class="readAll">全部<i class="icon-sprite"></i></a><ul class="rank-list"><li class="rank-list__item rank-list__1"><span class="rank-bg"></span><span class="mask"></span><i class="icon-play"></i><div class="title"><i></i><h3>流行指数</h3></div><i class="line"></i><ul class="song-list"><li class="song-list__item"><a href="#"><span>1</span>默 (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>2</span>月亮粑粑 (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>3</span>Uptown Funk (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>4</span>你永远不知道 (Live)</a><span>张杰</span></li></ul></li><li class="rank-list__item rank-list__2"><span class="rank-bg"></span><span class="mask"></span><i class="icon-play"></i><div class="title"><i></i><h3>热歌</h3></div><i class="line"></i><ul class="song-list"><li class="song-list__item"><a href="#"><span>1</span>默 (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>2</span>月亮粑粑 (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>3</span>Uptown Funk (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>4</span>你永远不知道 (Live)</a><span>张杰</span></li></ul></li><li class="rank-list__item rank-list__3"><span class="rank-bg"></span><span class="mask"></span><i class="icon-play"></i><div class="title"><i></i><h3>新歌</h3></div><i class="line"></i><ul class="song-list"><li class="song-list__item"><a href="#"><span>1</span>默 (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>2</span>月亮粑粑 (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>3</span>Uptown Funk (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>4</span>你永远不知道 (Live)</a><span>张杰</span></li></ul></li><li class="rank-list__item rank-list__4"><span class="rank-bg"></span><span class="mask"></span><i class="icon-play"></i><div class="title"><i></i><h3>欧美歌曲</h3></div><i class="line"></i><ul class="song-list"><li class="song-list__item"><a href="#"><span>1</span>默 (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>2</span>月亮粑粑 (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>3</span>Uptown Funk (Live)</a><span>张杰</span></li><li class="song-list__item"><a href="#"><span>4</span>你永远不知道 (Live)</a><span>张杰</span></li></ul></li></ul></div></div><div class="main" id="hotSong"><div class="main-inner"><div class="main-title"><h2 class="title"><i></i></h2><span class="line line-left"></span><span class="line line-right"></span></div><div class="main-slider"><ul class="slider-wrapper"><li><a href="#" class="img"><img src="images/cont/slider_img1.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">殿堂金钻认证：BIGBANG最热歌曲大合集</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img2.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img3.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img4.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img5.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img6.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img7.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img8.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img9.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img10.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img11.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li><li><a href="#" class="img"><img src="images/cont/slider_img12.jpg" alt="#"><span class="mask"></span><i class="icon-play"></i></a><div class="info"><div class="title"><a href="#">那个静默的阳光午后</a><i class="icon-sprite"></i></div><a href="#" class="author">播放量：179.7万</a></div></li></ul><div class="slider-btns"><span class="cur"><i></i></span><span><i></i></span><span><i></i></span></div></div></div><div class="main-operate"><a href="javascript:;" class="slider-prev"><i class="icon-sprite"></i></a><a href="javascript:;" class="slider-next"><i class="icon-sprite"></i></a></div></div><div class="main" id="mv"><div class="main-inner"><div class="main-title"><h2 class="title"><i></i></h2><span class="line line-left"></span><span class="line line-right"></span></div><a href="#" class="readAll">全部<i class="icon-sprite"></i></a><div class="main-tab tab-title"><a href="javascript:;" class="item item-cur">全部</a><a href="javascript:;" class="item">华语</a><a href="javascript:;" class="item">欧美</a><a href="javascript:;" class="item">港台</a><a href="javascript:;" class="item">韩国</a><a href="javascript:;" class="item">日本</a></div><ul class="mv-list tab-cont"><li class="item"><a href="#" class="img"><img src="images/cont/mv_img1.jpg" alt="#"><i class="icon-play"></i></a><div class="info"><a href="#" class="title">Let Me Love You</a><a href="#" class="author">刘惜君</a><span class="play-total"><i class="icon-sprite"></i>18.8万</span></div></li><li class="item"><a href="#" class="img"><img src="images/cont/mv_img2.jpg" alt="#"><i class="icon-play"></i></a><div class="info"><a href="#" class="title">Let Me Love You</a><a href="#" class="author">刘惜君</a><span class="play-total"><i class="icon-sprite"></i>18.8万</span></div></li><li class="item"><a href="#" class="img"><img src="images/cont/mv_img3.jpg" alt="#"><i class="icon-play"></i></a><div class="info"><a href="#" class="title">Let Me Love You</a><a href="#" class="author">刘惜君</a><span class="play-total"><i class="icon-sprite"></i>18.8万</span></div></li><li class="item"><a href="#" class="img"><img src="images/cont/mv_img4.jpg" alt="#"><i class="icon-play"></i></a><div class="info"><a href="#" class="title">Let Me Love You</a><a href="#" class="author">刘惜君</a><span class="play-total"><i class="icon-sprite"></i>18.8万</span></div></li><li class="item"><a href="#" class="img"><img src="images/cont/mv_img5.jpg" alt="#"><i class="icon-play"></i></a><div class="info"><a href="#" class="title">Let Me Love You</a><a href="#" class="author">刘惜君</a><span class="play-total"><i class="icon-sprite"></i>18.8万</span></div></li><li class="item"><a href="#" class="img"><img src="images/cont/mv_img6.jpg" alt="#"><i class="icon-play"></i></a><div class="info"><a href="#" class="title">Let Me Love You</a><a href="#" class="author">刘惜君</a><span class="play-total"><i class="icon-sprite"></i>18.8万</span></div></li><li class="item"><a href="#" class="img"><img src="images/cont/mv_img7.jpg" alt="#"><i class="icon-play"></i></a><div class="info"><a href="#" class="title">Let Me Love You</a><a href="#" class="author">刘惜君</a><span class="play-total"><i class="icon-sprite"></i>18.8万</span></div></li><li class="item"><a href="#" class="img"><img src="images/cont/mv_img8.jpg" alt="#"><i class="icon-play"></i></a><div class="info"><a href="#" class="title">Let Me Love You</a><a href="#" class="author">刘惜君</a><span class="play-total"><i class="icon-sprite"></i>18.8万</span></div></li></ul></div></div><footer class="footer"><div class="footer-inner"><div class="footer-info"><div class="footer-info__download"><h3>下载KK音乐客户端</h3><ul class="list"><li><a href="#"><i class="footer-icon icon-pc"></i>PC版</a></li><li><a href="#"><i class="footer-icon icon-mac"></i>Mac版</a></li><li><a href="#"><i class="footer-icon icon-android"></i>Android版</a></li><li><a href="#"><i class="footer-icon icon-iphone"></i>iPhone版</a></li></ul></div><div class="footer-info__product"><h3>特色产品</h3><ul class="list"><li class="hasPic"><a href="#"><i class="footer-icon icon-kg"></i>全民K歌</a></li><li class="hasPic"><a href="#"><i class="footer-icon icon-ss"></i>全民K歌</a></li><li class="hasPic"><a href="#"><i class="footer-icon icon-qp"></i>全民K歌</a></li><li><a href="#">KK音乐原创音乐平台</a></li><li><a href="#">上传视频</a></li><li><a href="#">上传视频</a></li><li><a href="#">上传视频</a></li></ul></div><div class="footer-info__link"><h3>特色产品</h3><ul class="list"><li><a href="#">CJ E&M</a></li><li><a href="#">我们视频</a></li><li><a href="#">手机KK空间</a></li><li><a href="#">CJ E&M</a></li><li><a href="#">我们视频</a></li><li><a href="#">手机KK空间</a></li><li><a href="#">CJ E&M</a></li><li><a href="#">我们视频</a></li><li><a href="#">手机KK空间</a></li><li><a href="#">CJ E&M</a></li><li><a href="#">我们视频</a></li><li><a href="#">手机KK空间</a></li></ul></div></div><div class="footer-copyright"><p><a href="#">关于我们</a><span>|</span><a href="#">关于我们</a><span>|</span><a href="#">关于我们</a><span>|</span><a href="#">关于我们</a><span>|</span><a href="#">关于我们</a><span>|</span><a href="#">关于我们</a><span>|</span><a href="#">关于我们</a><span>|</span><a href="#">关于我们</a></p><p>Copyright © 1998 - kk. All Rights Reserved.</p><p>我们公司版权所有我们网络文化经营许可证</p></div></div></footer><ul class="slider-share"><li><a href="#"><i class="icon-sprite icon-add"></i>添加到<i class="icon-sprite icon-arrow"></i></a></li><li><a href="#"><i class="icon-sprite icon-share"></i>分享<i class="icon-sprite icon-arrow"></i></a></li><li><a href="#"><i class="icon-sprite icon-download"></i>下载</a></li></ul><script src="js/jquery.min.js"></script><script src="js/script.js"></script></body></html>