網頁播放器開發（三）--頁面展示

来源:https://www.cnblogs.com/helpall/archive/2019/01/13/10261581.html
-Advertisement-
Play Games

（二）頁面展示 各位朋友大家好，我們接著上文繼續開發，這一節我們主要是把上一節最後的圖片素材從新組合，用web形式展現，我們用到的主要工具是：HBuilderX，這個工具我就不介紹了，上手很容易，很好用的，具體情況大家可以百度研究一下。 1.新建項目 首先啟動HBuilderX開發工具，新建一個項目 ...


 

（二）頁面展示

各位朋友大家好，我們接著上文繼續開發，這一節我們主要是把上一節最後的圖片素材從新組合，用web形式展現，我們用到的主要工具是：HBuilderX，這個工具我就不介紹了，上手很容易，很好用的，具體情況大家可以百度研究一下。

1.新建項目

首先啟動HBuilderX開發工具，新建一個項目，具體操作“文件”→“新建”→“項目”如圖2-1所示。

  

圖2-1 新建項目

在彈出的對話框中選擇普通項目，項目名稱填入“網頁播放器”，選擇存儲路徑，選擇空項目，單擊創建即可，如圖2-2所示。

 

圖2-2 設置新項目

2.新建目錄

在左側的項目管理視窗，項目上單擊右鍵選擇“新建”→“目錄”，CSS文件夾，用於存放樣式文件，如圖2-3所示新建目錄。新建images目錄，存放我們上節剪切的圖片素材，記得把所有需要的圖片素材全部拷貝到該目錄下，拷貝十分簡單，在文件中複製圖片，在項目管理images目錄點擊右鍵，選擇粘貼，這樣所複製的圖片就全部拷貝到該目錄下了；新建JS目錄，用於存放Javascript文件。

 

圖2-3 新建目錄

3.新建文件

新建文件與新建目錄大同小異，在項目上點擊右鍵依次選擇“新建”→“html文件”，命名為“index.html”,用於編寫HTML代碼;在CSS目錄上點擊右鍵依次選擇“新建”→“css文件”，命名為“playMusic.css”,用於編寫網頁播放器的樣式代碼；在js目錄上點擊右鍵依次選擇“新建”→“js文件”，命名為“playMusic.html”,用於編寫js代碼。這樣我們的整個目錄結構已經有了，如圖2-4所示。終於我們開始編寫代碼了，哈哈。

 

圖2-4 開發目錄結構

4.編寫代碼。

這裡是頁面顯示代碼，我只想題一點，HTML中id對應CSS中“#”+id的對應樣式；HTML中classname的樣式名稱對應CSS中.開頭的樣式名稱。例如：HTML中<div id="playMusic_Box">，CSS中“#playMusic_Box”就是這個HTML文件樣式；HTML中<div classname="playMusic_Box">，則CSS中對應樣式為“.playMusic_Box”.

1.整體容器。我們點擊index.html文件，我們看到如下的預設代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

 

<link rel="stylesheet" type="text/css" href="css/playMusic.css"/>我們在head標簽之間引入.js,.css文件，需要添加如下代碼：

<script src="js/playMusic.js"></script>

這樣我們就引入了css和js文件。在HBuilderX敲擊代碼很爽的，提示很多，錄入真的很方便。

回到設計圖，我們把播放器分成3列，如圖2-5所示。

 

圖2-5播放器分割示意圖

這樣HTML代碼可以這樣編寫：

一個大的DIV，裡面按照示意圖放三個div，然後我們用css控制顯示樣式。

HTML代碼如下：

<div id="playMusic_Box"><!-- 播放器整個容器 -->
<div id="playMusic_Button"></div><!-- 左側按鈕容器 -->
<div id="playMusic_Progressbar"></div><!-- 中間進度條容器 -->
<div id="playMusic_Songlist"></div><!-- 右側歌曲列表容器 -->
</div>

 

CSS代碼，在playMusic文件中添加如下代碼：

/* 整個容器設置 */
#playMusic_Box{height: 68px;/* 定義播放器高度 */line-height: 68px;/* 定義行高 */ /* 設置背景色 */ position: relative; font-size: 12px;/* 設置字體大小 */}
/* 左側播放按鈕設置 */
#playMusic_Button{
height: 68px; /* 高度 */line-height: 68px;/* 行高 */background:url(../images/PlayBt.png) center center no-repeat;/* 按鈕背景圖片 左右居中 垂直居中 背景圖片不重覆填充 */ width: 117px;/* 寬度 */position: absolute;left: 0px;/* 距離左側0像素 */ top: 0px;/* 距離頂部0像素 */
}
/* 中間播放條設置 */
#playMusic_Progressbar{
height: 68px;width: auto; padding-left: 117px;padding-right: 117px;/* 高度68像素,寬度自動,內部填充距離左側117px,內部填充距離右側117px */
}
/* 右側歌曲列表設置 */
#playMusic_Songlist{
height: 58px;width: 117px; position: absolute;top: 0px;right: 0px; margin-top: 4px;/* 外部距離頂部4像素 */ padding-right: 8px;/* 外部距離右側8像素 */ overflow-y: scroll;/* 縱向滾動條顯示 */ overflow-x:none;/* 隱藏橫向滾動條 */
}

 

解釋一下其中關鍵代碼意思，這段代碼實現三列，左右兩列寬度固定，中間自適應“width: auto”。這裡面Position沒添加註釋，我想單獨介紹一下。Position有四個值屬性：static、fixed、absolute和relative，我沒用了2個屬性。

static（靜態定位）：預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

relative（相對定位）：生成相對定位的元素，通過top,bottom,left,right的設置相對於其正常（原先本身）位置進行定位。可通過z-index進行層次分級。　　

absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。

fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。

屬性為relative的元素可以用來佈局頁面，屬性為absolute的元素用來定位某元素在父級中的位置，既然屬性為absolute的元素用來定位某元素在父級中位置，就少不了TRBL（top，right，buttom，left的縮寫，以下同此），如果父級元素沒有position屬性那麼 absolute元素就會脫離父級元素，但是如果是佈局頁面，父級元素position的屬性又不能為absolute，不然就會以瀏覽器左上角為原點了，所以父級元素的position屬性只能為relative！

如果用position來佈局頁面，父級元素的position屬性必須為relative，而定位於父級內部某個位置的元素，最好用 absolute，因為它不受父級元素的padding的屬性影響，當然你也可以用position，不過到時候計算的時候不要忘記padding的值。

2.左側播放按鈕。在前面的CSS代碼找那個，我們已經把背景色設為圖片“PlayBt.png”，效果如圖2-6所示。現在要在

 

圖2-6 播放按鈕整體容器CSS代碼樣式

容器中添加播放按鈕，上一首，下一首按鈕。依然是三列，具體HTML代碼如下：

<div id="Button_Pre"> </div><!-- 上一首按鈕 -->
<div id="Button_play"  class="Button_play"> </div><!-- 播放按鈕 -->
<div id="Button_next"> </div><!-- 下一首按鈕  -->

 

CSS代碼如下：播放按鈕中加了個樣式“Button_play”，是因為我們下一步需要把這個按鈕變成暫停，播放暫停屬於一個DIV，這樣後面的JS代碼會來切換CSS樣式，實現播放暫停樣式。

 

#Button_Pre{width: 9px; /* 寬度9像素,這是根據圖片寬度確定的 */height: 8px;/* 高度是9像素這是根據圖片高度確定的 */ background:url(../images/previous.png) center center no-repeat;/* 背景圖片是上一首圖片 左右居中 垂直居中 不重覆 */ position: absolute;/* 絕對定位 */top: 30px;left: 19px;cursor: pointer;/* 滑鼠顯示手型 */}
.Button_play{width: 19px;height: 22px; background:url(../images/Play.png) center center no-repeat; position: absolute;top: 22px;left: 52px;cursor: pointer;/* 此段代碼同上一首圖片代碼大同小異 */}
/* 這裡面我們應該加個暫停按鈕,以便我們後面使用*/
.Button_pause{width: 19px;height: 22px; background:url(../images/pause.png) center center no-repeat; position: absolute;top: 22px;left: 48px;cursor: pointer;}
#Button_next{width: 9px; height: 8px; background: url(../images/next.png) center center no-repeat; position: absolute;top: 30px;left: 88px;cursor: pointer;}

 

 

 

這樣播放按鈕組合就顯示完成了，如圖2-7所示。

 

圖2-7網頁顯示播放按鈕組合

3.中間進度條。中間進度條分為3行而不是3列，容器代碼相對簡單，HTML代碼如下：

<!-- 當前播放歌曲信息 -->
<div class="Song_Info">
<!-- 歌曲名稱 -->
<span  id="Song_Name"></span>
<!-- 歌曲作者 -->
<span  id="Singer"></span>
<!-- 歌曲時間 -->
<span class="SingerTime">
<!-- 當前時間 -->
<span  id="Songcurrenttime"></span>
--
<!-- 歌曲總時間 -->
<span id="Songalltime"></span></span>
</div>
<!-- 進度條容器 -->
<div  id="Progressbar_Box">
<!-- 播放頭 -->
<div  id="Progressbar_playHead"></div>
</div>
<!-- 歌曲操作組合面板 -->
<div class="Progressbar_SongOption">
<!-- 隨機播放按鈕 -->
<span  id="SongOption_Shuffle"></span>
<!-- 歌曲重覆播放按鈕 -->
<span id="SongOption_Replay"></span>
<!-- 聲音圖標 -->
<span class="SongOption_Soundico"></span>
<!-- 聲音滑動條 -->
<span class="SongOption_SoundBox">
<!-- 當前音量顯示 -->
<span  id="SongOption_SoundCurrent"></span>
<!-- 音量調節頭 -->
<span id="SongOption_SoundHead"></span>
</span>
</div>

 

CSS代碼：

/* 歌曲信息 */
.Song_Info{height: 20; line-height: 20px; padding-left: 10px;}
#Songcurrenttime{color: firebrick;}
/* 播放進度條 */
#Progressbar_Box{background:url(../images/progress.png) center center repeat-x;/* 進度條背景色 水平居中 垂直居中 x軸平鋪 */ height: 23px; line-height: 23px; padding-left: 10px;margin-right: 25px; position: relative;}
#Progressbar_playHead{background: url(../images/playHead.png) center center no-repeat; height: 17px; width: 16px;position: absolute; top: 2px;left: 0px; z-index: 2;}
/* 歌曲操作信息 */
.Progressbar_SongOption{ height:17px; position: relative; line-height: 17px;}
.Progressbar_SongOption span{display: inline-block;}
/* 隨機播放按鈕 */
#SongOption_Shuffle{ width: 62px; height: 17px; background: url(../images/shuffle.png) center center no-repeat; cursor: pointer;}
/* 隨機播放按鈕選中狀態 */
#SongOption_Shuffle_on{ width: 62px; height: 17px; background: url(../images/shuffleon.png) center center no-repeat;cursor: pointer;}
/* 重覆播放按鈕 */
#SongOption_Replay{ width: 54px; height: 17px; background: url(../images/replay.png) center center no-repeat;cursor: pointer;}
/*重覆播放按鈕 選中狀態 */
#SongOption_Replay_on{ width: 54px; height: 17px; background: url(../images/replayon.png) center center no-repeat;cursor: pointer;}
/* 聲音圖標 */
.SongOption_Soundico{ width: 11px; height: 17px; background: url(../images/sound.png) center center no-repeat;}
/* 調節音量容器 */
.SongOption_SoundBox{width: 111px; height: 17px;background:url(../images/soundbg.png) center center repeat-x; position: relative;}
/* 當前音量 */
#SongOption_SoundCurrent{width:0px; height: 14px; background: url(../images/soundbgon.png) center center repeat-x; position: absolute;left: 0px; top: 1px;}
/* 音量調節頭 */
#SongOption_SoundHead{width: 14px; height: 14px; background: url(../images/soundHead.png) center center no-repeat; position: absolute;left: 0px; top: 1px;}
/* 右側歌曲列表設置 */

 

4.右側歌曲列表。

HTML代碼如下：

<ul id="Songlist_box">
      <li><span>牧馬城市</span></li>
      <li class="currentSong"><span>從頭再來</span></li>
</ul>

 

CSS代碼：

#playMusic_Songlist{
    height: 58px;width: 117px; position: absolute;top: 0px;right: 0px; margin-top: 4px;/* 外部距離頂部4像素 */ padding-right: 8px;/* 外部距離右側8像素 */ overflow-y: scroll;/* 縱向滾動條顯示 */ overflow-x:none;/* 隱藏橫向滾動條 */
}
#playMusic_Songlist ul,#playMusic_Songlist ul li{list-style: none;padding: 0px; margin: 0px; line-height: 20px; cursor:pointer}
#playMusic_Songlist .currentSong{color: firebrick;}

 

Ok，我們的所有HTML代碼和CSS代碼已經告一段落,所有的頁面設計已經全部完成，下一步我們將用Javascript進行音樂播放器功能的開發。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Spark-Unit1-spark概述與安裝部署
    一、Spark概述 spark官網：spark.apache.org Spark是用的大規模數據處理的統一計算引擎，它是為大數據處理而設計的快速通用的計算引擎。spark誕生於加油大學伯克利分校AMP實驗室。 mapreduce（MR）與spark的對比： 1.MR在計算中產生的結果存儲在磁碟上，s ...
  • SqlServer中迴圈給多張表建立聚簇索引
    緣由 解決方法 代碼如下： ...
  • plsql developer連接oracle 12.2報錯 ora-28040 No matching authentication protocol
    使用plsql連接時，發現報ora-28040 No matching authentication protocol 趕緊查了查MOS，原來在預設情況下Oracle12.2對客戶端版本有限制， 解決方法：升級Oracle客戶端或者修改sqlnet.ora中的以下兩個參數控制： SQLNET.ALL ...
  • Sqlserver 基礎語句複習
    每天要複習老師講的內容，老師辛辛苦苦的叫我們知識，我們就要努力去掌握，每天複習一點點！ 註：這些都是複習之前老師講到sqlserver基礎語法！ 好啦！就這麼多啦！準備複習高級的知識！ ...
  • Oracle 12.2 報錯：ORA-12012: error on auto execute of job "SYS"."ORA$AT_OS_OPT_SY_7458"
    alert報錯2019-01-12T10:10:11.499130+08:00Errors in file /u01/app/oracle/diag/rdbms/rac1/rac112/trace/rac112_j000_119621.trc:ORA-12012: error on auto exe ...
  • 一起學Android之ToggleButton和Switch
    本文以一個簡單的小例子，簡述在Android開發中ToggleButton（開關按鈕）和Switch（開關）的簡單使用，僅供學習分享使用。 ...
  • Android com.daimajia.slider.library.SliderLayout 去掉底部半透明標題背景
    com.daimajia.slider.library.SliderLayout 是挺好用的輪播圖控制項，但是底部灰色背景有時候用不到，所以得去掉。 sliderLayout.setCustomAnimation(new DescriptionAnimation()); 這個方法是設置灰色背景動畫 我 ...
  • 字體圖標的使用
    [toc] 首發日期：2019 01 13 字體圖標的介紹 什麼是字體圖標? 在電腦上，文字本質上都是一些像素點，而圖標也是一些像素點，那麼有沒有辦法把某個字體的字做成圖標的樣子呢？於是有了字體圖標這種東西。字體圖標本質上是一種字體，不過它在表現意義上是一個圖標。 為什麼使用字體圖標？有什麼好處？ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類