模仿qq音樂頁面

cc00q發表於2020-11-27

模仿QQ頁面的程式碼如下

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ音樂</title>
    <style>
    body{
        background: url("背景.png");
    }
      #content_pic{
          width: 1410px;
          height: 90px;
          background-image: url("導航欄.png");
      }
    #d1{
        float: left;
    }
    #d2,#d3,#d4,#d5{
            float: right;
        }
        #img{
            padding-left: 250px; width: 1000px;
            margin: 60px;
        }
        #img1,#img2,#img3,#img4,#img5,#img6,#img7,#img8{
            margin: 8px;
        }
    </style>
</head>

<body>
<div id="content_pic">
    <img src="QQ音樂圖示.png" width="200"height="90"id="d1">
    <img src="MV.png"width="116"height="90"id="d5">
    <img src="電臺.png" width="116"height="90"id="d4">
    <img src="歌單.png" width="116"height="90"id="d3">
    <img src="排行.png" width="116" height="90"id="d2">
</div>

<div id="img">
<a href="9.10.03.html">
    <img src="1.png" height="200"width="200"id="img1">
    <img src="2.png"height="200" width="200"id="img2">
    <img src="3.png"height="200" width="200"id="img3">
    <img src="4.png"height="200" width="200"id="img4"><br>
    <img src="5.png"height="200" width="200"id="img5">
    <img src="6.png"height="200" width="200"id="img6">
    <img src="7.png"height="200" width="200"id="img7">
    <img src="8.png"height="200" width="200"id="img8">
</a>
</div>
</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src=" 2.mp4" controls autoplay ></video>
</body>
</html>

顯示的結果如下

在這裡插入圖片描述

總結

對於qq音樂的介面製作十分不熟悉，可以花更對的時間來學習

相關文章