查看: 33|回复: 29

[单曲欣赏] 【九款边框】简约边框代码

[复制链接]
发表于 2026-4-7 11:12:34 | 显示全部楼层 |阅读模式
边框的宽度你可以根据上传图片,自己修改,建议图片宽度一般为600像素左右,边框默认宽度为640,我这里是修改为:780px,边框里文字随意修改为歌曲的歌词等

  1. <div style="max-width:780px; margin:0 auto; padding:20px 0;">
  2.   <div style="border:1px solid #212121; background:#fafafa; padding:25px 20px; box-shadow:0 2px 0 #212121;">
  3.     <h3 style="color:#212121; margin:0 0 1em; text-align:center; font-weight:normal; letter-spacing:2px;">水墨主题内容</h3>
  4.    
  5.     <p style="color:#424242; text-align:center; font-family:'SimSun', serif;">
  6.       极简线条边框搭配留白设计<br>
  7.       黑白色调呈现禅意,适合散文、艺术类内容
  8.     </p>
  9.     <p style="color:#424242; text-align:center; font-family:'SimSun', serif;">
  10.       可自由添加散文片段、水墨画作描述、禅意短句等内容<br>
  11.       段落间距由浏览器自然控制,呼应留白美学
  12.     </p>
  13.    
  14.     <div style="margin-top:1em; text-align:center; padding:15px; background:#f5f5f5; border-top:1px dashed #bdbdbd;">
  15.       <p style="color:#212121; margin-bottom:10px; font-size:14px; letter-spacing:1px;">生命树下-你是我唯一的依靠</p>
  16.       <audio controls loop style="width:100%;max-width:300px;" src="https://www.joy127.com/url/147285f1b02b9c.mp3"></audio>
  17.     </div>
  18.   </div>
  19. </div>

  20. <script>
  21. setTimeout(function(){
  22. var audio = document.querySelector('audio');
  23. if(audio){
  24.   audio.loop = true;
  25.   try { audio.play(); } catch(e) {}
  26. }
  27. }, 500);
  28. </script>
复制代码

评分

5

查看全部评分

 楼主| 发表于 2026-4-7 11:12:35 | 显示全部楼层
效果如下,附上一首好听的音乐试听

水墨主题内容

极简线条边框搭配留白设计
黑白色调呈现禅意,适合散文、艺术类内容

可自由添加散文片段、水墨画作描述、禅意短句等内容
段落间距由浏览器自然控制,呼应留白美学

生命树下-你是我唯一的依靠

 楼主| 发表于 2026-4-7 11:12:36 | 显示全部楼层
  1. <div style="max-width:640px;margin:0 auto;padding:20px 0;">
  2. <div style="border:2px solid #8b0000;background:#fffaf0;padding:25px 20px;">
  3. <h3 style="color:#8b0000;margin:0 0 1em;text-align:center;font-family:SimHei;">音乐标题</h3>
  4. <p style="color:#333;text-align:center;line-height:2;">今生缘浅未相守<br>几世痴念几度愁</p>
  5. <div style="margin-top:1em;text-align:center;padding:15px;background:#fdf3f3;border-top:1px solid #eac1c1;">
  6. <audio controls loop style="width:100%;max-width:300px;" src="mp3地址"></audio>
  7. </div>
  8. </div>
  9. </div>
  10. <script>setTimeout(()=>{let a=document.querySelector('audio');a&&(a.loop=!0,a.play().catch(()=>{}))},500);</script>
复制代码
 楼主| 发表于 2026-4-7 11:12:37 | 显示全部楼层
效果:

音乐标题

今生缘浅未相守
几世痴念几度愁

 楼主| 发表于 2026-4-7 11:12:38 | 显示全部楼层
  1. <div style="max-width:640px;margin:0 auto;padding:20px 0;">
  2. <div style="border:1px solid #eee;background:#fff;padding:30px 25px;border-radius:10px;">
  3. <h3 style="color:#666;text-align:center;font-weight:normal;">人间烟火</h3>
  4. <p style="color:#777;text-align:center;line-height:1.8;">一心向暖<br>不负流年</p>
  5. <div style="margin-top:20px;text-align:center;">
  6. <audio controls loop style="width:100%;max-width:300px;" src="mp3地址"></audio>
  7. </div>
  8. </div>
  9. </div>
  10. <script>setTimeout(()=>{let a=document.querySelector('audio');a&&(a.loop=!0,a.play().catch(()=>{}))},500);</script>
复制代码
 楼主| 发表于 2026-4-7 11:12:39 | 显示全部楼层
效果:

人间烟火

一心向暖
不负流年

 楼主| 发表于 2026-4-7 11:12:40 | 显示全部楼层
  1. <div style="max-width:640px;margin:0 auto;padding:20px 0;">
  2. <div style="background:#2c2c2c;padding:30px;border-radius:8px;">
  3. <h3 style="color:#fff;text-align:center;">深夜独白</h3>
  4. <p style="color:#ccc;text-align:center;line-height:2;">孤独是人生常态<br>思念是无声告白</p>
  5. <div style="margin-top:20px;text-align:center;">
  6. <audio controls loop style="width:100%;max-width:300px;background:#444;" src="https://www.joy127.com/url/14739898255194.mp3"></audio>
  7. </div>
  8. </div>
  9. </div>
  10. <script>setTimeout(()=>{let a=document.querySelector('audio');a&&(a.loop=!0,a.play().catch(()=>{}))},500);</script>
复制代码
 楼主| 发表于 2026-4-7 11:12:41 | 显示全部楼层
效果:

深夜独白

孤独是人生常态
思念是无声告白

 楼主| 发表于 2026-4-7 11:12:42 | 显示全部楼层
  1. <div style="max-width:640px;margin:0 auto;padding:20px 0;">
  2. <div style="background:#fdf6f8;padding:30px;border:1px solid #f7dce5;border-radius:10px;">
  3. <h3 style="color:#c95a7a;text-align:center;">一路生花</h3>
  4. <p style="color:#777;text-align:center;line-height:1.8;">愿所有美好如期而至<br>愿所有思念皆有回音</p>
  5. <div style="margin-top:20px;text-align:center;">
  6. <audio controls loop style="width:100%;max-width:300px;" src="mp3地址"></audio>
  7. </div>
  8. </div>
  9. </div>
  10. <script>setTimeout(()=>{let a=document.querySelector('audio');a&&(a.loop=!0,a.play().catch(()=>{}))},500);</script>
复制代码
 楼主| 发表于 2026-4-7 11:12:43 | 显示全部楼层
效果:

一路生花

愿所有美好如期而至
愿所有思念皆有回音

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

小黑屋|苏ICP备16043306号-1

GMT+8, 2026-4-24 15:58 , Processed in 0.053401 second(s), 18 queries .

Powered by Discuz! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表