本帖最后由 加林森 于 2022-1-10 16:11 编辑 <br /><br />红影 发表于 2021-11-21 13:13
那些文字看着更难。
是的，不好写的。
<div style="position:relative;width:1100px;left:-215px;top:100px;color:silver;padding:16px;border-radius:8px;background:#444 url('https://www.80wp.com/wj/3015539/67d8d70ba8ccdb82e81378d53a0b637c.jpg') no-repeat bottom right;box-shadow:4px 4px 5px #333;">
<div style="padding:10px;column-count:3;color:white;">
<strong>腊八节</strong><br><br>
歌手：长琴<br><br>
作词 : 长琴<br>
作曲 : 长琴<br>
留恋腊八的美好<br>
怀念腊八的奇妙<br>
铭记腊八的神秘<br>
想着腊八的甜蜜<br>
就是一碗粥<br>
也别太留恋了<br>
喝一碗喝出平安<br>
端一碗端出吉祥<br>
送一份 送出快乐<br>
祝福你 伴你温暖<br>
小小寓意糖<br>
粒粒福运来<br>
。。。。。。<br>
</div>
<iframe style="position:relative;left:460px;" border="0" marginwidth="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1809135484&auto=1&height=66"></iframe>
</div>
加林森 发表于 2021-11-21 13:15
是的，不好写的。
电视里看到以前的经书都是手抄的，真不容易啊。
红影 发表于 2021-11-21 13:24
电视里看到以前的经书都是手抄的，真不容易啊。
是啊，都是苦和尚写出来的。
队长要这一帖的代码：
<style type="text/css">
.mDiv { font-family:'微软雅黑'; font-size:20px; color:#fff; width:1280px; height:750px; background:url('https://638183.freep.cn/638183/Pic/techno.jpg') no-repeat; background-size: 1280px 750px; transform:translate(-340px); display:flex; }
.cDiv { flex-grow:2; }
.dDiv { position:relative; left:-80px; top:300px; width: 320px; }
</style>
<div class="mDiv">
<div><iframe style="transform:translate(20px,60px);" frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="500" src="https://music.163.com/outchain/player?type=0&id=4946084383&auto=1&height=100"></iframe></div>
<div class="cDiv"></div>
<div class="dDiv">Techno是一种电子音乐的曲风，又称科技舞曲、高科技舞曲等。<br><br>Techno利用电脑合成器合成，做出一些特殊音效，这种音乐常常是许多音效组合起来的。<br><br>刻板印象中的科技音乐，旋律简单重复，机械冰冷而富有科技感，但不乏温暖致幻的作品。有观点说，它最初的灵感来源于重工业中的噪声。</div>
</div>
复制代码
也没啥，简简单单：父容器设了背景图，用translate左移，规定 display 为 flex 以便让其下三个子div排排坐；第一个子div装播放器，第二个子div啥也不装久占位且通过 flex-grow 值设定占最多的位（中间部分都是它）；第三个div放文字，并左移上移。