【美化♨帖子】懒人方式（直接套用，更新至22楼）

蔷薇几度花 · 发表于 2010-12-23 12:17

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？会员注册

×

<P align=center><FONT color=#ff0000><B><FONT size=5>【美化帖子】楼层目录</FONT></B></FONT></P><BR>　 <BR><BR><P align=center><FONT color=#ff3366><B><FONT size=2>沙发——简单的表格效果展示<BR><BR>板凳——简单的表格代码<BR><BR>地板——字体滚动效果展示<BR><BR>地下室——字体滚动代码详解<BR><BR>5楼——播放器制作展示<BR><BR>6楼——播放器制作详解<BR><BR>7楼——表格图框制作展示<BR><BR>8楼——表格图框制作代码<BR>　</FONT></B></FONT></P><P align=center><FONT color=#ff3366><B><FONT size=2>9楼——表格（颜色）代码</FONT></B></FONT></P><P align=center><STRONG><FONT color=#ff3366 size=2>　</FONT></STRONG></P><P align=center><STRONG><FONT color=#ff3366 size=2></FONT></STRONG> </P><P align=center><FONT color=#ff3366><B><FONT size=2>10楼——音画帖子表格边框</FONT></B></FONT></P><P align=center><STRONG><FONT color=#ff3366 size=2>　</FONT></STRONG></P><P align=center> </P><P align=center><FONT color=#ff3366><B><FONT size=2>11楼——完整音画帖子代码</FONT></B></FONT></P><P align=center> </P><P><FONT color=#ff3366><B><FONT size=2></FONT></B></FONT> </P><P align=center><FONT color=#ff3366><B><FONT size=2>12楼——18楼表格边框插入图片示范</FONT></B></FONT></P><P align=center><FONT color=#ff3366><B><FONT size=2></FONT></B></FONT> </P><P align=center><FONT color=#ff3366><B><FONT size=2></FONT></B></FONT> </P><P align=center><FONT color=#ff3366><B><FONT size=2>19楼——22楼图片透明效果展示</P><P align=center> </P><P align=center> </P><P align=center><BR> </P></FONT></B></FONT><BR>　 <BR><P align=center><FONT size=3><FONT color=#6666cc><B>『不定期更新』</B></FONT></FONT></P>

蔷薇几度花 · 发表于 2010-12-23 12:19

首先、简单表格。这是一款比较简单的，中间可以插入图片、输入文字。<P> </P><BR><P><BR> <TABLE style=\"WIDTH: 506px; BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-LEFT-STYLE: dotted; HEIGHT: 372px; BORDER-BOTTOM-STYLE: dotted\" borderColor=#ff0000 cellSpacing=0 cellPadding=3 width=506 bgColor=#ffffff border=2><BR> <TBODY><TR><BR> <TD> </TD></TR><BR> </TBODY></TABLE><BR></P><P></P><P> </P>

蔷薇几度花 · 发表于 2010-12-23 12:20

代码如下：

<BR><P><P> <BR><BR><P><BR> <TABLE style="WIDTH: 506px; BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-LEFT-STYLE: dotted; HEIGHT: 372px; BORDER-BOTTOM-STYLE: dotted" borderColor=#ff0000 cellSpacing=0 cellPadding=3 width=506 bgColor=#ffffff border=2><BR> <TBODY><TR><BR> <TD> </TD><BR> </TR><BR> </TBODY></TABLE><BR><BR><BR><P>

蔷薇几度花 · 发表于 2010-12-23 12:20

大家好奇滚动文字吗？
请先看效果图。
<BR>
<BR>
<MARQUEE style=\"WIDTH: 300px; HEIGHT: 45px\" scrollAmount=1 scrollDelay=10 direction=up >大家好<BR>我是薇薇.<BR>很开心在新靖江论坛里认识大家<BR>希望大家常驻.玩的开心</MARQUEE>

蔷薇几度花 · 发表于 2010-12-23 12:20

下面是详解：

如何在图片上作滚动字幕
　
1、插入文章背景图的代码是：
<DIV>
<TABLE width="500" border=0>
<TBODY>
<TR>
<TD background=背景图片地址 height=250>
<P>文章内容</P></TD></TR></TBODY></TABLE></DIV>

登录/注册后可看大图

2、简单的滚动字幕代码是：
<MARQUEE style="WIDTH: 100px; HEIGHT: 45px" scrollAmount=1 scrollDelay=10 direction=down >大家好，我是薇薇<BR>
由于技术还未掌握全面<BR>
页面效果还不理想<BR>
希望大家能多多给予意见和建议</MARQUEE>
代码说明：
width-------整个滚动区的宽度，可调；
height------整个滚动区的高度，可调；
scrollamount----滚动步长，改动变化很大，数值越大滚动越快；
scrolldelay-----滚动频率，每次跳动之间的时间间隔，数值越大跳的越慢；
direction-------滚动方向。
<BR>-------相当于回车。
注：direction表示字幕滚动方向，在其“=”后输入up/down/left/right,分别表示字幕从下往上/从上往下/从右往左/从左往右滚动。根据自己的需要设置就可以了；如果希望滚动字幕行与行之间间隔一行可在每句内容之间的
后再加一
，以此类推（如我的公告栏之间就是加了一个“
”）

登录/注册后可看大图

3、那么如何在图片上作滚动字幕呢？
只要把滚动字幕的代码嵌入文章背景图代码中的“文章内容”处就可以了。
结果如下：
<DIV>
<TABLE width="500" border=0>
<TBODY>
<TR>
<TD background=背景图片地址 height=250>
<P><MARQUEE style="WIDTH: 100px; HEIGHT: 45px" scrollAmount=1 scrollDelay=10 direction=up >大家好，我是薇薇<BR>
由于技术还未掌握全面<BR>
页面效果还不理想<BR>
希望大家能多多给予意见和建议</MARQUEE></P></TD></TR></TBODY></TABLE></DIV>

蔷薇几度花 · 发表于 2010-12-23 12:20

播放器制作展示
　
没有开通音画爱好也可以制作：　

http://flash.tqqa.com/mp3Play/mp3Play26.swf?mp3=http://www.randybell.com/media/Music/Leona_Lewis_-_Better_In_Time.mp3&autoStart=yes&repeatPlay=yes&name=better%20in%20time%20&.swf

蔷薇几度花 · 发表于 2010-12-23 12:20

首先打开这个网址：
　
http://www.tqqa.com/mp3Play/
　

然后按照如下设置：
　

登录/注册后可看大图

　
生成flash——点击多媒体——复制链接——选择flash——自动播放——确定

蔷薇几度花 · 发表于 2010-12-23 12:21

表格图框制作展示：<P> </P>
<P>
  <table style=\"WIDTH: 499px; BORDER-TOP-STYLE: inset; BORDER-RIGHT-STYLE: inset; BORDER-LEFT-STYLE: inset; HEIGHT: 358px; BORDER-BOTTOM-STYLE: inset\" borderColor=#2222dd cellSpacing=0 cellPadding=3 width=499 bgColor=#ffffff border=2>
<tr>
   <td>
      <table style=\"WIDTH: 489px; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; HEIGHT: 314px; BORDER-BOTTOM-STYLE: solid\" borderColor=#3352cc cellSpacing=0 cellPadding=3 width=489 bgColor=#ffffff border=2>
      <tr>
         <td> 这里可放文字或者图片</td>
      </tr>
      </table>
   </td>
</tr>
  </table>
</P>

蔷薇几度花 · 发表于 2010-12-23 12:21

表格图框制作代码：

<P> </P>
<P>
  <table style="WIDTH: 499px; BORDER-TOP-STYLE: inset; BORDER-RIGHT-STYLE: inset; BORDER-LEFT-STYLE: inset; HEIGHT: 358px; BORDER-BOTTOM-STYLE: inset" borderColor=#2222dd cellSpacing=0 cellPadding=3 width=499 bgColor=#ffffff border=2>
<tr>
   <td>
      <table style="WIDTH: 489px; BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; HEIGHT: 314px; BORDER-BOTTOM-STYLE: solid" borderColor=#3352cc cellSpacing=0 cellPadding=3 width=489 bgColor=#ffffff border=2>
      <tr>
         <td> 这里可放文字或者图片</td>
      </tr>
      </table>
   </td>
</tr>
  </table>
</P>

蔷薇几度花 · 发表于 2010-12-23 12:21

<P align=center>[table=100%,紫色代码][tr][td][table=99%,浅蓝色代码][tr][td][table=98%,黄色代码][tr][td][table=97%,粉红色代码][tr][td]很多的朋友喜聊天这个版块……[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table][/td][/tr][/table] </P>

蔷薇几度花 · 发表于 2010-12-23 12:21

　　学习表格标签做图框．

　　音画贴的图框是用表格标签做成的．图框的背景可用颜色，

　　也可用图片，一般宽度５００－６００，全屏宽度８００－９００，

　　高度设定１００即可，随着插入内容增多会自动而延伸．

　　全屏颜色背景图框代码模式：

　　　　

　　

　　<br><br> <DIV id=table1 style="LEFT: -220px; WIDTH: 1000px; POSITION: relative; TOP: 40px"> <table border="边框厚度" width="图框宽度" cellspacing="3" cellpadding="8" bgcolor="边框颜色代码" height="100" bordercolor="背景颜色代码" id="table1">

　　<tr>

　　<td>

　　在此插入内容

　　</td></tr></table>

　　</DIV><br><br>

　　

　　全屏颜色背景图框实例代码：

　　图片作背景图框的代码模式：

　　　　

　　

　　<CENTER>

　　<TABLE id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px"cellspacing="3" cellpadding="8" borderColor=边框颜色代码 height=200 width=900 background="背景图片地址" border=12>

　　<TR>

　　<TD>

　　<CENTER>

　　这里插入内容

　　</CENTER>

　　</TD></TR</TABLE>

　　</CENTER>

　　

　　图片作背景图框的实例代码：

　　说明：

　　◆论坛发贴时，注意将第一行全屏代码中的水平定位语句:

　　style="LEFT: 0px．改为：style="LEFT: -220px

　　◆在代码框中练习修改背景的颜色或背景的图片地址，

　　做一张你称意的图框．

蔷薇几度花 · 发表于 2010-12-23 12:21

编辑之前点击标题上方的设置按钮——在hmtl上打钩。　

下面的代码是一个完整的音画帖子：

1、全屏图片大小
2、图片地址 :
3、透明flash地址（可添加2-3个）
4、音乐地址

代码如下：

<TABLE id=table0 style="LEFT: -200px; WIDTH: 1000px; POSITION: relative; TOP: 100px"><IMG height=600 alt="" src="图片地址">

<TR><EMBED style="Z-INDEX: 3; LEFT: 40px; WIDTH: 1000px; POSITION: absolute; TOP: 20px; HEIGHT: 600px" src=透明FLASH地址 type=application/octet-stream quality="high" wmode="transparent"></EMBED>

<TD><EMBED style="BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-LEFT: silver 1px solid; BORDER-: silver 1px solid" src=音乐地址 width=0 height=0 type=audio/x-mplayer2 loop="-1" autostart="1" volume="0" showstatusbar="0" stdfrom="3"></EMBED> </TD></TR></TBODY></TABLE><BR><BR><BR><BR><BR><BR>

<DIV></DIV>

<DIV></DIV></TD></TR></TBODY></TABLE></DIV>

蔷薇几度花 · 发表于 2010-12-23 12:21

蔷薇几度花 · 发表于 2010-12-23 12:21

蔷薇几度花 · 发表于 2010-12-23 12:21

蔷薇几度花 · 发表于 2010-12-23 12:21

蔷薇几度花 · 发表于 2010-12-23 12:21

蔷薇几度花 · 发表于 2010-12-23 12:42

蔷薇几度花 · 发表于 2010-12-23 12:42

蔷薇几度花 · 发表于 2010-12-23 12:42

账号		自动登录	找回密码
密码			会员注册

【美化♨帖子】懒人方式（直接套用，更新至22楼）

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

评分