天天看點

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

#1.2 音樂盒子區域

##1.2.1 音樂标題

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

首先,在header的div下面畫一個container容器div,寬度和header保持一緻,都為950px,居中。

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)
【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

效果:

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

然後,在這個container中畫一個div,作為我們的音樂盒子。高度設定為500px。

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)
【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

給這個div加上一個背景圖檔:

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)
【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

給mbox設定背景圖檔:

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

效果:

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

然後,我們還需要給這個div加上一個陰影層,會顯得好看一些。

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)
【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

效果:

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

加上音樂的标題:

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)
【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)

css:

【H5 音樂播放執行個體】第二節 音樂詳情頁制作(2)