小辣椒 发表于 2022-1-16 20:18

交作业--外加按钮链接制作

<br><br><br>
<DIV align=center>
<table style="position: relative; width:700px;" border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height= 67 background=https://wj1.zp68.com:812/lxx/yunhua/20210209/s.jpg>
</TD></TR><TR><TD height=60 background=https://wj1.zp68.com:812/lxx/yunhua/20210209/z.jpg>
<br>
<br><div align="center">
<img src="http://image.hnol.net/c/2022-01/16/16/202201161607275171-5087368.gif" width="550" _height="366" border="0">
</div><br>
<div align="center"><p style="line-height:30px">
<b><font face="微软雅黑" size="4">张杰-三生三世<br>
</font></b>
<font color="#313736" face="微软雅黑" size="3">(电视剧《三生三世十里桃花》主题曲</font><font color="#313736" face="微软雅黑">
</font>&nbsp;<div align="center"><br>
学习黑黑的按钮链接做一个</div>
<div style="text-align: justify;">
<p style="text-align:left; line-height:25px; letter-spacing:1.8px; padding-right:1.6cm; padding-left:6.6cm">
<font color="#313736" face="微软雅黑">
我听见寒风 扰乱了叶落<br>
在寂寞阴暗长居住的巷弄<br>

我听见孤单 在隐忍的夜晚<br>

是被爱刺痛啜泣者的胸膛<br>

我是心门上了锁的一扇窗<br>

任寒风来来去去关不上<br>

这些年无法修补的风霜<br>

看来格外的凄凉<br>

风来时撩拨过往的忧伤<br>

像整个季节廉价的狂欢<br>

让我们从头来吧 如梦如花<br><br>


</span></section>
<section section style="text-align:center; line-height: 3em;">

<style type="text/css">
.picBtn {
      width: 48px;
      height: 49px;
      border: none;
      outline: none;
      border-radius: 8px;
      background: transparent url('http://image.hnol.net/c/2022-01/16/12/202201161242177911-5087368.gif') 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>



<p><audio id="music"hidden="true" src="https://wj.zp68.com/lxx/yunhua/2022/02/08/ssssslth.mp3" controls="controls"></audio><br> </p>
<button id="picBtn" class="picBtn"></button>

<script language="javascript">

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

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-01/16/12/202201161243024491-5087368.gif')") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-01/16/12/202201161242177911-5087368.gif')");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('http://image.hnol.net/c/2022-01/16/12/202201161242177911-5087368.gif')";
})

</script>
<br><br>
<div align="center"><p style="line-height:30px">
<b><font color="#222222" face="宋体" size="2">

小辣椒 2022.01.16<br>
</TD></TR><TR><TD height=130 background=https://wj1.zp68.com:812/lxx/yunhua/20210209/x.jpg>
</table><br><br><br><br><br></div>

小辣椒 发表于 2022-1-16 20:19

黑黑，我发现这个圆按钮也是出来方的点击按钮效果，这个效果没有办法改圆的吧？

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

继续听黑黑的指导{:4_173:}

大猫咪 发表于 2022-1-16 20:33

真漂亮，辣椒制作满分，歌也好听，真棒！

{:4_204:}{:4_199:}{:4_179:}

东篱闲人 发表于 2022-1-16 20:39

咋有个黑框？{:5_115:}

小辣椒 发表于 2022-1-16 20:42

东篱闲人 发表于 2022-1-16 20:39
咋有个黑框？

老头，这个播放器是黑黑特制的，记得要手动播放

小辣椒 发表于 2022-1-16 20:43

大猫咪 发表于 2022-1-16 20:33
真漂亮，辣椒制作满分，歌也好听，真棒！

猫猫真会表扬人，小辣椒学习制作，等黑黑批改作业

红影 发表于 2022-1-16 21:33

亲爱的又换了个按钮了，漂亮。那个按钮周边的框应该是可以去掉的吧。{:4_187:}

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

这个外面的方的框去了@马黑黑

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

红影 发表于 2022-1-16 21:33
亲爱的又换了个按钮了，漂亮。那个按钮周边的框应该是可以去掉的吧。

亲爱的，感觉好累，一下子10点多了

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

小辣椒 发表于 2022-1-17 22:01
亲爱的，感觉好累，一下子10点多了

是啊，每天的瞬间过那么快。亲爱的赶紧休息吧，别累着了{:4_179:}

马黑黑 发表于 2022-1-17 23:03

小辣椒 发表于 2022-1-16 20:19
黑黑，我发现这个圆按钮也是出来方的点击按钮效果，这个效果没有办法改圆的吧？

效果不是一样的么
页: [1]
查看完整版本: 交作业--外加按钮链接制作