HTML：给自己设计一个简单的专属网页音乐播放器
生活随笔
收集整理的這篇文章主要介紹了
HTML：给自己设计一个简单的专属网页音乐播放器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Hello，大家好，我是wangzirui32，今天我們來學習如何給自己設計一個簡單的網頁音樂播放器。
開始學習吧！
學習目錄
- 1. 項目架構
- 2. player.html 編寫
- 3. style.css 編寫
- 4. 結果展示
- 寫在最后
1. 項目架構
結構如下，請自行創建文件：
demo/style.cssplayer.html2. player.html 編寫
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>wangzirui32專屬的網頁音樂播放器</title><!-- 導入CSS文件 --><link rel="stylesheet" href="style.css" type="text/css" /> </head> <body><div id="music-player"><h1>-----wangzirui32專屬的網頁音樂播放器-----</h1><h4>當前歌曲：Seve</h4><audio controls><!-- src為音樂的路徑 --><source src="D:/myMusic/music.mp3" type="audio/mpeg"></audio></div> </body> </html>3. style.css 編寫
接下來繼續編寫css代碼，如下：
#music-player {width: 600px; /* 寬為600px */height: 300px; /* 長為300px */background: #FFA500; /* 背景設為橙色 */border-radius: 25px; /* 設置圓角 */ } #music-player h1 {color: #ADD8E6 /* 設置顏色為藍色 */ }4. 結果展示
如圖：
寫在最后
這個程序你還可以拓展，可以修改一下css樣式，使其個性化；也可以添加多個歌曲，使其成為一個歌單。
好了，這就是今天的全部內容，喜歡的可以點個收藏，我們下次再見！
總結
以上是生活随笔為你收集整理的HTML：给自己设计一个简单的专属网页音乐播放器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据结构——校园导游系统
- 下一篇： WEB前端--SEO优化学习笔记（9）