【H5 音樂播放實例】第一節音樂詳情頁製做（1）

時間 2019-11-09

標籤 H5 音樂播放實例一節音樂詳情製做简体版

原文原文鏈接

本教程是一個H5音樂播放的詳情頁製做，實現了H5音樂播放，音軌的跳動，已經較爲酷炫的UI界面。javascript

經過本教程，您會學到：php

一、H5音樂播放（帶音軌）

二、iconfont字體圖標庫

三、div+css網頁佈局

前端技術：js，jQuery，css ，bootstrap，iconfont
後臺技術：php
數據庫：mysqlcss

首先，看一下頁面的佈局：
html

基本上用div+css的技術就能夠實現。前端

1.1 標題區域

先新建一個detail.php (若是沒有php的環境，就把後綴名修改成.html便可)。
java

<html>
    
    <head>
        <meta charset="utf-8">
        <title>音樂詳情頁</title>
        <style type="text/css">
            

        </style>

    </head>

    <body>
        

    </body>

</html>

咱們設置標題區域的可見寬度爲950px，居中。背景色設置爲黑色（#000）
mysql

效果：sql

如今作登陸和註冊模塊，考慮畫一個div而且向右浮動。

這個效果很是醜，由於a標籤默認就有一個藍色的樣式和下劃線，因此，咱們須要對這兩個a標籤的樣式進行調整。

咱們把logo和菜單當作一個總體，就header中就是往左浮動的DIV。

效果：

在這個DIV中，靠左的是一個LOGO （150px * 60px）。
數據庫

由於字體默認是黑色的，因此還須要對logo的div作一點css修改。bootstrap

效果：

畫好了LOGO，在它的右邊，就是菜單選項。

至於菜單項，咱們通常採用ul , li 來製做。

效果：

一樣的，要去修改一下這裏a標籤的樣式。

又由於li元素默認是有小圓點的。咱們須要把li的小圓點去掉，同時設置高度和header保持一致，都爲60px。

接下來，咱們要引入iconfont字體圖標庫，每個菜單項左邊，都須要一個彩色圖標。

把這個文件夾拷貝到項目根目錄：

再在detail.php中引入其中的css文件和js文件。

引入彩色圖標。

咱們再給這個svg圖標添加一個左浮動：

能夠看到首頁兩個字跑到上面的去了，那是由於咱們尚未給li元素加行高。
如今，就讓首頁兩個字垂直居中，方法就是給li加上60px的行高。

咱們還發現，li元素佔據了一整行：

原來，li也是塊級元素，會默認佔滿一整行，所以，咱們須要對li進行一些修飾，好比，將其寬度設置爲100px。

加上去之後，發現li被擠下來了：

這是由於li元素的外層ul元素，咱們沒有加上浮動，所以被擠下來了。解決方法就是給ul加上左浮動，讓你緊跟在logo的右側。

其餘幾個菜單項也依次類推：

<ul>
                    <li>
                        
                        <a href="javascript:void(0)">
                            <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
                              <use xlink:href="#icon-squirtle"></use>
                            </svg>
                            首頁
                        </a>

                    </li>

                    <li>
                        
                        <a href="javascript:void(0)">
                            <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
                              <use xlink:href="#icon-squirtle"></use>
                            </svg>
                            專題
                        </a>

                    </li>

                    <li>
                        
                        <a href="javascript:void(0)">
                            <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
                              <use xlink:href="#icon-squirtle"></use>
                            </svg>
                            單曲
                        </a>

                    </li>

                    <li>
                        
                        <a href="javascript:void(0)">
                            <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
                              <use xlink:href="#icon-squirtle"></use>
                            </svg>
                            論壇
                        </a>

                    </li>
                </ul>

效果：

發現每個菜單項（li）豎着排下來了，所以li也須要加浮動。

而後，給每個li加一點右邊距：

效果：

而後再把圖標換成其餘的彩色圖標。

<div class="h_left">
                <div class="logo">150X60的LOGO</div>

                <ul>
                    <li>
                        
                        <a href="javascript:void(0)">
                            <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
                              <use xlink:href="#icon-squirtle"></use>
                            </svg>
                            首頁
                        </a>

                    </li>

                    <li>
                        
                        <a href="javascript:void(0)">
                            <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
                              <use xlink:href="#icon-pikachu-"></use>
                            </svg>
                            專題
                        </a>

                    </li>

                    <li>
                        
                        <a href="javascript:void(0)">
                            <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
                              <use xlink:href="#icon-bullbasaur"></use>
                            </svg>
                            單曲
                        </a>

                    </li>

                    <li>
                        
                        <a href="javascript:void(0)">
                            <svg style="width:60px;height:60px;float: left;" class="icon" aria-hidden="true">
                              <use xlink:href="#icon-aoliao"></use>
                            </svg>
                            論壇
                        </a>

                    </li>
                </ul>

            </div>

本章結束。