东篱闲人 发表于 2021-12-6 21:36
干净利索，意境悠悠。。。
学习学习再学习，是不是啊。{:4_190:}
本帖最后由 加林森 于 2022-1-27 17:57 编辑 <br /><br />绿叶清舟 发表于 2021-12-6 21:31
队长厉害的做得很漂亮了
以后我还要跟你学习的啊
<style type="text/css">
.mnBox {
position: relative;
margin: 0 auto;
padding: 35px;
width: 640px;
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('http://img.mp.itc.cn/upload/20170122/4b90754abf6249f6a37b44869631c2fe_th.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>
<div class="mnBox">
<div class="ctBox">
<p><img alt="354 height="501"="" src="http://img.mp.itc.cn/upload/20170122/4b90754abf6249f6a37b44869631c2fe_th.gif" /></p>
<h2 style="padding-bottom: 10px;">大海啊故乡 - 谭晶</h2>
<h2 style="text-align:center;">TO：樵歌</h2>
<pre>
小时候 妈妈对我讲
大海就是我故乡
海边出生 海里成长
大海啊大海
是我生长的地方
海风吹 海浪涌
随我飘流四方
大海啊 大海
就像妈妈一样
走遍天涯海角
总在我的身旁
小时候 妈妈对我讲
大海就是我故乡
海边出生 海里成长
大海啊大海
是我生长的地方
海风吹 海浪涌
随我飘流四方
大海啊 大海
就像妈妈一样
走遍天涯海角
总在我的身旁
大海啊故乡
大海啊故乡
我的故乡 我的故乡
</pre>
<div style="position:absolute; width:120px; left:300px; top: 900px; 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://oss.shandianpan.com/9fab7be881c5bfa32b6887f6aa2b2ad5.mp3" loop="loop" autoplay="autoplay" ></audio> </p>
<p><button id="picBtn" class="picBtn"></button></p><br>
<p>加林森2022 01 27</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('http://img.mp.itc.cn/upload/20170122/4b90754abf6249f6a37b44869631c2fe_th.gif')";
})
</script> </div><br><br><br>
真舒服，继续欣赏队长美帖 {:4_204:}
大猫咪 发表于 2021-12-6 22:03
真舒服，继续欣赏队长美帖
谢谢猫猫{:4_179:}
加林森 发表于 2021-12-6 21:20
谢谢红影对大家的解释！
忽然想起那个摔琴谢知音的故事，就去搜了一下。
红影 发表于 2021-12-6 22:13
忽然想起那个摔琴谢知音的故事，就去搜了一下。
嗯嗯，我在帖里无法展开的。
{:4_178:}
高山流水难觅知音
马黑黑 发表于 2021-12-6 22:23
谢谢老黑{:4_191:}
加林森 发表于 2021-12-6 22:27
谢谢老黑
客气客气
马黑黑 发表于 2021-12-6 22:27
高山流水难觅知音
是的是的
队长，这个音乐真的非常好听，最喜欢的古筝{:4_199:}
小辣椒 发表于 2021-12-6 22:28
队长，这个音乐真的非常好听，最喜欢的古筝
是的啊。谢谢小辣椒支持！
马黑黑 发表于 2021-12-6 22:28
客气客气
喝酒喝酒
加林森 发表于 2021-12-6 22:32
喝酒喝酒
干
马黑黑 发表于 2021-12-6 22:33
干
好，干！
加林森 发表于 2021-12-6 22:21
嗯嗯，我在帖里无法展开的。
是的，文字太多了，帖子里只留主要的就足够{:4_204:}
高山流水~~~我仔细看了那个水没有在流下来~~~{:4_170:}
杨柳青 发表于 2021-12-6 23:13
高山流水~~~我仔细看了那个水没有在流下来~~~
小家伙看着你
红影 发表于 2021-12-6 22:44
是的，文字太多了，帖子里只留主要的就足够
谢谢红影！{:4_204:}