時(shí)間：2023-09-24 17:06:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-24 17:06:01 來源：網(wǎng)站運(yùn)營
HTML如何制作音樂網(wǎng)站（如何搭建個(gè)人音樂網(wǎng)頁）：精彩專欄推薦 文末獲取聯(lián)系 ?? 作者簡介: 一個(gè)熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁: 【主頁—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 Echarts大屏展示大數(shù)據(jù)平臺(tái)可視化(150套) 】 HTML+CSS+JS實(shí)例代碼： 【 ?HTML+CSS+JS實(shí)例代碼 (炫酷特效網(wǎng)頁代碼) 繼續(xù)更新中...】 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南： 【 web前端零基礎(chǔ)到高級(jí)學(xué)習(xí)視頻教程 120G干貨分享】 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對(duì)于技術(shù)的探索和追求從未停歇。 堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開來！
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁、其他html為二級(jí)頁面； （2） css文件包含：css全部頁面樣式,文字滾動(dòng), 圖片放大等； （3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。<!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>你永遠(yuǎn)不知道 (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>你永遠(yuǎn)不知道 (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>你永遠(yuǎn)不知道 (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="#">那個(gè)靜默的陽光午后</a> --> <a href="#">殿堂金鉆認(rèn)證：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="#">那個(gè)靜默的陽光午后</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="#">那個(gè)靜默的陽光午后</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="#">那個(gè)靜默的陽光午后</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="#">那個(gè)靜默的陽光午后</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="#">那個(gè)靜默的陽光午后</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="#">那個(gè)靜默的陽光午后</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="#">關(guān)于我們</a><span>|</span><a href="#">關(guān)于我們</a><span>|</span><a href="#">關(guān)于我們</a><span>|</span><a href="#">關(guān)于我們</a><span>|</span><a href="#">關(guān)于我們</a><span>|</span><a href="#">關(guān)于我們</a><span>|</span><a href="#">關(guān)于我們</a><span>|</span><a href="#">關(guān)于我們</a></p> <p>Copyright ? 1998 - 2017 kk. All Rights Reserved.</p> <p>我們公司 版權(quán)所有 我們網(wǎng)絡(luò)文化經(jīng)營許可證</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 這里有一個(gè)就復(fù)制一個(gè)過來 */.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;}請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：音樂
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
