酷我音乐播放（html、css）

千寒33

已于 2022-03-08 15:43:57 修改

阅读量1.3k

点赞数 1

分类专栏：练习文章标签： css css3 html

于 2022-03-07 22:24:54 首次发布

本文链接：https://blog.csdn.net/weixin_52120405/article/details/123341495

版权

练习专栏收录该内容

15 篇文章 1 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="music.css">
</head>
<body>
<div class="nav">
    <div class="left">
        <h2>你的酒馆对我打了烊</h2>
        <ul>
            <li><a class="a1">专辑：</a><a href="https://music.163.com/#/song?id=1341964346&market=baiduqk">你的酒馆对我打了烊</a></li>
            <li><a class="a1">歌手：</a><a href="https://music.163.com/#/artist?id=12382970">陈雪凝</a></li>
            <li><img src="img/icon_share.png" alt="icon_share"><a href="https://qzone.qq.com/">分享</a></li>
            <li><img class="two" src="img/icon_comt.png" alt="icon_comt"><a href="https://music.163.com/#/song?id=1341964346">评论</a></li>
        </ul>
        <div class="ly">
            <p>你的酒馆对我打了烊–陈雪凝</p>
            <p> 词:陈雪凝</p>
            <p>曲:陈雪凝</p>
            <p>和声:李美灵芝</p>
            <p>混音:踵澤鑫</p>
            <p> 发行:3SEVEN参七</p>
            <p>你出现，就沉醉了时间</p>
            <p>请告诉我今后怎么扛，你无关痛痒</p>
            <p>没有酒，我像个荒诞的可怜人</p>
            <p>可是你，却不曾施舍二两</p>
            <p>你的酒馆对我打了烊，子弹在我心头上了膛</p>
            <p>请告诉我今后怎么扛，遍体鳞伤还笑着原谅 </p>
            <p> 你的酒馆对我打了烊，承诺是小孩子说的谎
            <p>请告诉我今后怎么扛，你无关痛痒</p>
            <p>我敬你，给我感动欢喜</p>
            <p>为了你，杀光了世间的烂俗人</p>
            <p>可是你，却不曾施舍二两</p>
            <p>你的酒馆对我打了烊，子弹在我心头上了膛</p>
            <p>请告诉我今后怎么扛，遍体鳞伤还笑着原谅</p>
            <p>你的酒馆对我打了烊，承诺是小孩子说的谎</p>
            <p>请告诉我今后怎么扛，你无关痛痒</p>
            <p>转啊转啊转啊转啊转，没能转进你的心上</p>
            <p>看啊看啊看啊看啊看，谁能再把自己点亮</p>
            <p>你的酒馆对我打了烊，子弹在我心头上了膛</p>
            <p>请告诉我今后怎么扛，遍体鳞伤还笑着原谅</p>
            <p>你的酒馆对我打了烊，承诺是小孩子说的谎</p>
            <p>请告诉我今后怎么扛，你无关痛痒</p>
        </div>

    </div>
    <div class="right">
        <img src="img/disc.png" alt="酷我音乐">
        <audio class="musi" controls="controls">
            <source src="10634.wav" type="audio/mp3" />
        </audio>
        <div class="dow">
            <img src="img/下载.svg" alt="下载">
            <a href="https://music.163.com/#/song?id=1341964346&market=baiduqk">免费下载这首歌曲</a>
        </div>
    </div>
</div>
</body>
</html>

CSS部分

*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
.nav{
    width: 1000px;
    margin: 0 auto 400px;
    overflow: hidden;
    border: solid 10px #b4b4b4;
    border-radius: 20px;
    padding: 0 50px 50px 50px;
}
.left{
    width:65% ;
    float: left;
}
.ly{
    min-height: 200px;
    overflow-y: auto;
    max-height: 500px;
}
.right{
    width: 30%;
    float: right;
    overflow: hidden;
}
h2{
    text-align: center;
    padding: 80px 0 50px 0;
    color:rgb(118,118,118);
}
ul{
    width: 95%;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 25px;
    border-bottom: solid 1px #b4b4b4;
}
li{
    float: left;
    list-style: none;
    margin-right: 30px;
    margin-bottom: 10px;
}
li:first-child{
    margin-left: 100px;
}
.two{
    width: 20px;
}
a{
    color: rgb(199,169,69);
}
p,.a1{
    color: rgb(103,103,103);
}
p{
    text-align: center;
    line-height: 40px;
}
.right img{
    padding-top: 82px;
    width: 300px;
    padding-bottom: 50px;
}
.musi{
    margin-left: 4px;
}
.dow{
    background-color: rgb(89,88,145);
    position: relative;
    margin-top: 100px;
    margin-left: 30px;
    width: 240px;/*
    height: 20px;*/
    border-radius: 20px;
}
.dow>img{
    width: 30px;
    margin-left: 15px;
    position: absolute;
    margin-top: -79px;
}
.dow>a{
    font-size: 20px;
    top: 50px;
    margin-left: 60px;
    line-height: 38px;
    color: white;
}

千寒33

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
酷我音乐播放（html、css）

HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="music.css"></head><body><div class="nav"> <div class
复制链接

扫一扫