论坛 › 马黑黑教程专版 › 作业——纯css音乐帖框架表达

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

作业——纯css音乐帖框架表达

<style type="text/css">
.mnBox {
      margin: 0 auto;
      padding: 35px;
      width: 640px;
      border: none;
      border-top: 6px solid #007ACC;/* 顶部边框样式*/
      border-radius: 10px;
      background: #CCEBFF;
}
.ctBox {
      margin: 0;
      padding: 10px;
      background: #FFFFF0;
      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;
      border: none;
      border-radius: 8px;
      background: transparent url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png') no-repeat;
      cursor: pointer;
      outline: none;
      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:50px 20px; alt="" src="https://pic.imgdb.cn/item/61e4c2ba2ab3f51d91b6990c.gif" /></p>
                <h2 style="text-align:center;padding-top: 10px;">雪花来了梅花开</h2>
                <pre>

                                       一年冬去冬又回

                                       雪花雪花为谁来

                                       我还在一个人等待

                                       等待你从故园来

                                       一枝梅花悄悄开

                                       带着雪花入梦来

                                       我不再一个人徘徊

                                       徘徊梦中等你来

                                       雪花伴着梅花开

                                       无限情意在心海
                </pre>

                <p><audio id="music" src="https://www.80wp.com/wj/23150/0562c2e9621b743e01eee5f62669dfce.mp3"></audio></p>
                <p><button id="picBtn" class="picBtn"></button></p><br/>
                <p>红影——学习黑黑代码（手动播放）</p><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/61e430692ab3f51d916a100c.png')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/61e4301b2ab3f51d9169d5eb.png ')");
}

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

</script>

红影 发表于 2022-1-17 09:25

黑黑的代码，发出来看看效果。

红影 发表于 2022-1-17 09:34

图片上面能再下来点就好了，不知道怎么调{:4_173:}

马黑黑 发表于 2022-1-17 09:55

红影 发表于 2022-1-17 09:34
图片上面能再下来点就好了，不知道怎么调

<h2>...</h2>后面你加了<br>，但论坛不认单独的<br>，你得这样：

<br>&nbsp;

马黑黑 发表于 2022-1-17 09:57

&nbsp; 是 HTML 空格

也可以改进一下 <h2> 标签：

<h2 style="padding-bottom: 10px;">标题</h2>

马黑黑 发表于 2022-1-17 09:58

自我感觉吧，中间弄一点点立体感效果更好一些{:5_106:}

红影 发表于 2022-1-17 10:12

马黑黑 发表于 2022-1-17 09:55
...后面你加了，但论坛不认单独的，你得这样：

&nbsp;

嗯嗯，收到。

红影 发表于 2022-1-17 10:15

马黑黑 发表于 2022-1-17 09:57
&nbsp; 是 HTML 空格

也可以改进一下标签：


嗯嗯，改了，我把bottom去掉了，索性上下都留点，上面也觉得离图片有点近。

图片也可以这样改么，想图片上面多留点。是不是可以加上padding: 10px,0px;

红影 发表于 2022-1-17 10:16

马黑黑 发表于 2022-1-17 09:58
自我感觉吧，中间弄一点点立体感效果更好一些

你说的中间是指的？

马黑黑 发表于 2022-1-17 10:17

红影 发表于 2022-1-17 10:16
你说的中间是指的？

我是说的内框。和小辣椒的比，找找自我感觉{:5_117:}

马黑黑 发表于 2022-1-17 10:19

红影 发表于 2022-1-17 10:15
嗯嗯，改了，我把bottom去掉了，索性上下都留点，上面也觉得离图片有点近。

图片也可以这样改么，想图 ...

嗯。也可以在CSS代码中加入h2的定义，考虑到只用一次，用行内 style 定义也好

马黑黑 发表于 2022-1-17 10:21

你这是图在上面。前面知道错误了，h2 的是 padding-top才对。

内框的内边距不知道设定的合理不，可以改的

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

马黑黑 发表于 2022-1-17 10:17
我是说的内框。和小辣椒的比，找找自我感觉

嗯嗯，这个有立体效果，漂亮多了{:4_199:}

红影 发表于 2022-1-17 10:27

马黑黑 发表于 2022-1-17 10:19
嗯。也可以在CSS代码中加入h2的定义，考虑到只用一次，用行内 style 定义也好

知道了，只用一次的不需要单独设定，只要在行内设定即可。学习了{:4_187:}

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

马黑黑 发表于 2022-1-17 10:21
你这是图在上面。前面知道错误了，h2 的是 padding-top才对。

内框的内边距不知道设定的合理不，可以改 ...

不是h2，我想把图片往下点。

红影 发表于 2022-1-17 10:35

最后的那句作者日期那里，想变得小点字体，忘记改怎么弄。其他的都差不多了{:4_173:}

加林森 发表于 2022-1-17 11:00

红影制作得挺好的，很漂亮。{:4_199:}

红影 发表于 2022-1-17 12:11

加林森 发表于 2022-1-17 11:00
红影制作得挺好的，很漂亮。

谢谢队长鼓励，我是赶紧也跟着做一下。黑黑这个不需要边框图片了，完全是代码模拟的边框呢{:4_204:}

红影 发表于 2022-1-17 12:12

已经加入了outline: none;现在播放或暂停没有虚边了。

马黑黑 发表于 2022-1-17 12:24

红影 发表于 2022-1-17 12:12
已经加入了outline: none;现在播放或暂停没有虚边了。

不错不错

查看完整版本: 作业——纯css音乐帖框架表达