论坛 › 马黑黑教程专版 › 交作业 css边框练习

小辣椒 发表于 2022-1-17 21:17

交作业 css边框练习

<style type="text/css">
.mnBox {
      margin: 0 auto;
      padding: 35px;
      width: 660px;
      border: none;
      border-top: 6px solid #000;/* 顶部边框样式*/
      border-radius: 10px;
      background: #b3c3c3;
}
.ctBox {
      margin: 0;
      padding: 10px;
      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/61e561062ab3f51d9145d37c.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 style="padding-top: 30px; alt="" src="https://pic.imgdb.cn/item/60f989c85132923bf81abe08.jpg" /></p>

         
                <h2 style="text-align:center;">你莫走 (童声版)</h2>
                <h2 style="text-align:center;">TO：马黑黑</h2>
                <pre>
                男：妹儿丫头你莫走

                唱首歌歌儿把你留

                歌中有我对你的真情

                歌中有你的温柔

                女：哥哥哥哥我不走

                妹妹陪你到白头

                陪你直到星星不眨眼

                陪你直到月亮躲山沟

                男：你莫走

                女：我不走

                男：赌过咒

                女：拉过勾

                男：你莫走

                女：我不走

                男：天做被

                女：地当铺


                </pre>
                <p><audio id="music" src="https://www.joy127.com/url/84973.mp3"></audio></p>
                <p><button id="picBtn" class="picBtn"></button></p><br>
                <p>小辣椒2022 01 17</p><br><br>
      </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/61e446952ab3f51d917b0f77.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e561062ab3f51d9145d37c.png')");
}

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

</script>

小辣椒 发表于 2022-1-17 21:18

黑黑，这个滚动字高度怎么设置呢，我这个滚动字出来位子不是我原来的了，我重新换了这个没有滚动字的

红影 发表于 2022-1-17 21:56

小辣椒 发表于 2022-1-17 21:18
黑黑，这个滚动字高度怎么设置呢，我这个滚动字出来位子不是我原来的了，我重新换了这个没有滚动字的

正常的啊，歌儿很好听。原来还有儿童版的{:4_187:}

小辣椒 发表于 2022-1-17 21:59

红影 发表于 2022-1-17 21:56
正常的啊，歌儿很好听。原来还有儿童版的

亲爱的，我播放器上面有滚动字，出来位子不对了{:4_203:}

千羽 发表于 2022-1-17 21:59

小辣椒这个框挺漂亮，插画人物也让人喜欢{:4_181:}

千羽 发表于 2022-1-17 22:03

歌儿好听又有趣{:4_205:}

小辣椒 发表于 2022-1-17 22:04

千羽 发表于 2022-1-17 21:59
小辣椒这个框挺漂亮，插画人物也让人喜欢

千羽这个边框是黑黑分享的纯代码的，你可以套用的，直接换图片和音乐就可以了，音乐是手动播放

千羽 发表于 2022-1-17 22:04

马黑黑老师{:4_187:}收礼开心

千羽 发表于 2022-1-17 22:07

小辣椒 发表于 2022-1-17 22:04
千羽这个边框是黑黑分享的纯代码的，你可以套用的，直接换图片和音乐就可以了，音乐是手动播放

好的，我去收藏{:4_181:}

小辣椒 发表于 2022-1-17 22:16

千羽 发表于 2022-1-17 22:07
好的，我去收藏

今天我也是练习做一次，慢慢熟练了就可以制作了

小辣椒 发表于 2022-1-17 22:18

千羽 发表于 2022-1-17 21:59
小辣椒这个框挺漂亮，插画人物也让人喜欢

千羽，这个我是练习黑黑的css制作边框代码，这个图和歌曲已经送黑黑2次了{:4_173:}

红影 发表于 2022-1-17 22:28

小辣椒 发表于 2022-1-17 21:59
亲爱的，我播放器上面有滚动字，出来位子不对了

嗯嗯，没找到滚动字在哪。

千羽 发表于 2022-1-17 22:34

小辣椒 发表于 2022-1-17 22:18
千羽，这个我是练习黑黑的css制作边框代码，这个图和歌曲已经送黑黑2次了

小辣椒手儿巧{:4_205:}

马黑黑 发表于 2022-1-19 08:59

没看到滚动文字呢

马黑黑 发表于 2022-1-19 09:00

千羽 发表于 2022-1-17 22:04
马黑黑老师收礼开心

一同开心

小辣椒 发表于 2022-1-19 21:33

马黑黑 发表于 2022-1-19 08:59
没看到滚动文字呢

是的，这个没有加滚动字，做了2个一个加滚动字，一个没有加，有滚动字的我电脑预览位置好的，发帖后发现位子不对了，我就马上换了这个，因为坐起来人晕的厉害，我这2个帖都是以前的图片和音乐 就试代码效果，前段时间还好 最近几天坐起来都晕的厉害，论坛回帖都是我床上躺着手机回的。

马黑黑 发表于 2022-1-19 22:34

小辣椒 发表于 2022-1-19 21:33
是的，这个没有加滚动字，做了2个一个加滚动字，一个没有加，有滚动字的我电脑预览位置好的，发帖后发现 ...

凤体好转后再说，不急

小辣椒 发表于 2022-1-25 23:04

马黑黑 发表于 2022-1-19 22:34
凤体好转后再说，不急

黑黑 刚才我做了个带滚动字的，我设置了定位代码，测试出来还是不行，现在我想就这个不带滚动字的代码，分享套用大家玩，但你可以帮我改一下自动播放吗？

马黑黑 发表于 2022-1-25 23:34

小辣椒 发表于 2022-1-25 23:04
黑黑 刚才我做了个带滚动字的，我设置了定位代码，测试出来还是不行，现在我想就这个不带滚动字的代码， ...

自动播放，<audio>标签里加 autoplay="autoplay" 便可

小辣椒 发表于 2022-1-25 23:40

马黑黑 发表于 2022-1-25 23:34
自动播放，标签里加 autoplay="autoplay" 便可
https://adisk.365.tf/html/005.html

黑黑这个滚动字我加不好，加帖里面就不对了

查看完整版本: 交作业 css边框练习