时间：2023-09-24 17:06:01 | 来源：网站运营
时间：2023-09-24 17:06:01 来源：网站运营
HTML如何制作音乐网站（如何搭建个人音乐网页）：精彩专栏推荐 文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业： 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式：【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码：【 Echarts大屏展示大数据平台可视化(150套) 】 HTML+CSS+JS实例代码： 【 ️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中...】 免费且实用的WEB前端学习指南： 【 web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1） html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。<!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> <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="#">那个静默的阳光午后</a> --> <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> </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 - 2017 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>/* ====== general ====== */.clearfix { zoom: 1;}.clearfix:after { content: "020"; height: 0; display: block; clear: both; visibility: hidden;}.fl { float: left;}.fr { float: right;}.icon-sprite { background: url(../images/icon_sprite.png) no-repeat;}/* ====== public ====== */.main { overflow: hidden; position: relative;}.main-inner { position: relative; width: 1200px; margin: 0 auto;}.main-title { position: relative; width: 490px; height: 46px; padding-top: 80px; margin: 0 auto 50px;}.main-title .title { width: 490px; text-align: center;}.main-title .title i { display: inline-block; width: 196px; height: 46px; background: url(../images/main_title.png) no-repeat;}.main-title .line { position: absolute; top: 104px; width: 72px; height: 1px; background-color: #fff; opacity: .1;}.main-title .line-left { left: 0;}.main-title .line-right { right: 0;}.readAll { position: absolute; right: 0; color: #fff; font-size: 15px;}.readAll i { display: inline-block; width: 7px; height: 12px; margin-left: 6px; background-position: -40px -260px;}.readAll:hover i { background-position: -120px -60px;}.main-tab { text-align: center; font-size: 0;}.main-tab .item { display: inline-block; height: 50px; font-size: 16px; margin: 0 35px; color: #fff; opacity: .5;}.main-tab .item:hover,.main-tab .item-cur { opacity: 1;}.main-slider { overflow: hidden; width: 1200px;}.main-slider .slider-wrapper { position: relative; left: 0; height: 414px; margin-bottom: 35px;}.slider-wrapper li { float: left; width: 300px; height: 414px;}.slider-wrapper .img { position: relative; overflow: hidden; width: 300px; height: 300px;}/* .slider-wrapper .img img,.slider-wrapper .img i,.main .mask,.main .icon-play { transition: all 0.4s; -webkit-transition: all 0.4s;}.slider-wrapper .img:hover img { transform: scale(1.07); -webkit-transform: scale(1.07);} */.main .img img,.main .img i,.main .mask,.main .icon-play { transition: all 0.4s; -webkit-transition: all 0.4s;}.main .img:hover img { transform: scale(1.07); -webkit-transform: scale(1.07);}.main .mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0;}.main .icon-play { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px; background: url(../images/icon_play.png) no-repeat; opacity: 0; transform: scale(0.7); -webkit-transform: scale(0.7);}/* play && mask 这里有一个就复制一个过来 */.slider-wrapper .img:hover .mask,.rank-list__item:hover .mask { opacity: 0.4;}.slider-wrapper .img:hover .icon-play,.rank-list__item:hover .icon-play,.mv-list .item:hover .icon-play { opacity: 1; transform: scale(1); -webkit-transform: scale(1);}.slider-wrapper .info { width: 100%; height: 114px; background-color: rgba(0, 0, 0, .8); text-align: center; font-size: 16px;}.slider-wrapper .info-event .info { background-color: rgba(0, 0, 0, .6);}.slider-wrapper li:hover .info { background-color: #31c27c !important;}.slider-wrapper .info .title { padding-top: 34px;}.slider-wrapper .info .title a,.slider-wrapper .info .title .icon-sprite { display: inline-block; color: #fff;}.slider-wrapper .info .icon-sprite { opacity: 0; display: inline-block; width: 20px; height: 20px; vertical-align: top; background-position: -180px -100px; transition: opacity 0.4s; -webkit-transition: opacity 0.4s;}.slider-wrapper li:hover .info .icon-sprite { opacity: 1;}.slider-wrapper .info .author { line-height: 44px; color: #999;}.slider-wrapper li:hover .info .author { display: inline-block; color: #c1e9d5;}.slider-btns { text-align: center; font-size: 0;} border-radius:2em;}::-webkit-scrollbar-thumb:hover { background-color: #666;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：音乐
