html5制作——《云朵上的梦》

海儿心

秋思梦景 发表于 2022-8-31 05:12
问候老师早上好！感谢您光临欣赏和热情光临！祝您天天开心快乐！我也不太懂代码，只是在其他老师代码的模 ...

谢谢老师回复，早晨好！

海儿心

起个网名好难 发表于 2022-8-30 18:30
除了audio标签是html 5 特有外，其它的标签都是html 4.01也有的。

谢谢好难老师解疑答难，早晨好！我们平常看到的代码多数是html 4.01 。
再一点，我发现有声老师的源代码与众不同，我找百度翻译，大挂号前，爸爸。。。。妈妈   。。儿子，代码的结构也不一样，这算什么结构的代码？

廖若晨星

欣赏秋思梦景老友动美图歌曲《云朵上的梦》上午好

海儿心

海儿心 发表于 2022-8-31 06:44
谢谢好难老师解疑答难，早晨好！我们平常看到的代码多数是html 4.01 。
再一点，我发现有声老师的源代码 ...

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1684341">

<br><br><br><br><br><br>

<style>
.papa { left: -400px; width: 1400px; height: 800px; background: purple url('https://pic.imgdb.cn/item/62b3c648094754312946fe6b.gif') no-repeat center/cover; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; width: 50%; height: 100%; transition: all 2s linear; }
.papa::before { background: tan url('https://pic.imgdb.cn/item/63008e9216f2c2beb1be22f2.jpg')  no-repeat center/cover; }
.papa::after { left: 50%; background: tan url('https://pic.imgdb.cn/item/63008e9216f2c2beb1be22f2.jpg')  no-repeat center/cover; }
.papa:hover::before { transform: translate(-100%); }
.papa:hover::after { transform: translate(100%); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: lightblue; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1000; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div class="papa">
        <div class="playbox">

        </div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=507160391.mp3" autoplay="autoplay" loop="loop"></audio>
</div></td></tr></table>
</div>

起个网名好难

海儿心 发表于 2022-8-31 06:44
谢谢好难老师解疑答难，早晨好！我们平常看到的代码多数是html 4.01 。
再一点，我发现有声老师的源代码 ...

恕我愚钝，不明白您的问题是什么。

以我的理解对于老年人来说，如果以前（退休前的工作中）没接触过代码什么的，现在学习音画就只要能把自己想表达出来的在帖子中呈现出来就行了。

海儿心

起个网名好难 发表于 2022-8-31 07:15
恕我愚钝，不明白您的问题是什么。

以我的理解对于老年人来说，如果以前（退休前的工作中）没接触过代 ...

好难老师，我把有声老师的代码发上来，是想说他的代码结构不一样，这是什么版本的html?

起个网名好难

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1684341">

<br><br><br><br><br><br>

<style>
.papa { left: -400px; width: 1400px; height: 800px; background: purple url('https://pic.imgdb.cn/item/62b3c648094754312946fe6b.gif') no-repeat center/cover; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; width: 50%; height: 100%; transition: all 2s linear; }
.papa::before { background: tan url('https://pic.imgdb.cn/item/63008e9216f2c2beb1be22f2.jpg')  no-repeat center/cover; }
.papa::after { left: 50%; background: tan url('https://pic.imgdb.cn/item/63008e9216f2c2beb1be22f2.jpg')  no-repeat center/cover; }
.papa:hover::before { transform: translate(-100%); }
.papa:hover::after { transform: translate(100%); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: lightblue; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1000; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div class="papa">
        <div class="playbox">

        </div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=507160391.mp3" autoplay="autoplay" loop="loop"></audio>
</div></td></tr></table>
</div>

红色的是论坛本身的代码，蓝色的是css样式表，橙色的是多余、无益的html代码，黑色的是html代码，其中只有audio标签是H5特有的，其余的在以前版本的html中就有了。

H5除增加了一些新的标签外还包含有老版本的大部分标签，同时又废弃了一些过时的标签。

海儿心

起个网名好难 发表于 2022-8-31 08:04
.papa { left: -400px; width: 1400px; height: 800px; background: purple url('https://pic. ...

谢谢老师，为我费了好多时间。我是想问红色代码从完整性看需要。但发帖时拿取也可以。你的来贴收获不小，有些问题百思不得其解，你一点拨就豁然开朗了。再次由衷感谢。早晨好！

阿强

秋思梦景 发表于 2022-8-31 05:08
问候老师早上好！感谢您光临欣赏和热情光临！祝您天天开心快乐！

                祝秋思梦景老师幸福安康。  

松柏一

html5音画果然漂亮，点赞