小辣椒 发表于 2022-2-25 20:44

网易音乐链接单曲播放器代码套用分享（css）


<style type="text/css">

.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }
.ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }
.ctBox p,img, h2,button { text-align:center; }
#lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }


</style>

<div class="mnBox">
      <div class="ctBox">
                <p style="text-align:center;"><img alt="570" height="570" src="https://pic.imgdb.cn/item/6217a8172ab3f51d9125df0e.jpg" /><br></p>
                <h2 style="padding-bottom: 10px;">甜蜜蜜</h2>
                <h2 style="text-align:center;">演唱：邓丽君</h2>
                <pre>

                        黑黑老师分享的可以用于
                        网易音乐链接                  
                        小辣椒测试做一个
                        看看效果怎么样
                        感觉配这个边框也是漂亮
                        大家可以开心玩玩
                        感谢黑黑老师精彩无限
                        又一个精彩分享
                        
                        纯css加个图片加个音乐就可以了
                        祝大家玩的开心
                        
                        
                </pre>
                <p style="margin: auto; width:120px; text-align:center; font-size:14px; color:#000;"><marqueescrollamount="2" direction="left" >谢谢黑黑老师的精彩分享</marquee></p>

                <style>
/* 父盒子 */
#wyyBox {
      margin: 10px auto;
      width:300px;
      height: 52px;
      text-align: center;
}
/* 播放器 */
#wyyBox iframe {
      width: 298px;
      height: 52px;
      border: none;
      /*切割 clip-path: circle(16px at 271px); */
}
</style>

<div id="wyyBox"></div>

<script>
var wyyBox = document.getElementById("wyyBox"); //父 div 盒子标识
var frm = document.createElement("iframe"); //创建 iframe 元素
//iframe 加载 src
frm.src = "https://music.163.com/outchain/player?type=2&id=1853812727&auto=1&height=32";
wyyBox.appendChild(frm); //父盒子加载 iframe 元素
</script>
                <p style="margin: 20px; text-align:center;">小辣椒2022 02 25</p>
      </div>
</div>

<script language="javascript">


      this.play();
}

</script>

小辣椒 发表于 2022-2-25 20:45


<style type="text/css">

.mnBox { position: relative; margin: 0 auto; padding: 35px; width: 660px; border: none; border-top: 6px solid #000; border-radius: 10px; background: #b3c3c3; }
.ctBox { margin: 0; padding: 30px; background: #fff; min-height: 300px; border-radius: 10px; }
.ctBox p,img, h2,button { text-align:center; }
#lrcDiv { margin: auto; width: 300px; height: 43px; overflow: hidden; position: relative; padding: 8px; text-align:center; }


</style>

<div class="mnBox">
      <div class="ctBox">
                <p style="text-align:center;"><img alt="570" height="570" src="https://pic.imgdb.cn/item/6217a8172ab3f51d9125df0e.jpg" /><br></p>
                <h2 style="padding-bottom: 10px;">甜蜜蜜</h2>
                <h2 style="text-align:center;">演唱：邓丽君</h2>
                <pre>

                        黑黑老师分享的可以用于
                        网易音乐链接                  
                        小辣椒测试做一个
                        看看效果怎么样
                        感觉配这个边框也是漂亮
                        大家可以开心玩玩
                        感谢黑黑老师精彩无限
                        又一个精彩分享
                        
                        纯css加个图片加个音乐就可以了
                        祝大家玩的开心
                        
                        
                </pre>
                <p style="margin: auto; width:120px; text-align:center; font-size:14px; color:#000;"><marqueescrollamount="2" direction="left" >谢谢黑黑老师的精彩分享</marquee></p>

                <style>
/* 父盒子 */
#wyyBox {
      margin: 10px auto;
      width:300px;
      height: 52px;
      text-align: center;
}
/* 播放器 */
#wyyBox iframe {
      width: 298px;
      height: 52px;
      border: none;
      /*切割 clip-path: circle(16px at 271px); */
}
</style>

<div id="wyyBox"></div>

<script>
var wyyBox = document.getElementById("wyyBox"); //父 div 盒子标识
var frm = document.createElement("iframe"); //创建 iframe 元素
//iframe 加载 src
frm.src = "https://music.163.com/outchain/player?type=2&id=1853812727&auto=1&height=32";
wyyBox.appendChild(frm); //父盒子加载 iframe 元素
</script>
                <p style="margin: 20px; text-align:center;">小辣椒2022 02 25</p>
      </div>
</div>

<script language="javascript">


      this.play();
}

</script>

小辣椒 发表于 2022-2-25 20:46

@加林森

队长你要的{:4_187:}

红影 发表于 2022-2-25 21:19

这个好，可以让网易云的音乐也符合HTML的规范了{:4_187:}

加林森 发表于 2022-2-25 21:35

小辣椒 发表于 2022-2-25 20:46
@加林森

队长你要的

来了来了。刚才在制作另外一个新帖。

加林森 发表于 2022-2-25 21:38

谢谢小辣椒，有了这个制作我就好制作新的帖了。辛苦你了。{:4_187:}{:4_204:}{:4_173:}

千羽 发表于 2022-2-25 21:57

漂亮的邓丽君，好听的甜蜜蜜{:4_208:}

千羽 发表于 2022-2-25 22:03

谢谢小辣椒的{:4_187:}分享

小辣椒 发表于 2022-2-25 22:05

加林森 发表于 2022-2-25 21:38
谢谢小辣椒，有了这个制作我就好制作新的帖了。辛苦你了。

队长不客气，歌曲就换数字就可以了

小辣椒 发表于 2022-2-25 22:05

千羽 发表于 2022-2-25 21:57
漂亮的邓丽君，好听的甜蜜蜜

千羽来了，一起玩啊{:4_171:}

小辣椒 发表于 2022-2-25 22:06

千羽 发表于 2022-2-25 22:03
谢谢小辣椒的分享

不客气，这个你直接复制换图片，文字，音乐就改数字就可以了

小辣椒 发表于 2022-2-25 22:07

红影 发表于 2022-2-25 21:19
这个好，可以让网易云的音乐也符合HTML的规范了

亲爱的，这个网易的音乐手机可能听不到，我平时基本不玩网易的

千羽 发表于 2022-2-25 22:07

小辣椒 发表于 2022-2-25 22:05
千羽来了，一起玩啊

嗯，一起玩{:4_185:}

小辣椒 发表于 2022-2-25 22:08

千羽 发表于 2022-2-25 22:07
嗯，一起玩

千羽看看就懂的，一起玩{:4_179:}

千羽 发表于 2022-2-25 22:08

小辣椒 发表于 2022-2-25 22:06
不客气，这个你直接复制换图片，文字，音乐就改数字就可以了

不上传就好，哪天也试试{:4_173:}

加林森 发表于 2022-2-25 22:09

小辣椒 发表于 2022-2-25 22:05
队长不客气，歌曲就换数字就可以了

嗯嗯，知道了。再次感谢！{:4_204:}{:4_190:}

千羽 发表于 2022-2-25 22:09

小辣椒 发表于 2022-2-25 22:08
千羽看看就懂的，一起玩

得多看看{:4_173:}

千羽 发表于 2022-2-25 22:33

请问小辣椒：

https://music.163.com/outchain/player?type=2&id=1853812727&auto=1&height=32

告诉下这替换的公式

小辣椒 发表于 2022-2-25 22:53

千羽 发表于 2022-2-25 22:33
请问小辣椒：

https://music.163.com/outchain/player?type=2&id=1853812727&auto=1&height=32



https://music.163.com/outchain/player?type=2&id=1853812727&auto=1&height=32

就换这个数字

千羽 发表于 2022-2-25 22:56

小辣椒 发表于 2022-2-25 22:53
https://music.163.com/outchain/player?type=2&id=1853812727&auto=1&height=32

就换这个数字

嗯，知道了，谢谢小辣椒{:4_179:}
页: [1] 2
查看完整版本: 网易音乐链接单曲播放器代码套用分享（css）