音乐区发帖代码

屿风

< 播放器 >

Repair Patch

Repair and reissue by Miller

屿风

1. <!-- DZ音乐卡片｜图片自适应｜可调节卡片上下外边距｜封面下方嵌入网易云外链播放器｜无JS｜修复播放器空白&高度失效 -->
   
2. <style>
   
3. /* ==========【可修改参数，仅修改此区域】========== */
   
4. .dzmusic-card-wrap {
   
5.     --card-w: 450px;         /* 卡片整体宽度 */
   
6.     --card-radius: 14px;     /* 卡片外圆角 */
   
7.     --cover-radius: 10px;    /* 封面图片圆角 */
   
8.     --card-bg: #181a22;      /* 卡片背景色 */
   
9.     --shadow-color: rgba(0,0,0,0.35);
   
10.     --hover-translate: -6px; /* 悬浮上浮距离 */
    
11.     --hover-brightness: 1.2;/* 悬浮图片亮度 */
    
12.     --title-color: #ffffff;  /* 歌名文字颜色 */
    
13.     --artist-color: #b4b8c8; /* 歌手文字颜色 */
    
14.     --inner-padding: 16px;   /* 卡片内边距 */
    
15.     --card-margin-top: 50px;/* &#9999;&#65039;卡片距离帖子上方高度 */
    
16.     --card-margin-bottom:50px;/* &#9999;&#65039;卡片距离帖子下方高度 */
    
17.     --player-height:1px;    /* &#9999;&#65039;网易云播放器高度，建议范围：60&#8209;86px，不要小于60px */
    
18.     --player-margin-top:10px;/* &#9999;&#65039;封面到播放器的间距 */
    
19. }
    
20. /* ============================================== */
    
21. 
    
22. .dzmusic-card-wrap {
    
23.     width: var(--card-w);
    
24.     margin: var(--card-margin-top) auto var(--card-margin-bottom);
    
25.     border-radius: var(--card-radius);
    
26.     background: var(--card-bg);
    
27.     padding: var(--inner-padding);
    
28.     box-shadow: 0 4px 14px var(--shadow-color);
    
29.     transition: all 0.24s ease;
    
30.     font-family: system-ui, "Microsoft Yahei", sans-serif;
    
31.     box-sizing: border-box;
    
32. }
    
33. .dzmusic-card-wrap:hover {
    
34.     transform: translateY(var(--hover-translate));
    
35.     box-shadow: 0 10px 24px var(--shadow-color);
    
36. }
    
37. 
    
38. /* 封面容器：图片自适应卡片 */
    
39. .dzmusic-cover-box {
    
40.     width: 100%;
    
41.     border-radius: var(--cover-radius);
    
42.     overflow: hidden;
    
43.     filter: brightness(1);
    
44.     transition: filter 0.24s ease;
    
45. }
    
46. .dzmusic-card-wrap:hover .dzmusic-cover-box {
    
47.     filter: brightness(var(--hover-brightness));
    
48. }
    
49. 
    
50. .dzmusic-cover-box img {
    
51.     width: 100%;
    
52.     height: auto;
    
53.     max-width: 100%;
    
54.     display: block;
    
55.     cursor: zoom&#8209;in;
    
56. }
    
57. 
    
58. /* 网易云播放器容器【修复空白、高度变量生效】 */
    
59. .dzmusic-netease-player {
    
60.     width:100%;
    
61.     height: var(--player-height);
    
62.     margin-top: var(--player-margin-top);
    
63.     border-radius:8px;
    
64.     overflow:hidden;
    
65.     box-sizing: border-box;
    
66. }
    
67. .dzmusic-netease-player iframe{
    
68.     width:100%;
    
69.     height:100%;
    
70.     border:none;
    
71.     margin:0;
    
72.     padding:0;
    
73.     /* 覆盖iframe标签上写死的width/height属性 */
    
74.     aspect-ratio: unset !important;
    
75. }
    
76. 
    
77. .dzmusic-text-area {
    
78.     text-align: center;
    
79.     margin-top: 14px;
    
80. }
    
81. .dzmusic-songname {
    
82.     color: var(--title-color);
    
83.     font-size: 17px;
    
84.     font-weight: 600;
    
85.     margin-bottom: 4px;
    
86. }
    
87. .dzmusic-singer {
    
88.     color: var(--artist-color);
    
89.     font-size: 14px;
    
90. }
    
91. </style>
    
92. 
    
93. <div class="dzmusic-card-wrap">
    
94.     <div class="dzmusic-cover-box">
    
95.         <!-- 替换为你的附件标签 [attachimg]你的ID[/attachimg] -->
    
96.       <这里替换上传的图片>
    
97.     </div>
    
98. 
    
99.     <!-- &#9999;&#65039;网易云外链iframe，替换src里面歌曲ID；已删除iframe上写死的width、height，交由CSS变量控制 -->
    
100.     <div class="dzmusic-netease-player">
     
101.         < 网易云播放器 >
     
102.     </div>
     
103. 
     
104.     <div class="dzmusic-text-area">
     
105.         <div class="dzmusic-songname">Repair Patch</div>
     
106.         <div class="dzmusic-singer">Repair and reissue by Miller</div>
     
107. 
     
108. [hide]隐藏内容[/hide]
     
109. 
     
110. <br>
     
111.     </div>
     
112. </div>
     
113. 
     

复制代码

屿风

2. <!-- DZ音乐卡片｜图片自适应｜可调节卡片上下外边距｜封面下方嵌入网易云外链播放器｜无JS｜修复播放器空白&高度失效 -->
3. <style>
4. /* ==========【可修改参数，仅修改此区域】========== */
5. .dzmusic-card-wrap {
6. --card-w: 500px; /* 卡片整体宽度 */
7. --card-radius: 14px; /* 卡片外圆角 */
8. --cover-radius: 10px; /* 封面图片圆角 */
9. --card-bg: #ffffff; /* 卡片背景色 */
10. --shadow-color: rgba(120,120,120,0.25);
11. --hover-translate: -6px; /* 悬浮上浮距离 */
12. --hover-brightness: 1.5;/* 悬浮图片亮度 */
13. --title-color: #282828; /* 歌名文字颜色 */
14. --artist-color: #282828; /* 歌手文字颜色 */
15. --inner-padding: 16px; /* 卡片内边距 */
16. --card-margin-top: 50px;/* &#9999;&#65039;卡片距离帖子上方高度 */
17. --card-margin-bottom:50px;/* &#9999;&#65039;卡片距离帖子下方高度 */
18. --player-height:1px; /* &#9999;&#65039;网易云播放器高度，建议范围：60&#8209;86px，不要小于60px */
19. --player-margin-top:10px;/* &#9999;&#65039;封面到播放器的间距 */
20. }
21. /* ============================================== */
23. .dzmusic-card-wrap {
24. width: var(--card-w);
25. margin: var(--card-margin-top) auto var(--card-margin-bottom);
26. border-radius: var(--card-radius);
27. background: var(--card-bg);
28. padding: var(--inner-padding);
29. box-shadow: 0 4px 14px var(--shadow-color);
30. transition: all 0.24s ease;
31. font-family: system-ui, "Microsoft Yahei", sans-serif;
32. box-sizing: border-box;
33. }
34. .dzmusic-card-wrap:hover {
35. transform: translateY(var(--hover-translate));
36. box-shadow: 0 10px 24px var(--shadow-color);
37. }
39. /* 封面容器：图片自适应卡片 */
40. .dzmusic-cover-box {
41. width: 100%;
42. border-radius: var(--cover-radius);
43. overflow: hidden;
44. filter: brightness(1);
45. transition: filter 0.24s ease;
46. }
47. .dzmusic-card-wrap:hover .dzmusic-cover-box {
48. filter: brightness(var(--hover-brightness));
49. }
51. .dzmusic-cover-box img {
52. width: 100%;
53. height: auto;
54. max-width: 100%;
55. display: block;
56. cursor: zoom&#8209;in;
57. }
59. /* 网易云播放器容器【修复空白、高度变量生效】 */
60. .dzmusic-netease-player {
61. width:100%;
62. height: var(--player-height);
63. margin-top: var(--player-margin-top);
64. border-radius:8px;
65. overflow:hidden;
66. box-sizing: border-box;
67. }
68. .dzmusic-netease-player iframe{
69. width:100%;
70. height:100%;
71. border:none;
72. margin:0;
73. padding:0;
74. /* 覆盖iframe标签上写死的width/height属性 */
75. aspect-ratio: unset !important;
76. }
78. .dzmusic-text-area {
79. text-align: center;
80. margin-top: 14px;
81. }
82. .dzmusic-songname {
83. color: var(--title-color);
84. font-size: 17px;
85. font-weight: 600;
86. margin-bottom: 4px;
87. }
88. .dzmusic-singer {
89. color: var(--artist-color);
90. font-size: 14px;
91. }
92. </style>
94. <div class="dzmusic-card-wrap">
95. <div class="dzmusic-cover-box">
96. <!-- 替换为你的附件标签 [attachimg]你的ID[/attachimg] -->
98. </div>
100. <!-- &#9999;&#65039;网易云外链iframe，替换src里面歌曲ID；已删除iframe上写死的width、height，交由CSS变量控制 -->
101. <div class="dzmusic-netease-player">
102. < 播放器 >
103. </div>
105. <div class="dzmusic-text-area">
106. <div class="dzmusic-songname">Repair Patch</div>
107. <div class="dzmusic-singer">Repair and reissue by Miller</div>
108. <br>
109. </div>
110. </div>

复制代码