音乐磁盘制作

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

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
喜欢就支持一下吧
点赞0
分享
评论 抢沙发
helin的头像-余心资源

昵称

取消
昵称表情代码图片