论坛 › 欢乐水吧 › css编辑单曲带滚动字播放器和边框代码套用

小辣椒 发表于 2022-1-26 00:57

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;
      box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}

.ctBox p,img, h2,button { text-align:center; }

.picBtn {
      width: 32px;
      height: 32px;
      outline: none;
      border: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/61e44c692ab3f51d917ef9ed.png') no-repeat;
      cursor: pointer;
      box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}

.picBtn:hover {
      opacity: 0.95;
      box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}

.picBtn:active {
      opacity: 0.8;
      box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
}

</style>

<div class="mnBox">
      <div class="ctBox">

            <p><img alt="550 height="467"="" src="https://pic.imgdb.cn/item/60f989c85132923bf81abe08.jpg" /></p>
         
                <h2 style="padding-bottom: 10px;">你莫走 (童声版)</h2>
               
                <h2 style="text-align:center;">TO：马黑黑</h2>
                <pre>
                男：妹儿丫头你莫走

                唱首歌歌儿把你留

                歌中有我对你的真情

                歌中有你的温柔

                女：哥哥哥哥我不走

                妹妹陪你到白头

                陪你直到星星不眨眼

                陪你直到月亮躲山沟

                男：你莫走

                女：我不走

                男：赌过咒

                女：拉过勾

                男：你莫走

                女：我不走

                男：天做被

                女：地当铺








                </pre>

            <div style="position:absolute; width:120px; left:400px; top: 1280px; text-align:center;">

      <p ><font color="#222222" size="2" >

               <marqueescrollamount="2" direction="left" >你莫走 (童声版)</marquee>


   <div style="position:absolute; width:150px; left:-10px; top: 50px; text-align:center;">

               <p><audio id="music" src="https://www.joy127.com/url/84973.mp3" loop="loop" autoplay="autoplay" ></audio> </p>
                <p><button id="picBtn" class="picBtn"></button></p><br>


                <p>小辣椒2022 01 26</p>

            </div>
         </div>
      </div>
</div>

<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/61e44c692ab3f51d917ef9ed.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e44c422ab3f51d917ee4e6.png')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/61e44c422ab3f51d917ee4e6.png')";
})

</script>

小辣椒 发表于 2022-1-26 14:38

这个css代码编辑音乐帖小辣椒也是第一次玩，特别喜欢

这个音乐帖制作最大的优点就是不用上传空间，可以自己编辑喜欢的外框大小尺寸和颜色，只要替换自己的图片和音乐，也是可以自己制作播放器按钮替换链接就可以了

小辣椒 发表于 2022-1-26 00:58

<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;
      box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}

.ctBox p,img, h2,button { text-align:center; }

.picBtn {
      width: 32px;
      height: 32px;
      outline: none;
      border: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/61e44c692ab3f51d917ef9ed.png') no-repeat;
      cursor: pointer;
      box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}

.picBtn:hover {
      opacity: 0.95;
      box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}

.picBtn:active {
      opacity: 0.8;
      box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
}

</style>

<div class="mnBox">
      <div class="ctBox">

            <p><img alt="550 height="467"="" src="https://pic.imgdb.cn/item/60f989c85132923bf81abe08.jpg" /></p>
         
                <h2 style="padding-bottom: 10px;">你莫走 (童声版)</h2>
               
                <h2 style="text-align:center;">TO：马黑黑</h2>
                <pre>
                男：妹儿丫头你莫走

                唱首歌歌儿把你留

                歌中有我对你的真情

                歌中有你的温柔

                女：哥哥哥哥我不走

                妹妹陪你到白头

                陪你直到星星不眨眼

                陪你直到月亮躲山沟

                男：你莫走

                女：我不走

                男：赌过咒

                女：拉过勾

                男：你莫走

                女：我不走

                男：天做被

                女：地当铺








                </pre>

            <div style="position:absolute; width:120px; left:400px; top: 1280px; text-align:center;">

      <p ><font color="#222222" size="2" >

               <marqueescrollamount="2" direction="left" >你莫走 (童声版)</marquee>


   <div style="position:absolute; width:150px; left:-10px; top: 50px; text-align:center;">

               <p><audio id="music" src="https://www.joy127.com/url/84973.mp3" loop="loop" autoplay="autoplay" ></audio> </p>
                <p><button id="picBtn" class="picBtn"></button></p><br>


                <p>小辣椒2022 01 26</p>

            </div>
         </div>
      </div>
</div>

<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/61e44c692ab3f51d917ef9ed.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e44c422ab3f51d917ee4e6.png')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://pic.imgdb.cn/item/61e44c422ab3f51d917ee4e6.png')";
})

</script>

小辣椒 发表于 2022-1-26 00:58

谢谢黑黑的指导和源码分享{:4_187:}

小辣椒 发表于 2022-1-26 01:00

这个要注意的是滚动字的定位要按你自己帖里面的文字高度测试定位尺寸，可以在线测试一下。

小辣椒 发表于 2022-1-26 01:03

请黑黑老师检查小辣椒的代码有没有错误@马黑黑

红影 发表于 2022-1-26 10:04

凌晨1点多啊，亲爱的也太拼了{:4_187:}

红影 发表于 2022-1-26 10:06

我这里看效果的话，最后的按钮和滚动字以及落款有点偏位，跟着做的时候需要自己调了。{:4_187:}

红影 发表于 2022-1-26 10:07

亲爱的辛苦了，花这么多时间做成了两种效果，大家可以有所选择地套用做帖子了，而且这个加分也不会飞{:4_187:}

马黑黑 发表于 2022-1-26 10:43

小辣椒 发表于 2022-1-26 01:03
请黑黑老师检查小辣椒的代码有没有错误@马黑黑

从效果上看，没什么问题。但HTML代码还是有问题的！主要是你对 div 的应用还不得要领：

有多少个 <div>，就应有多少个 </div>，每一个<div>的出现，是要包含你的一个或多个元素（如marquee元素，按钮元素），这些元素结束了，就必须在结束处有 </div>。

你的代码里，有四个 <div>，却只有两个 </div>，这在简单的页面可能没问题，在子元素众多的页面，肯定凌乱，谁是谁会搞不清楚，定位不能精准。

记住：div 可以做为容器装载一个或多个子元素，装前以<div>表明，装完了要有收尾符 </div>。

小辣椒 发表于 2022-1-26 14:15

红影 发表于 2022-1-26 10:06
我这里看效果的话，最后的按钮和滚动字以及落款有点偏位，跟着做的时候需要自己调了。

亲爱的，这个就是特别显示滚动字和播放器可以自己设置定位代码的效果

小辣椒 发表于 2022-1-26 14:17

马黑黑 发表于 2022-1-26 10:43
从效果上看，没什么问题。但HTML代码还是有问题的！主要是你对 div 的应用还不得要领：

有多少个 ，就 ...

谢谢黑黑指导，小辣椒这个是老错误了，以前改了代码就出现没有对应，也是没有高手指导，现在晓得了{:4_187:}

红影 发表于 2022-1-26 15:51

小辣椒 发表于 2022-1-26 14:15
亲爱的，这个就是特别显示滚动字和播放器可以自己设置定位代码的效果

哦哦，原来是需要自己调整的。嗯嗯，这样更适合自己的分辨率{:4_204:}

马黑黑 发表于 2022-1-26 16:26

小辣椒 发表于 2022-1-26 14:17
谢谢黑黑指导，小辣椒这个是老错误了，以前改了代码就出现没有对应，也是没有高手指导，现在晓得了{:4_18 ...

HTML标签有两种类型：

一、自闭合标签（自用 / 收尾）

<img src="" alt="" />
<br /> （也可以写成 <br>）
<hr /> （也可以写成 <hr>）

二、常规标签（成双对出现）

<p> ... </p>
<h1> ... <h1>
<div> ... </div>
<table><tr><td></td></tr></table>

马黑黑 发表于 2022-1-26 16:29

成双是对出现的标签，在过去，可以偷懒不写收尾符号，这样，碰都新的起始符号，浏览器自动认为这里的前面有一个收尾符。不过，仍然可能会出现种种问题，也给浏览器带来负担。

加林森 发表于 2022-1-27 17:37

这个得好好学习了。辛苦了，小辣椒！{:4_187:}{:4_190:}

小辣椒 发表于 2022-1-27 20:20

马黑黑 发表于 2022-1-26 16:26
HTML标签有两种类型：

一、自闭合标签（自用 / 收尾）


谢谢黑黑的指导，这些都是小辣椒不懂的，以前就是自己瞎捣鼓，许多都是一面玩一面百度的{:4_173:}

小辣椒 发表于 2022-1-27 20:21

马黑黑 发表于 2022-1-26 16:29
成双是对出现的标签，在过去，可以偷懒不写收尾符号，这样，碰都新的起始符号，浏览器自动认为这里的前面有 ...

我一般发现不能显示就代码后面加个结束码，以前就这样瞎蒙的{:4_173:}

马黑黑 发表于 2022-1-27 20:27

小辣椒 发表于 2022-1-27 20:21
我一般发现不能显示就代码后面加个结束码，以前就这样瞎蒙的

瞎蒙不保险。你要心中有数：这个 div 都带哪些东东

马黑黑 发表于 2022-1-27 20:27

小辣椒 发表于 2022-1-27 20:20
谢谢黑黑的指导，这些都是小辣椒不懂的，以前就是自己瞎捣鼓，许多都是一面玩一面百度的

百度挺好，就是太啰嗦{:5_106:}

查看完整版本: css编辑单曲带滚动字播放器和边框代码套用