當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【html+css练习】小白使用html+css模拟音乐播放器构造了网页音乐播放器--1

發布時間：2025/3/21 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了【html+css练习】小白使用html+css模拟音乐播放器构造了网页音乐播放器--1 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

純html+css構造網頁音樂播放器
- html代碼：
- CSS代碼：

純html+css構造網頁音樂播放器

此處參照各大音樂播放器

這個頁面使用了1天的時間進行構造，由于對各語法還不是很熟悉，所以用的時間比較久，且很多地方可能寫得也不是很好，后面我會持續更新我的音樂播放器，如果有大神可以指教，同樣感激不盡！

此音樂播放器僅完成了三分之二左右，且對javascript語言并不是很熟悉，所以沒有能讓頁面 “動起來”
，后期相關的頁面操作會使用typescript編程語言進行完善，同時請各位大佬多多指教！

以下是目前完成的樣式，后期隨著對語言的熟悉會對此頁面進行重構，請各位多多指教！！

html代碼：

<!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>DraGon Music</title><link rel="ICON NAME" href="./logo.png" type="image/x-icon" /><link rel="stylesheet" href="./style.css" /> </head><body><header class="mod_header"><div class="dragonmusic_inner"><h1 class="dragonmusic_title"><a href="#"><img src="./dragon.png" alt="DraGon音樂" class="DraGon_music_logo" /></a></h1><div class="mod_top_nav"><span class="top_nav__item"><a href="#" class="top_nav" id="hall">音樂館</a></span><span class="top_nav__item"><a href="#" class="top_nav">我的音樂</a></span><span class="top_nav__item"><a href="#" class="top_nav">客戶端</a></span><span class="top_nav__item"><a href="#" class="top_nav">開放平臺</a></span><span class="top_nav__item"><a href="#" class="top_nav">VIP</a></span><label id="placeholder"><input class="search_input__input" type="text" placeholder="搜索音樂、MV、歌單、用戶" /><button class="search_input__btn" type="submit"><img src="./search.png" alt="查詢"class="img_search"></button></label><div class="top"><button class="top_login" type="submit">登錄</button><button class="top_register top_login" type="submit">注冊</button></div></div><div class="top_subnav__item mod_top_nav"><hr class="dividing"><a href="#" class="mod_index top_nav"><span>首頁</span></a><a href="#" class="mod_index top_nav"><span>歌手</span></a><a href="#" class="mod_index top_nav"><span>新碟</span></a><a href="#" class="mod_index top_nav"><span>排行榜</span></a><a href="#" class="mod_index top_nav"><span>分類歌單</span></a><a href="#" class="mod_index top_nav"><span>電臺</span></a><a href="#" class="mod_index top_nav"><span>MV</span></a><a href="#" class="mod_index top_nav"><span>數字專輯</span></a><a href="#" class="mod_index top_nav"><span>票務</span></a></div></div></header><main class="text_subject"><div class="index__subject"><div class="index__tit"><h2 class="index__tit_sing" id="song"><b class="icon_txt_sing">歌單推薦</b></h2></div><section class="mod_index_tab"><a href="#" class="mod_index top_nav"><span>為你推薦</span></a><a href="#" class="mod_index top_nav"><span>情歌</span></a><a href="#" class="mod_index top_nav"><span>傷感</span></a><a href="#" class="mod_index top_nav"><span>網絡情歌</span></a><a href="#" class="mod_index top_nav"><span>官方歌單</span></a><a href="#" class="mod_index top_nav"><span>經典</span></a></section><nav class="mod_index_tab" id="song_recommendation"><img src="./music_imge/Song_list_recommendation/1.png" alt="" class="image"><img src="./music_imge/Song_list_recommendation/2.png" alt="" class="image"><img src="./music_imge/Song_list_recommendation/4.png" alt="" class="image"><img src="./music_imge/Song_list_recommendation/5.png" alt="" class="image"><img src="./music_imge/Song_list_recommendation/6.png" alt="" class="image"><ul class="song_text"><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="song_one">寶藏歌曲 | 星辰閃爍云朵溫柔</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="song_two">帥碩晗：極富感染力的溫柔女聲</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="song_three">強強聯手！歐美大牌間的絕配組合</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="song_four">祝你生日快樂！</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="song_five">戲腔古風:人間驚鴻客不過一俗人</li></a></span></ul></nav></div><div class="index__subject"><div class="index__tit"><h2 class="index__tit_sing"><b class="icon_txt_sing">新歌首發</b></h2></div><section class="mod_index_tab"><a href="#" class="mod_index top_nav"><span>最新</span></a><a href="#" class="mod_index top_nav"><span>內地</span></a><a href="#" class="mod_index top_nav"><span>港臺</span></a><a href="#" class="mod_index top_nav"><span>歐美</span></a><a href="#" class="mod_index top_nav"><span>韓國</span></a><a href="#" class="mod_index top_nav"><span>日本</span></a></section><nav class="mod_index_tab" id="new_song"><ul class="song_new_text"><li class="song_text_nav"><nav class="song_new_text_box"><img src="./music_imge/New_song/1.jpg" alt="" class="image_new"><span class="song_new_text"><a href="#" class="mod_index top_nav">落砂《長歌行》電視劇插曲</a></span></nav></li><li class="song_text_nav"><nav class="song_new_text_box"><img src="./music_imge/New_song/2.jpg" alt="" class="image_new"><span class="song_new_text"><a href="#" class="mod_index top_nav">北京女孩</a></span></nav></li><li class="song_text_nav"><nav class="song_new_text_box"><img src="./music_imge/New_song/3.jpg" alt="" class="image_new"><span class="song_new_text"><a href="#" class="mod_index top_nav">《西游記之再世妖王》電影宣傳曲</a></span></nav></li><li class="song_text_nav"><nav class="song_new_text_box"><hr class="dividing"><img src="./music_imge/New_song/4.jpg" alt="" class="image_new"><span class="song_new_text"><a href="#" class="mod_index top_nav">特務J</a></span></nav></li><li class="song_text_nav"><nav class="song_new_text_box"><hr class="dividing"><img src="./music_imge/New_song/5.jpg" alt="" class="image_new"><span class="song_new_text"><a href="#" class="mod_index top_nav">Freedom</a></span></nav></li><li class="song_text_nav"><nav class="song_new_text_box"><hr class="dividing"><img src="./music_imge/New_song/6.jpg" alt="" class="image_new"><span class="song_new_text"><a href="#" class="mod_index top_nav">Sunset</a></span></nav></li><li class="song_text_nav"><nav class="song_new_text_box"><hr class="dividing"><img src="./music_imge/New_song/7.jpg" alt="" class="image_new"><span class="song_new_text"><a href="#" class="mod_index top_nav">《妻子浪漫旅行5》主題曲</a></span></nav></li><li class="song_text_nav"><nav class="song_new_text_box"><hr class="dividing"><img src="./music_imge/New_song/8.jpg" alt="" class="image_new"><span class="song_new_text"><a href="#" class="mod_index top_nav">Like Water</a></span></nav></li><li class="song_text_nav"><nav class="song_new_text_box"><hr class="dividing"><img src="./music_imge/New_song/9.jpg" alt="" class="image_new"><span class="song_new_text"><a href="#" class="mod_index top_nav">Spider</a></span></nav></li></ul></nav></div><div class="index__subject"><div class="index__tit"><h2 class="index__tit_sing"><b class="icon_txt_sing">精彩推薦</b></h2></div><section class="slide_action"><a href="#" class="slide_action_image mod_index top_nav"><imgsrc="./music_imge/Wonderful_recommendation/1.jpg" class="event_list__pic"alt="Justin Bieber全新EP"></a><a href="#" class="slide_action_image mod_index top_nav"><imgsrc="./music_imge/Wonderful_recommendation/2.jpg" class="event_list__pic"alt="PC&YQQ-時代少年團+三代《少年onfire》第二季第一期live專輯"></a></section></div><div class="index__subject"><div class="index__tit"><h2 class="index__tit_sing"><b class="icon_txt_sing">新碟首發</b></h2></div><section class="mod_index_tab"><a href="#" class="mod_index top_nav"><span>內地</span></a><a href="#" class="mod_index top_nav"><span>港臺</span></a><a href="#" class="mod_index top_nav"><span>歐美</span></a><a href="#" class="mod_index top_nav"><span>韓國</span></a><a href="#" class="mod_index top_nav"><span>日本</span></a><a href="#" class="mod_index top_nav"><span>其他</span></a></section><nav class="mod_index_tab" id="song_recommendation"><img src="./music_imge/New_disc/1.jpg" alt="" class="image"><img src="./music_imge/New_disc/2.jpg" alt="" class="image"><img src="./music_imge/New_disc/3.jpg" alt="" class="image"><img src="./music_imge/New_disc/4.jpg" alt="" class="image"><img src="./music_imge/New_disc/5.jpg" alt="" class="image"><ul class="song_text"><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_one">神思記</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_two">忘</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_three">大宋宮詞影視原聲帶</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_four">第二天</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_five">等你回來</li></a></span></ul><img src="./music_imge/New_disc/6.jpg" alt="" class="image"><img src="./music_imge/New_disc/7.jpg" alt="" class="image"><img src="./music_imge/New_disc/8.jpg" alt="" class="image"><img src="./music_imge/New_disc/9.jpg" alt="" class="image"><img src="./music_imge/New_disc/10.jpg" alt="" class="image"><ul class="song_text"><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_six">奔赴星空</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_seven">下馬拜草原</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_eight">青山成雪</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_nine">Say It Again</li></a></span><span class="song_text_written"><a href="#" class="mod_index top_nav"><li class="song_text_nav" id="disc_ten">隔水望云天</li></a></span></ul></nav></div><div class="index__subject"><div class="index__tit"><h2 class="index__tit_sing"><b class="icon_txt_sing">排行榜</b></h2></div><section class="mod_index_tab"><a href="#" class="mod_index top_nav"><span>為你推薦</span></a><a href="#" class="mod_index top_nav"><span>情歌</span></a><a href="#" class="mod_index top_nav"><span>傷感</span></a><a href="#" class="mod_index top_nav"><span>網絡情歌</span></a><a href="#" class="mod_index top_nav"><span>官方歌單</span></a><a href="#" class="mod_index top_nav"><span>經典</span></a></section></div><div class="index__subject"><div class="index__tit"><h2 class="index__tit_sing"><b class="icon_txt_sing">M V</b></h2></div><section class="mod_index_tab"><a href="#" class="mod_index top_nav"><span>精選</span></a><a href="#" class="mod_index top_nav"><span>內地</span></a><a href="#" class="mod_index top_nav"><span>韓國</span></a><a href="#" class="mod_index top_nav"><span>港臺</span></a><a href="#" class="mod_index top_nav"><span>歐美</span></a><a href="#" class="mod_index top_nav"><span>日本</span></a></section></div></main><footer class="mod_footer"></footer><script src="./index.js"></script> </body></html>

CSS代碼：

/* 去除下劃線 */ a {text-decoration: none; }/* 全局滾動條 */ body {overflow-x: auto;overflow-Y: auto; }/*定義滾動條高寬及背景高寬分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar {width: 12px;height: 12px; }/*定義滾動條軌道內陰影+圓角*/ ::-webkit-scrollbar-track {background: 0 0; }/*定義滑塊內陰影+圓角*/ ::-webkit-scrollbar-thumb {border-radius: 5px;background-color: #ccc; }* {margin: 0;padding: 0;/* 定位html空白部分 *//* outline: solid #f00 1px !important;background: #000 !important;color: #fff !important; */ }/* 導航欄 */ .mod_header {width: 100%;position: relative;top: 0;background-color: #fff;margin: 0 auto;z-index: 4; }/* 導航欄區域 */ .dragonmusic_inner {width: 100%;padding: 20px 20px 1px;max-width: 1200px;position: relative;text-align: center;margin: 0 auto;background-color: #fff; }/* 導航欄圖片區域 */ .dragonmusic_title {width: 180px;/* height: 90px; */text-align: right;position: absolute;left: 0;top: 6px; }/* 圖片大小 */ .DraGon_music_logo {width: 110px;height: 50px; }/* 搜索欄位置 */ .search_input {width: 370px;height: 90px;padding: 0px 20px;text-align: left;margin: 0 auto; }/* 導航欄文字位置 */ .mod_top_nav {width: 826px;height: 57px;text-align: left;margin: 0 auto; }/* 導航欄文字 */ .top_nav {width: 72px;height: 90px;padding: 34px 25px;color: black;font-family: poppin, Tahoma, Arial, "微軟雅黑";font-size: 18px; }/* 導航欄--列表頁文字位置 */ .top_subnav__item {position: relative;background-color: white;text-align: center;width: 100%;margin: 0px auto;right: 0px;height: 48px;display: block; }/* 分隔線 */ .dividing {height: 1px;border: none;border-top: 1px solid rgb(240, 238, 238);padding: 5px; }/* 導航欄文字--鼠標放上去時 */ .top_nav:hover {color: #31c27c;/* background-color: green; */ }/* 導航欄文字--獲取焦點后 */ .top_nav:focus {color: white;background-color: #31c27c; }/* 查詢按鈕 */ .search_input__btn {border: 0;width: 24px;height: 24px;outline: none;position: relative;top: 3px;left: 0px;border-radius: 6px;/* 按鈕背景圖透明 */background-color: transparent;border-style: none; }/* 查詢圖片 */ .img_search {width: 20px;height: 20px;border-radius: 6px; }/* 搜索框 */ .search_input__input {border: 0;outline: none;width: 167px;position: relative;top: -2px;left: 2px; }#placeholder {border: 1px solid;padding: 3px;border-radius: 7px;position: relative;left: 10px; }/* 登錄注冊按鈕--位置 */ .top {position: relative;left: 6px;top: -28px; }/* 登錄按鈕位置 */ .top_login {float: right;position: relative;left: 80px;border: 0;color: rgb(36, 32, 32);width: 48px;height: 30px;outline: none; }/* 登錄按鈕--鼠標放上去時 */ .top_login:hover {/* color: #31c27c; */box-shadow: 0 3px 6px rgba(0, 0, 0, 0.19), 0 2px 2px rgba(0, 0, 0, 0.23) }/* 注冊按鈕位置 */ .top_register {position: relative;left: 180px;background-color: #37f;color: white;outline: none; }/* 內容主題 */ .text_subject {text-align: center;margin: 0 auto;width: 100%; }/* 調整歌單推薦位置 */ .index__tit {padding: 45px 10px 40px; }/* 區域內容 */ .index__subject {/* background-color: #ddd; */background: linear-gradient(0deg, rgb(252, 252, 252), rgb(241, 241, 241));padding: 0px 40px 40px; }/* 推薦歌單文字--內容文字 */ .mod_index {font-size: 14px;padding: 5px 25px; }/* 點擊后--推薦歌單文字--內容文字 */ .mod_index:focus {background-color: rgba(218, 214, 214, 0);margin-bottom: 12px;color: #31c27c; }/* 圖片位置 */ .mod_index_tab {padding: 0px 0px 20px; }/* 切換新歌推薦內容 */ #song_recommendation {display: block; }/* 調整圖片大小，及對齊模式 */ .image {padding: 25px 10px 0px;width: 224px;height: 224px;margin: 0 auto; }/* 調整圖片文字 */ .song_text {width: 1400px;height: 25px;position: relative;margin: 0 auto;line-height: 50px;padding: 10px 25px; }.song_text_nav {position: relative;padding: 8px 8px;display: inline-block;font-size: 16px;margin: 0 auto;bottom: 6px;font-size: 14px;text-align: left; }#song_one {position: relative;right: 0px; }#song_two {position: relative;right: 15px; }#song_three {position: relative;right: 40px; }#song_four {position: relative;right: 15px; }#song_five {position: relative;right: -12px; }/* 歌單推薦模塊 */ .song_new_text {position: relative;margin: 0 auto;width: 1380px;text-align: center;bottom: 50px; }/* 歌單推薦--圖片位置 */ .image_new {width: 80px;height: 80px;padding: 5px 0px; }/* 歌單推薦--區域 */ #new_song {text-align: center;position: relative;left: 0px; }/* 新歌首發--圖片盒子 */ .song_new_text_box {position: relative;height: 120px;width: 390px;top: 75px; }/* 精彩推薦--圖片 */ .event_list__pic {width: 590px;height: 236px;position: relative; }/* 精彩推薦--圖片盒子大小 */ .slide_action {width: 100%;height: 100%;text-align: center;position: relative;padding-bottom: 20px; }/* 調整圖片間距 */ .slide_action_image {padding-right: 8px;padding-left: 8px; }/* 新碟首發--模塊 */ #disc_one {position: relative;right: 325px; }#disc_two {position: relative;right: 190px; }#disc_three {position: relative;right: 25px; }#disc_four {position: relative;right: -20px; }#disc_five {position: relative;right: -157px; }#disc_six {position: relative;right: 305px; }#disc_seven {position: relative;right: 185px; }#disc_eight {position: relative;right: 75px; }#disc_nine {position: relative;right: -47px; }#disc_ten {position: relative;right: -152px; }/* 設置腳部區域 */ .mod_footer {height: 500px;background-color: #333; }

總結

以上是生活随笔為你收集整理的【html+css练习】小白使用html+css模拟音乐播放器构造了网页音乐播放器--1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【面试练习题】存在序列：1,1/2,2/
下一篇：使用【python语言】和【typesc