音乐磁盘制作

今天我们来做一个比较难一点的，看起来好看点的网页
首先我们要有一个大概的结构

1.既然是磁盘，那就要在里面放东西，所以我们可以用一个div来做
2.为了做的东西能好看一点，我们就要在里面放一些文字，所以我们还要在里面放一个div，文字可以用p标签来装
3.那么接下来呢我们就要考虑怎么写css样式了

css样式

在我们有了一个大概的框架后，我们就要考虑最外围个div的作用，既然是一个磁盘，那我们就要把他做成一个圆的，那么我们可以使用

border-radius: 50%;

这条语句的作用就是把一个东西给做成圆的

在有一个圆盘了，我们就要开始制作那些条纹了，条纹的做法可以使用渐变了

background-image: repeating-radial-gradient(circle at center,black,gray 1%);

首先，background-image这个属性呢就是设置背景图片，中间的那一行就是设置重复渐变，第一个参数表示渐变角度，第二第三是表示渐变的颜色，重要的是最后一个参数，最后一个参数用于渐变的起始位置和终止位置，当到达终止位置又开始从起始位置填充，由此来获得一个磁盘的条纹

中间的那些就不做详细介绍了，大家可以自己试着做一下，代码放后面了

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐排行榜</title>
    <style>
        *{margin: 0;padding: 0;}
        .bg{                                        /*圆盘*/
            width: 600px;
            height: 600px;
            border: 5px solid #ccc;
            background-image: repeating-radial-gradient(circle at center,black,gray 1%);
            border-radius: 50%;
            margin: 100px auto;
        }
        .sheet{                                         /*第二个边框*/
            width: 300px;
            height: 495px;
            margin-left: 150px;
            margin-top:55px;
            border-radius: 30px;
            box-shadow: 10px 5px 12px #726e6e;
            background: #ffffff;
            border: red 5px;


        }
        .sheet p{                                         /*音乐排行榜的文字*/
            margin-bottom: 3px;
            width: 300px;
            height: 40px;
            background: #65646d url("tp/yf.jpg") no-repeat 40px 15px;
            font-size: 18px;
            color: aliceblue;
            line-height: 40px ;
            text-align: center;
        }
        .sheet .tp{                                      /*音乐排行榜的图片*/
            width: 300px;
            height: 280px;
            background: #ffffff;
            background-image: url("tp/wz.png"),url("tp/tb1.jpg");
            background-repeat: no-repeat;
            background-position: center 230px,center 30px;
            border-radius: 30px;


        }
        .sheet .r{
            border-radius: 0 0 30px 30px;
                                                          /*最后一个p标签的圆角*/

        }

    </style>

</head>
<body>
    <div class="bg">
        <div class="sheet">
            <p class="tp"></p>
            <p >vnessa-constance</p>
            <p>dogffedrd-seeirtit</p>
            <p>dsieirif-constance</p>
            <p>wytuu-qeyounted</p>
            <P class="r">qurested-conoted</P>
        </div>
    </div>
    <audio src="mp3/xxy.mp3" autoplay controls ></audio>

</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END