1背景图片 - 小坏哥哥不在家，是小乖驾驶小飞船来玩的。 - 赵克斌

载入中

自定义HTML载入中...

快速链接

1背景图片 [转贴 2007-05-10 01:11:37]

这里我提供一些基本的ＨＴＭＬ代码解释和使用方法，请参考

分类: 博客技巧 | 标签: 技术

一，文字的布局

1，文字的大小；颜色及字体
<font size=4 color=#ff1493 face=新宋体> 你需要的文字</font>

2，行的控制

段(Paragraph) (可以看作是空行) <p>

例1：你好吗？<p>很好。</p>
你好吗？

很好。

换行 <br>

例2：你好吗？<br>很好。
你好吗？
很好。

3，文字的对齐(Alignment)

<p align=#> ... ... </p> #=left, center, right
<center> ... ... </center>

4，文字的分区(Division)显示

<div align=#> ... ... </div> #=left, center, right
注解：
<P align=center>表示居中，<P align=left>表示居左，<P align=right>表示居右。
<div align=center>表示居中，<div align=left>表示居左，<div align=right>表示居右。
face=字体　常用字体为：宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等
size=字体大小，这里的最大值为7　取值越大文字就越大。

另一种贴法：

<font style=font:40pt face=新宋体 color=#ff0000>插入文字</font>
font:40pt　数值越大文字就越大 color=颜色代码。

二，如何贴图

1，单张图片

代码如下：
<src="你需要的图片地址">
注明：多张图片连贴时，注意使用换行代码<p>或<br>

单张图片尺寸压缩用语

一张普通图片如下图：

尺寸压缩后如下图

代码如下：
<TABLE border=3>
<TBODY>
<TR>
<TD>
<IMG src="你需要的图片地址" width=300 height=300>
</TD>
</TR>
</TBODY>
</TABLE>
border 为图片边框的尺寸，width 和 height 则为图片的宽高，
这个尺寸可以随意调节，以图片美观，则大小适宜。

再一个就是 -- 没有边框的：

代码如下：
<img src="你需要的图片地址" width=250>

2，背景图片代码：
<TABLE cellSpacing=10 cellPadding=10 width=550 align=center background=bj001.gif border=5>
<TBODY>
<TR>
<TD>
.... 在这里输入你需要的文字或图片 ...
</TR>
</TD>
</TBODY>
</TABLE>
效果如下：

.... 在这里输入你需要的文字或图片 ...

给图片外框增添颜色

代码如下：
<TABLE borderColor=#ff7f50 border=3>
<TBODY>
<TR>
<TD>
<IMG src="yj.jpg">
</TD>
</TR>
</TBODY>
</TABLE>
比上面的尺寸压缩里多了个 bordercolor="#FF7F50"，
大家看到了吗？这个就是边框颜色。
如果不要边框怎么办，把　border=0　就行了。

文字在背景图片里居中

秋风秋雨迎秋致，

秋意秋韵宜秋君，

秋花秋蟹捎秋讯，

秋情秋果喜煞人。

代码如下：
<TABLE borderColor=#ff1493 cellSpacing=10 cellPadding=0 width=550 align=center background=bj001.gif border=5>
<TBODY>
<TR>
<TD valign="middle" align="center">
<FONT size=5 color=#ffffff>
秋风秋雨迎秋致，<BR>秋意秋韵宜秋君，<BR>
秋花秋蟹捎秋讯，<BR>秋情秋果喜煞人。<BR></FONT> </TD></TR></TBODY></TABLE>
说明：　　这里的　 valign="middle"　表示垂直居中　；　 align="center"表示水平居中

文字在背景图片里居中滚动

秋风秋雨迎秋致，

秋意秋韵宜秋君，

秋花秋蟹捎秋讯，

秋情秋果喜煞人。

代码如下：
<TABLE cellSpacing=5 cellPadding=5 width=500 align=center background="bj002.gif" border=5>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=2 direction=up height=230>
<CENTER><FONT size=5 color=red><BR>
秋风秋雨迎秋致，<BR>秋意秋韵宜秋君，<BR>
秋花秋蟹捎秋讯， <BR>秋情秋果喜煞人。<BR></FONT></MARQUEE>
</TD>
</TR>
</TBODY>
</TABLE>
说明：　<marquee >文字内容</marquee>为滚动用语； direction=up 为上滚；
scrollamount=2为滚动速度； height=230为滚动范围，也可不要。

图片在背景图片里居中滚动

代码如下：
<TABLE borderColor="#ff7f50" border="3" width="550" align="center" background="http://www.eonet.ne.jp/~qingshuix/mobile/bj001.gif">
<TBODY>
<TR>
<TD align="center"><MARQUEE scrollamount="2" direction="up" height=430><CENTER><IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"><BR><IMG src="http://www.eonet.ne.jp/~qingshuix/mobile/yj.jpg"></CENTER></MARQUEE></TD>
</TR>
</TBODY>
</TABLE>

三，透明flash的运用

代码如下：
<TABLE height="600" cellspacing="0" cellpadding="0" width="480" background="yuri.jpg" border="3" align="center">
<TBODY>
<TR>
<TD><EMBED pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.geocities.jp/yukie1125n/yujietmswf/19.swf" width="480" height="590" type="application/x-shockwave-flash" quality="high" wmode="transparent"></TD>
</TR>
</TBODY>
</TABLE>

给flash动画增添背景

真诚的问候，为你祝福

我会永远伴随你

编辑制作：玉　洁

代码如下：
<TABLE cellspacing="15" cellpadding="5" width="550" background="http://www.eonet.ne.jp/~qingshuix/mobile/bj001.gif" border="6" align="center">
<TBODY>
<TR>
<TD align="center"><IMG src="mg0002.gif"><IMG src="mg0002.gif"><IMG src="mg0002.gif"><IMG src="mg0002.gif"><BR>
<BR><FONT color="#ffffff" size="5"><B>真诚的问候，为你祝福</B></FONT><BR>
<BR><FONT color="#d3d3d3" size="5"><B>我会永远伴随你</B></FONT><BR>
<BR>
<EMBED src="http://www.long21.net/card/main/0404/0404252f.swf" width="450" height="320" type="application/x-shockwave-flash" quality="high"><BR>
<BR>
<FONT color="#d3d3d3">编辑制作：玉　洁</FONT><BR>
<BR>
</TD>
</TR>
</TBODY>
</TABLE>

注解：

1,透明FLASH代码: <EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.geocities.jp/yukie1125n/yujietmswf/19.swf width=480 height=590 type=application/x-shockwave-flash quality="high" wmode="transparent"></EMBED> 2,一般FLASH代码: <EMBED src=http://www.long21.net/card/main/0404/0404252f.swf width=450 height=300 type=application/x-shockwave-flash quality="high">

透明flash的定位

　　　把FLASH定位，这样图片就不用作背景，直接用图片的格式，图片的大小也可以随心所欲，效果要比前面一种好。
　　　7.0版本的论坛使用这种效果时，在发帖前先要将发帖栏下面的《自动修正》取消才能正常显示。
代码如下： <TABLE align=center background=http://www.eonet.ne.jp/~qingshuix/mobile/bj001.gif border=4 cellPadding=0 cellSpacing=0 height=560 width=450 table> <TBODY><TR><TD> <P align=center><IMG border=0 height=450 src="yuri.jpg" width=350></P></FONT> <EMBED style="LEFT: 280px; WIDTH: 400px; ; TOP: 100px; HEIGHT: 500px" align=right src=http://www.geocities.jp/yukie1125n/yujietmswf/19.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> <EMBED style="LEFT: 350px; WIDTH: 350px; ; TOP: 200px; HEIGHT: 300px" align=right src=http://www.geocities.jp/yukie1125n/yujietmswf/20.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> </TD></TR></TBODY></TABLE> 说明： TOP: 100px 是指FLASH与帖子上边之间的距离（也就是FLASH与IE的距离）。　　　LEFT: 280px 是指FLASH与帖子左边的距离　　　WIDTH:400px　HEIGHT: 300px　是指FLASH定位的范围宽度和高度；后面的width=400 height=3000 是FLASH的宽和高了。补充：每个数据适应修改可使透明flash重叠。下面是重叠的例子，可根据自己需要修改数据。 <EMBED style="LEFT: 350px; WIDTH: 300px; ; TOP: 480px; HEIGHT: 300px" align=right src=http://www.geocities.jp/yukie1125n/yujietmswf/19.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> <EMBED style="LEFT: 350px; WIDTH: 300px; ; TOP: 480px; HEIGHT: 300px" align=right src=http://www.geocities.jp/yukie1125n/yujietmswf/20.swf width=300 height=200 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>

四，多层背景的应用

代码如下：
<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500>
<TBODY>
<TR>
<TD>
<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500>
<TBODY>
<TR>
<TD>
<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500>
<TBODY>
<TR>
<TD>以此类推

帖子的文章或图片位置

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

注意：
前边用了多少<table ...... ><tr><td>后面就要有多少</td></tr></table>收尾。
常用的参数设定及注解：
<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">

width="400" 表格宽度，接受绝对值（如 500）及相对值（如 80%）。
border="10"   表格边框的厚度。
cellspacing="2"  表格格线的厚度
cellPadding=5　表格格线内厚度
align="CENTER"
表格的摆放位置（水平），可选值为：左： left,　右： right,　居中： center
valign="TOP".
表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。　　
background="背景图片网址"
表格的背景图片，与 bgcolor 不要同用。
bgcolor="#0000FF"   表格的底色，与 background 不要同用
bordercolor="#CF0000"  表格边框颜色
bordercolorlight="#00FF00"  表格边框向光部分的颜色
bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时
bordercolor 将会失效。

五，如何贴背景音乐

如何显示（隐藏）播放器效果
隐藏播放器用语： wma； mp3； midi 等都可以使用
<1 , > <embed src="音乐地址"HIDDEN=TRUE AUTOSTAT=TRUE LOOP=TRUE>
<2 , > <bgsound src="音乐地址" Loop=-1>

显示播放器用语： wma； mp3； midi 等都可以使用
<EMBED src="音乐地址" width=350 height=45 type="audio/x-pn-realaudio-<br>plugin" loop="true" autostart="true" controls="ControlPanel,StatusBar">
显示效果1:

（rm,wav,swf,mp3等格式）
<embed src="音乐地址" autostart="FALSE" width="330" height="200">
显示效果2:

说明：
autostart="true"　表示是否要音乐文件传送完就自动播放，
TRUE是要，FALSE是不要，默认为true
Loop=true　表示设定播放重复次数， LOOP=3 表示重复3次，
true 表示无限次播放，FALSE 播放一次即停止。
width=宽度 height=高度　可以设定控制播放器面板的大小，
如果都设置为0就可以把播放器隐藏了。

78次阅读

固定链接

引用 (0)

　2006年 10月05日 13:27