vip贵宾
性别保密
威望 点
注册时间2017-10-2
最后登录1970-1-1
在线时间 小时
好友
UID51124
听众
- 积分
- 4379
 鲜花( 232)  鸡蛋( 0)
|
楼主 |
发表于 2019-3-15 11:13
|
显示全部楼层
本帖最后由 楚绿 于 2019-3-19 09:41 编辑
晴朵 ★新手简易发音乐贴教程★-忘忧草爱网 - Powered by Discuz! http://www.wyc520.cn/forum.php?m ... 3D1&_dsign=f7dd6475
代码如下：
- <div align="center">
- <blockquote style="padding: 3px 4px 4px; border: 1px dashed<font color="#ff0000"> rgb(85, 85, 85)</font>; border-image: none; width:<font color="#2e8b57"> </font><font color="#ff0000">600</font>px; margin-right: 3px; margin-left: 4px; background-color: <font color="#ff0000">rgb(255, 255, 255)</font>;"><br><br><div align="center">
- <div align="center"></div><font color="#0000ff"></font><br><br>
- </div>
- <div style="text-align: justify;"><p style="text-align: left; line-height:<font color="#ff0000"> 38</font>px; text-indent: <font color="#ff0000">2</font>em; letter-spacing: <font color="#ff0000">1</font>px; padding-right:<font color="#ff0000"> 0.6</font>cm; padding-left:<font color="#ff0000"> 0.6</font>cm;"><font size="2"><font face="宋体">
- 夜曲，一首属于夜晚的曲子。
- 原曲是神秘园里的音乐，这首女声的哼唱，加深了情感的表达。。</font></font></p><p></p><p></p></div><font size="2"><font face="宋体"> </font></font><div style="text-align: justify;"><font size="2"><font face="宋体"><p style="text-align: left; line-height: 38px; text-indent: 2em; letter-spacing: 1px; padding-right: 0.6cm; padding-left: 0.6cm;"><font size="2"><font face="宋体">梦幻的夜里，一切想象都可以在此时绘制，并生长，
- 比如，藏在你内心深处的孤独与执念。
- 此刻，我只想沉浸在这醉人的旋律中，在灵魂深处漫漫回旋，点滴思念都寄存在婉约的时光中。
- 如此深沉，又如此温暖。
- </font></font></p></font></font><p></p>
- <div style="text-align: justify;"><p style="text-align: left; line-height: 38px; text-indent: 2em; letter-spacing: 1px; padding-right: 0.6cm; padding-left: 0.6cm;"><font size="2"><font face="宋体">
- 喜欢的一首夜曲，送给小漠亲爱哒和浅香公子，谢谢你们把我打扮得辣么漂亮！！最近太忙，别嫌我借着活动打包送礼哈！么么哒！</font></font></p><p></p><p></p>
- <div align="center"><font color="#800080"><audio style="width: 320px; height: 64px;" src="https://music.163.com/song/media/outer/url?id=4278232.mp3" autoplay="autoplay" loop="loop" controls="controls" type="audio/mpeg"></audio></font></font></font>
- </div>
- <br></div><br></div></font></font></div></div></blockquote></div>
[color=rgb(51, 102, 153) !important]复制代码
楼上代码解析：
01行：<div align="center">这个是表示整个帖子居中。有的朋友喜欢帖子放在最左边，那就可以把center 改为 left，我个人还是觉得帖子居中显得更美观。
02行：<blockquote style="padding: 3px 4px 4px; border: 1px dashed<font color="#ff0000"> rgb(85, 85, 85)</font>; border-image: none; width:<font color="#2e8b57"> </font><font color="#ff0000">600</font>px; margin-right: 3px; margin-left: 4px; background-color: <font color="#ff0000">rgb(255, 255, 255)</font>;"><br><br><div align="center">
03行：<div align="center"></div><font color="#0000ff">[img=420,336]，http://img.wyc520.cn/data/attach ... 2sxhg.jpg.thumb.jpg[/img]</font><br><br>
这两行代码指的是边框，也就是你们看到的那个虚线的框。#ff0000这个颜色指的是虚线的颜色，可以根据帖子整体搭配需要，改成你们想要的颜色。记住修改的时候，红色标记的四处都要同时修改，否则到时候帖子边框就是四个色哈。
600这个数值指的是帖子的宽度。这里可以修改成你们想要的宽度。
第03行这个代码[img=420,336]，http://img.wyc520.cn/data/attach ... 2sxhg.jpg.thumb.jpg[/img]是图片地址代码，相信很多朋友都认识，就不多做解释了。
关于图片大小的问题这里说一下：图片的宽度只能设置为小于帖子的宽度。比如，我这个帖子的宽度为600，那么图片的宽度不能超过600，否则就会溢出边框，就不美观了。
把图片宽度调小有两个方法：
1、先把图片用图片软件（比如：美图秀秀、PS等）等比例调到合适的尺寸再上传。
2、直接把图片传到你其他的任一帖子里，鼠标点右键获取图片地址（比如我这个帖子里图片的地址就是h.ttp://img.wyc520.cn/data/attachment/forum/201903/09/214930js244x91hsx2sxhg.jpg.thumb.jpg），再把获取到的地址替换到第3行那个图片地址里，再将这里的数值[img=420,336]调整为合适的大小即可。
05行：<div style="text-align: justify;"><p style="text-align: left; line-height:<font color="#ff0000"> 38</font>px; text-indent: <font color="#ff0000">2</font>em; letter-spacing: <font color="#ff0000">1</font>px; padding-right:<font color="#ff0000"> 0.6</font>cm; padding-left:<font color="#ff0000"> 0.6</font>cm;"><font size="2"><font face="宋体">
这一串就是文字代码了。#ff0000 这是字体颜色。
下面就说一下这串代码里出现的数值所对应的属性，即所实现的效果。
line-height（行间距）：38 表示每一行文字之间间隔的高度。数值越大，表示间距越高。
text-indent（首行缩进）：2表示每一段首行文字的空2个字符的距离。就像我们小时候写作文一样的，每一段的起头，老师都会让我们空两格。同样这个数值根据自己的喜好来调整。空几格，就调为相应的数值。调为0，表示不空格，即与下一行保持平行。
letter-spacing（字符间距）：1这个数值表示每个字符之间的间隔，数值越大，字符之间间隔越多。这个数值建议大家发帖时不做调整，就默认为1。
padding-right/left（右/左内边距）：0.6表示每行首尾文字与边框线之间间隔的距离，想要与边框空隙多一点，就把数值调大，想与边框线距离拉近一点，就把数值调小一点。
3楼代码里，从05行到14行都是文字段落的设置。今天风吟问到文字分段的问题，这里我也说一下。
如果你想把一篇文字分成几段放上去，那么，在每一段文字的前面，都要加上05行的这段代码。
如果还是不会的，教你们一个懒人办法，就是把我放在3楼的代码，直接复制，然后在文字的每一段落，替换上你自己的文字。
下面，来说说最核心的问题：播放器的使用。
16行：<div align="center"><font color="#800080"><audio style="width: 320px; height: 64px;" src="https://music.163.com/song/media/outer/url?id=4278232.mp3" autoplay="autoplay" loop="loop" controls="controls" type="audio/mpeg"></audio></font></font></font>
红色的这一串就是播放器的代码了。也就是你们看到的2楼帖子底部那款白色的播放器的代码。
喜欢用这个播放器的朋友可以直接套用，只需更换MP3地址就好。
另，autoplay="autoplay"这个代码，表示自动播放。如果你不想让歌曲自动播放，就把这个代码删掉，就行了。
如果你的音乐来自网易云，
方法一：（大家可以看看树姐姐的这个帖子，很有用处的哟）音乐搜索器
http://www.wyc520.cn/forum.php?mod=viewthread&tid=375909&fromuid=51936
(出处: 忘忧草爱网)
方法二：只需更换歌曲ID，即把id=4278232，将4278232替换成你在网易云搜到的那首歌的ID即可。
这个方法是利用网易云的漏洞，可以将网易云里不能外衔的音乐嵌到论坛来播放。目前还是可行的，估计以后用的人多了，此漏洞就会被修复掉了。
喜欢用网易云播放器的朋友，在这里我也介绍一下网易云播放器的使用（此种方法仅限网易云能试听且允许外衔的音乐）。
1、进入网易云音乐，（网址：https://music.163.com/），注册账号。
2、点红色箭头这里，搜索你要找的歌曲名。
3、点这里，生成外衔播放器。
4、如图中箭头所示，复制的代码替换到16行红色那一串那里去，就能显示网易云的播放器了。播放器的尺寸可根据个人喜好调整。
酱紫，一个简单完整的音乐贴就出炉了。我能想到的就这些了，说得不全面的地方欢迎大家指正。
音乐版欢迎大家积极发帖，快乐分享！！祝大家玩得愉快！！
E N D
|
|
狗仔卡
发表于 2019-3-10 19:08
提升卡
沉默卡
喧嚣卡
变色卡
抢沙发
显身卡
发表于 2019-3-10 19:32
晚安，好梦。