运用HTML与CSS -------模仿QQ音乐界面

代码如下:

<!DOCTYPE html>
<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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video src=" 2.mp4" controls autoplay ></video>
</body>
</html>

运行结果:
这里写图片描述

猜你喜欢

转载自blog.csdn.net/zhang__rong/article/details/82590148