靖江论坛 › 诗情画意 › 【美化♨帖子】懒人方式（直接套用，更新至22楼）

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

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

<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

代码如下：

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

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

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

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

下面是详解：

如何在图片上作滚动字幕
　
1、插入文章背景图的代码是：
&lt;DIV&gt;
&lt;TABLE width=&quot;500&quot; border=0&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD background=背景图片地址 height=250&gt;
&lt;P&gt;文章内容&lt;/P&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/DIV&gt;
attachment/photo/Mon_1012/2849_8e7812930786508939d01f804934b.gif
2、简单的滚动字幕代码是：
&lt;MARQUEE style=&quot;WIDTH: 100px; HEIGHT: 45px&quot; scrollAmount=1 scrollDelay=10 direction=down &gt;大家好，我是薇薇&lt;BR&gt;
由于技术还未掌握全面&lt;BR&gt;
页面效果还不理想&lt;BR&gt;
希望大家能多多给予意见和建议&lt;/MARQUEE&gt;
代码说明：
width-------整个滚动区的宽度，可调；
height------整个滚动区的高度，可调；
scrollamount----滚动步长，改动变化很大，数值越大滚动越快；
scrolldelay-----滚动频率，每次跳动之间的时间间隔，数值越大跳的越慢；
direction-------滚动方向。
&lt;BR&gt;-------相当于回车。
注：direction表示字幕滚动方向，在其“=”后输入up/down/left/right,分别表示字幕从下往上/从上往下/从右往左/从左往右滚动。根据自己的需要设置就可以了；如果希望滚动字幕行与行之间间隔一行可在每句内容之间的
后再加一
，以此类推（如我的公告栏之间就是加了一个“
”）
attachment/photo/Mon_1012/2849_8e7812930786508939d01f804934b.gif
3、那么如何在图片上作滚动字幕呢？
只要把滚动字幕的代码嵌入文章背景图代码中的“文章内容”处就可以了。
结果如下：
&lt;DIV&gt;
&lt;TABLE width=&quot;500&quot; border=0&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD background=背景图片地址 height=250&gt;
&lt;P&gt;&lt;MARQUEE style=&quot;WIDTH: 100px; HEIGHT: 45px&quot; scrollAmount=1 scrollDelay=10 direction=up &gt;大家好，我是薇薇&lt;BR&gt;
由于技术还未掌握全面&lt;BR&gt;
页面效果还不理想&lt;BR&gt;
希望大家能多多给予意见和建议&lt;/MARQUEE&gt;&lt;/P&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/DIV&gt;

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

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

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

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

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

然后按照如下设置：
　
attachment/photo/Mon_1012/2849_f97d129308094269638601eb2351c.jpg
　
生成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

表格图框制作代码：

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

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

<P align=center>很多的朋友喜聊天这个版块…… </P>

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

　　学习表格标签做图框．

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

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

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

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

　　　　

　　

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

　　&lt;tr&gt;

　　&lt;td&gt;

　　在此插入内容

　　&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

　　&lt;/DIV&gt;&lt;br&gt;&lt;br&gt;

　　

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

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

　　　　

　　

　　&lt;CENTER&gt;

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

　　&lt;TR&gt;

　　&lt;TD&gt;

　　&lt;CENTER&gt;

　　这里插入内容

　　&lt;/CENTER&gt;

　　&lt;/TD&gt;&lt;/TR&lt;/TABLE&gt;

　　&lt;/CENTER&gt;

　　

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

　　说明：

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

　　style=&quot;LEFT: 0px．改为：style=&quot;LEFT: -220px

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

　　做一张你称意的图框．

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

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

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

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

代码如下：

&lt;TABLE id=table0 style=&quot;LEFT: -200px; WIDTH: 1000px; POSITION: relative; TOP: 100px&quot;&gt;&lt;IMG height=600 alt=&quot;&quot; src=&quot;图片地址&quot;&gt;

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

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

&lt;DIV&gt;&lt;/DIV&gt;

&lt;DIV&gt;&lt;/DIV&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/DIV&gt;

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

<P align=center><IMG width=500 src=\"attachment/photo/Mon_1012/2849_02661293091678103ec1a939f8b73&#46;jpg\" style=\"border:10px #000000 double\">

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

<P align=center><IMG src=\"attachment/photo/Mon_1012/2849_16801292070792ceb1c0535027c05&#46;jpg\" width=500 style=\"border:10px #007979 ridge\">

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

<P align=center><IMG src=\"attachment/photo/Mon_1012/2849_16801292070792ceb1c0535027c05&#46;jpg\" width=500 style=\"border:10px #007979 groove\">

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

<P align=center><IMG src=\"attachment/photo/Mon_1012/2849_02661293091678103ec1a939f8b73&#46;jpg\" width=500 style=\"border:10px #007979 dashed\">

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

<P align=center><IMG src=\"attachment/photo/Mon_1012/2849_02661293091678103ec1a939f8b73&#46;jpg\" width=500 style=\"border:10px #007979 dotted\">

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

<P align=center><IMG src=\"attachment/photo/Mon_1012/2849_02661293091678103ec1a939f8b73&#46;jpg\" width=500 style=\"border:10px #007979 double\">

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

<P align=center><IMG src=\"attachment/photo/Mon_1012/2849_02661293091678103ec1a939f8b73&#46;jpg\" width=500 style=\"border:10px #007979 outset\">

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

<P align=center><IMG style=\"FILTER: Alpha(opacity=100,style=1)\" src=\"attachment/photo/Mon_1012/2849_02661293091678103ec1a939f8b73&#46;jpg\" width=500>

查看完整版本: 【美化♨帖子】懒人方式（直接套用，更新至22楼）