時(shí)間：2023-07-03 05:30:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-03 05:30:01 來源：網(wǎng)站運(yùn)營
HTML期末大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)--官網(wǎng)仿qq音樂(1頁)：?> ? 源碼獲取 文末聯(lián)系 ?Web前端開發(fā)技術(shù) 描述 網(wǎng)頁設(shè)計(jì)題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計(jì)期末課程大作業(yè) |音樂網(wǎng)頁設(shè)計(jì) | 仿網(wǎng)易云音樂 | 各大音樂官網(wǎng)網(wǎng)頁 | 明星音樂演唱會(huì)主題 | 爵士樂音樂 | 民族音樂 | 等網(wǎng)站的設(shè)計(jì)與制作 | HTML期末大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)，Web大學(xué)生網(wǎng)頁
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QQ音樂</title> <link rel="stylesheet" href="css/style.css"></head><body><!--頭部--><div class="head"> <div class="head_con"> <h1 class="logo"><a href="#"><img src="picture/logo.png" alt=""></a></h1> <ul class="top_list"> <li class="current"><a href="#">音樂館</a></li> <li><a href="#">我的音樂</a></li> <li class="spec"><a href="#">客戶端</a><img src="picture/mark_1.png"></li> <li><a href="#">開發(fā)平臺</a></li> <li><a href="#">VIP</a></li> </ul> <div class="head_search"> <input type="text" class="sear_input" placeholder="搜索音樂、MV、歌單、用戶"> <button> <i></i> </button> </div> <div class="head_right"> <a href="#" class="land">登錄</a> <a href="#" class="open_v">開通VIP</a> <a href="#" class="recharge">充值</a> </div> <ul class="subnav"> <li><a href="#">首頁</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="#">電臺</a></li> <li><a href="#">MV</a></li> <li><a href="#">數(shù)字專輯</a></li> <li><a href="#">票務(wù)</a></li> </ul> </div></div><!--歌單推薦--><div class="song-reco"> <div class="reco-con"> <h2 class="tit">歌單推薦</h2> <ul class="reco-list"> <li class="play_name"> <div class="list_pic"> <div class="ico_play"></div> <img src="picture/recommend-01.png" alt="無法顯示"> </div> <h4 class="list_tit"><a href="#">祝你生日快樂</a></h4> </li> <li class="play_name"> <div class="list_pic"> <div class="ico_play"></div> <img src="picture/recommend-02.png" alt="無法顯示"> </div> <h4 class="list_tit"><a href="#">學(xué)習(xí)工作閱讀|柔和靜心輕音樂</a></h4> </li> <li class="play_name"> <div class="list_pic"> <div class="ico_play"></div> <img src="picture/recommend-03.png" alt="無法顯示"> </div> <h4 class="list_tit"><a href="#">Boom Boom 心動(dòng)預(yù)警來襲</a></h4> </li> <li class="play_name"> <div class="list_pic"> <div class="ico_play"></div> <img src="picture/recommend-04.png" alt="無法顯示"> </div> <h4 class="list_tit"><a href="#">【極喪】細(xì)節(jié)中崩潰</a></h4> </li> <li class="nomargin play_name"> <div class="list_pic"> <div class="ico_play"></div> <img src="picture/recommend-05.png" alt="無法顯示"> </div> <h4 class="list_tit"><a href="#">治愈鋼琴曲靜心｜仰望晨光熹微</a></h4> </li> </ul> </div></div><!--新歌首發(fā)--><div class="new_song"> <div class="song_con"> <h2 class="tit">新歌首發(fā)</h2> <div class="tab"> <a href="#">最新</a> <a href="#">內(nèi)地</a> <a href="#">港臺</a> <a href="#">歐美</a> <a href="#">韓國</a> <a href="#">日本</a> </div> <ul class="song_list"> <li> <div class="pic"> <a href="#"><img src="picture/song-01.Png" alt=""> </a> </div> <div class="txt"> <h3><a href="#">青春如你《榮耀乒乓》電視劇片尾曲</a></h3> <p><a href="#">UNINE</a></p> </div> <div class="time">03:40</div> </li> <li> <div class="pic"> <a href="#"><img src="picture/song-02.Png" alt=""></a> </div> <div class="txt"> <h3><a href="#">吉祥話</a></h3> <p><a href="#">hanser/泠鳶yousa/祖婭納</a></p> </div> <div class="time">04:28</div> </li> <li class="nomargin"> <div class="pic"> <a href="#"><img src="picture/song-03.Png" alt=""></a> </div> <div class="txt"> <h3><a href="#">One LastKiss《新世紀(jì)福音戰(zhàn)士:終》劇場版主題曲</a></h3> <p><a href="#">宇多田光(宇多田匕力兒)</a></p> </div> <div class="time">04:12</div> </li> <li> <div class="pic"> <a href="#"><img src="picture/song-04.Png" alt=""></a> </div> <div class="txt"> <h3><a href="#">如夢非夢《如夢令》微劇憾愛版主題曲</a></h3> <p><a href="#">雙筆</a></p> </div> <div class="time">03:41</div> </li> <li> <div class="pic"> <a href="#"><img src="picture/song-05.Png" alt=""></a> </div> <div class="txt"> <h3><a href="#">笑看江湖《山河令》網(wǎng)劇江湖推廣曲</a></h3> <p><a href="#">滿舒克</a></p> </div> <div class="time">03:22</div> </li> <li class="nomargin"> <div class="pic"> <a href="#"><img src="picture/song-06.Png" alt=""></a> </div> <div class="txt"> <h3><a href="#">相信希望(Believe)《復(fù)工》紀(jì)錄片主題曲</a></h3> <p><a href="#">FIR飛兒樂團(tuán)</a></p> </div> <div class="time">05:14</div> </li> <li> <div class="pic"> <a href="#"><img src="picture/song-07.Png" alt=""></a> </div> <div class="txt"> <h3><a href="#">Winner Ready2021PEL開賽曲 韓劇主題曲</a></h3> <p><a href="#">Ailee</a></p> </div> <div class="time">04:18</div> </li> <li> <div class="pic"> <a href="#"><img src="picture/song-08.Png" alt=""></a> </div> <div class="txt"> <h3><a href="#">Winner Ready2021PEL開賽曲</a></h3> <p><a href="#">艾福杰尼</a></p> </div> <div class="time">03:32</div> </li> <li class="nomargin"> <div class="pic"> <a href="#"><img src="picture/song-09.Png" alt=""></a> </div> <div class="txt"> <h3><a href="#">秘境(KickBack)</a></h3> <p><a href="#">威神V</a></p> </div> <div class="time">03:40</div> </li> </ul> </div></div><!--精彩推薦--><div class="brilliant"> <div class="bri_con"> <h2 class="tit">精彩推薦</h2> <ul class="bri_list"> <li> <a href="#"><img src="picture/bri-01.png"></a> </li> <li class="flo_rig"> <a href="#"><img src="picture/bri-02.png"></a> </li> </ul> </div></div><!--新碟首發(fā)--><div class="new_disc"> <div class="disc_con"> <h2 class="tit">新碟首發(fā)</h2> <div class="tab"> <a href="#">內(nèi)地</a> <a href="#">港臺</a> <a href="#">歐美</a> <a href="#">韓國</a> <a href="#">日本</a> <a href="#">其他</a> </div> <ul class="disc_list"> <li class="playlist_item"> <div class="play_pic "> <a href="#"><img src="picture/new_disc-01.PNG" alt=""></a> </div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">甜甜的你</a> </span> </h4> <div class="playlist_author"> <a href="#">蝴蝶效應(yīng)（B.E.）</a> </div> </li> <li class="playlist_item"> <div class="play_pic"> <a href="#"><img src="picture/new_disc-02.PNG" alt=""></a> </div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">其實(shí)你不懂我的心</a> </span> </h4> <div class="playlist_author"> <a href="#">INTO1-林墨</a> </div> </li> <li class="playlist_item"> <div class="play_pic"> <a href="#"><img src="picture/new_disc-03.PNG" alt=""></a> </div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">可以</a> </span> </h4> <div class="playlist_author"> <a href="#">賀一航</a> </div> </li> <li class="playlist_item"> <div class="play_pic"> <a href="#"><img src="picture/new_disc-04.PNG" alt=""></a> </div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">鋤禾日當(dāng)午</a> </span> </h4> <div class="playlist_author"> <a href="#">金志文</a> </div> </li> <li class="playlist_item"> <div class="play_pic"> <a href="#"><img src="picture/new_disc-05.PNG" alt=""></a> </div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">星月(The MoonStar）（prod.大副）</a> </span> </h4> <div class="playlist_author"> <a href="#">左良甫</a> </div> </li> <li class="playlist_item"> <div class="play_pic"> <a href="#"><img src="picture/new_disc-06.PNG" alt=""></a> </div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">飛躍</a> </span> </h4> <div class="playlist_author"> <a href="#">凌LING</a> </div> </li> <li class="playlist_item"> <div class="play_pic"> <a href="#"><img src="picture/new_disc-07.PNG" alt=""></a> </div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">舊時(shí)雨</a> </span> </h4> <div class="playlist_author"> <a href="#">燒煤er/梅暢 </a> </div> </li> <li class="playlist_item"> <div class="play_pic"> <a href="#"><img src="picture/new_disc-08.PNG" alt=""></a> </div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">上癮</a> </span> </h4> <div class="playlist_author"> <a href="#">陳又又</a> </div> </li> <li class="playlist_item"> <div class="play_pic"> <a href="#"><img src="picture/new_disc-09.PNG" alt=""></a> </div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">山風(fēng)</a> </span> </h4> <div class="playlist_author"> <a href="#">秦瑜</a> </div> </li> <li class="playlist_item"> <div class="play_pic"> <a href="#"><img src="picture/new_disc-10.PNG" alt=""></a> </div> <div> <h4 class="playlist_title"> <span class="playlist_title_txt"> <a href="#">一劍江湖</a> </span> </h4> </div> <div class="playlist_author"> <a href="#">壹聲壹社</a> </div> </li> </ul> </div></div><!--排行榜--><div class="rank"> <div class="rank_con"> <h2 class="tit">排行榜</h2> <ul class="rank_list"> <li class="list_item"> <h3>熱歌</h3> <i></i> <ul class="item_del"> <li> <div class="num">1</div> <div class="del_txt"> <p><a href="#">清空</a></p> <p><a href="#">王汐辰/蘇星婕</a></p> </div> </li> <li> <div class="num">2</div> <div class="del_txt"> <p><a href="#">TA</a></p> <p><a href="#">不是花火呀</a></p> </div> </li> <li> <div class="num">3</div> <div class="del_txt"> <p><a href="#">星辰大海</a></p> <p><a href="#">黃霄云</a></p> </div> </li> </ul> </li> <li class="list_item two"> <h3>新歌</h3> <i></i> <ul class="item_del"> <li> <div class="num">1</div> <div class="del_txt"> <p><a href="#">氣象站臺</a></p> <p><a href="#">Uu</a></p> </div> </li> <li> <div class="num">2</div> <div class="del_txt"> <p><a href="#">藍(lán)色灰色</a></p> <p><a href="#">Zkaaai</a></p> </div> </li> <li> <div class="num">3</div> <div class="del_txt"> <p><a href="#">我叫長安你叫故里</a></p> <p><a href="#">尹昔眠/小田音樂社</a></p> </div> </li> </ul> </li> <li class="list_item three"> <h3>流行指數(shù)</h3> <i></i> <ul class="item_del"> <li> <div class="num">1</div> <div class="del_txt"> <p><a href="#">織夢</a></p> <p><a href="#">Chimney于恩眾</a></p> </div> </li> <li> <div class="num">2</div> <div class="del_txt"> <p><a href="#">終于等到這一句</a></p> <p><a href="#">小樂哥</a></p> </div> </li> <li> <div class="num">3</div> <div class="del_txt"> <p><a href="#">所有</a></p> <p><a href="#">楊博然</a></p> </div> </li> </ul> </li> <li class="list_item four"> <h3>歐美</h3> <i></i> <ul class="item_del"> <li> <div class="num">1</div> <div class="del_txt"> <p><a href="#">Love Story(Taylor's Version)</a></p> <p><a href="#">Taylor Swift</a></p> </div> </li> <li> <div class="num">2</div> <div class="del_txt"> <p><a href="#">FakeASmileAlanWalker</a></p> <p><a href="#">salemilese</a></p> </div> </li> <li> <div class="num">3</div> <div class="del_txt"> <p><a href="#">GasolineHAIM</a></p> <p><a href="#">TaylorSwift</a></p> </div> </li> </ul> </li> <li class="list_item five nomargin"> <h3>韓國</h3> <i></i> <ul class="item_del"> <li> <div class="num">1</div> <div class="del_txt"> <p><a href="#">TAIL</a></p> <p><a href="#">宣美</a></p> </div> </li> <li> <div class="num">2</div> <div class="del_txt"> <p><a href="#">MAGNETIC</a></p> <p><a href="#">Rain(鄭智薰)/王嘉爾</a></p> </div> </li> <li class="nomargin"> <div class="num">3</div> <div class="del_txt"> <p><a href="#">WhyWhyWhy</a></p> <p><a href="#">iKON</a></p> </div> </li> </ul> </li> </ul> </div></div><!--MV--><div class="movie"> <div class="movie_con"> <h2 class="tit">MV</h2> <div class="movie_tab"> <a href="#">精選</a> <a href="#">內(nèi)地</a> <a href="#">港臺</a> <a href="#">歐美</a> <a href="#">韓國</a> <a href="#">日本</a> <div class="check"> <a class="index_more" href="#">更多 <i class="icon_index_arrow sprite"></i> </a> </div> </div> <ul class="movie_list"> <li> <div> <a href="#"><img src="picture/movie-01.png"></a> <h3 class="movie_list_title">熱愛105℃的你 (《超能一家人》電影推廣曲) </h3> <p class="movie_list_singer">騰格爾/艾倫/沈騰</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>2.0萬</i> </span> </div> </div> <div> </div> </li> <li> <div> <a href="#"><img src="picture/movie-02.png"></a> <h3 class="movie_list_title">《小小的美好》</h3> <p class="movie_list_singer">黃齡/初音未來</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>6.5萬</i> </span> </div> </div> <div> </div> </li> <li> <div> <a href="#"><img src="picture/movie-03.png"></a> <h3 class="movie_list_title">為我們失去的(《穿過寒冬擁抱你 螢火(《終鑰之 歌》蟲穴主題曲)</h3> <p class="movie_list_singer">硬糖少女303希林娜依-高</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>8.1萬</i> </span> </div> </div> <div> </div> </li> <li> <div> <a href="#"><img src="picture/movie-04.png"></a> <h3 class="movie_list_title">螢火(《終鑰之歌》蟲穴主題曲)</h3> <p class="movie_list_singer">阿云順</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>11.6萬</i> </span> </div> </div> <div> </div> </li> <li class="nomargin"> <div> <a href="#"><img src="picture/movie-05.png"></a> <h3 class="movie_list_title">《父親的童謠》</h3> <p class="movie_list_singer">陳思誠/肖央</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>4.8萬</i> </span> </div> </div> <div> </div> </li> <li> <div> <a href="#"><img src="picture/movie-06.png"></a> <h3 class="movie_list_title">安靜~JapaneseVer.~</h3> <p class="movie_list_singer">七德</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>5.1萬</i> </span> </div> </div> </li> <li> <div> <a href="#"><img src="picture/movie-07.png"></a> <h3 class="movie_list_title">INTOI沉浸紀(jì)錄EP《萬里》浙江曲Live </h3> <p class="movie_list_singer">李宇春</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>10.6萬</i> </span> </div> </div> </li> <li> <div> <a href="#"><img src="picture/movie-08.png"></a> <h3 class="movie_list_title">From Here(《文明與征服》手游</h3> <p class="movie_list_singer">袁婭維</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>4.8萬</i> </span> </div> </div> </li> <li> <div> <a href="#"><img src="picture/movie-09.png"></a> <h3 class="movie_list_title">《野蠻生長》-李字春演唱會(huì) </h3> <p class="movie_list_singer">騰格爾/艾倫/沈騰</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>14.9萬</i> </span> </div> </div> </li> <li class="nomargin"> <div> <a href="#"><img src="picture/movie-10.png"></a> <h3 class="movie_list_title">《BabyIKnow》 </h3> <p class="movie_list_singer">劉用斷</p> <div class="movie_list_info"> <span> <i class="movie_list_listen_icon sprite"></i> <i>15.2萬</i> </span> </div> </div> </li> </ul> </div></div><!--底部--><div class="foot"> <div class="foot_con"> <div class="con_top"> <div class="download"> <h3 class="bt"><a href="#">下載QQ客戶端</a></h3> <ul class="down_list"> <li class="down_item item01"> <a href="#"> <i></i> <span>PC版</span> </a> </li> <li class="down_item item02"> <a href="#"> <i></i> <span>MAC版</span> </a> </li> <li class="down_item item03"> <a href="#"> <i></i> <span>Android版</span> </a> </li> <li class="down_item item04"> <a href="#"> <i></i> <span>iphone版</span> </a> </li> </ul> </div> <!--特色產(chǎn)品--> <div class="download pro"> <h3 class="bt"><a href="#">特色產(chǎn)品</a></h3> <ul class="down_list"> <li class="down_item item01"> <a href="#"> <i></i> <span>全民K歌</span> </a> </li> <li class="down_item item02"> <a href="#"> <i></i> <span>SuperSound</span> </a> </li> <li class="down_item item03"> <a href="#"> <i></i> <span>QPlay</span> </a> </li> <li class="down_item item04"> <a href="#"> <i></i> <span>Fan直播伴侶</span> </a> </li> <li class="down_item item04 item_spec"> <a href="#"> <span>車載互聯(lián)</span> </a> </li> <li class="down_item item04"> <a href="#"> <span>QQ演出</span> </a> </li> <li class="down_item item04"> <a href="#"> <span></span> </a> </li> </ul> </div> <!--合作鏈接--> <div class="link"> <h3 class="bt"><a href="#">合作鏈接</a></h3> <ul class="link_list"> <li><a href="#">CJ·ENM</a></li> <li><a href="#">騰訊視頻</a></li> <li><a href="#">手機(jī)QQ空間</a></li> <li><a href="#">最新版QQ</a></li> <li><a href="#">騰訊社交廣告</a></li> <li><a href="#">電腦管家</a></li> <li><a href="#">QQ瀏覽器</a></li> <li><a href="#">騰訊微云</a></li> <li><a href="#">騰訊云</a></li> <li><a href="#">企鵝FM</a></li> <li><a href="#">智能電視網(wǎng)</a></li> <li><a href="#">當(dāng)貝市場</a></li> </ul> </div> <!--開發(fā)平臺--> <div class="platform"> <h3 class="bt"><a href="#">開發(fā)平臺</a></h3> <ul class="link_list"> <li><a href="#">QQ音樂開放平臺</a></li> <li><a href="#">騰訊音樂人</a></li> </ul> </div> <!--TME集團(tuán)官網(wǎng)--> <div class="platform"> <h3 class="bt"><a href="#">TME集團(tuán)官網(wǎng)</a></h3> <ul class="link_list"> <li><a href="#">騰訊音樂</a></li> </ul> </div> </div> <!-- 權(quán)利聲明 --> <div class="copyright"> <p> <a href="#">關(guān)于騰訊</a> | <a href="#">AboutTencent</a> | <a href="#">服務(wù)條款</a> | <a href="#">用戶服務(wù)協(xié)議</a> | <a href="#">隱私政策</a> | <a href="#">權(quán)利聲明</a> | <a href="#">廣告服務(wù)</a> | <a href="#">騰訊招聘</a> | <a href="#">客服中心</a> | <a href="#">網(wǎng)站導(dǎo)航</a> </p> <p>Copyright 1998-2021Tencent.All Rights Reserved.</p> <p>騰訊公司 <a href="#">版權(quán)所有 </a><a href="#">網(wǎng)絡(luò)文化經(jīng)營許可證: </a><a href="#">粵網(wǎng)文2018]6725-2386號 </a></p> </div> </div></div></body></html>關(guān)鍵詞：音樂,作業(yè),設(shè)計(jì),大學(xué)生
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
