图片代码及属性

昵称9708896 2014-01-05

展开全文

图片制作方法及代码目录

漂浮图文代码

表格与边框目录

多层边框的基本格式

<TABLE cellSpacing=单元格间距 width=宽度 background=第一层边框图网址 border=边框宽度>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=单元格间距 borderColorDark=暗边框 cellPadding=内容与边

框距离 width=宽度 borderColorLight=亮边框 background=第二层边框图网址 border=边框宽度>
<TBODY>
<TR>
<TD>
<TABLE cellPadding=内容与边框距离 width=宽度 background=第三层边框图网址>
<TBODY>
<TR>
<TD>
<TABLE width=宽度 background=背景图网址 border=边框宽度>
<TBODY>
<TR>
<TD> 加入文字</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY>

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

说明：

<table></table>：表格的起始符、终止符。

cellspacing：单元格之间距离。当一个表格有多个单元格时，各单元格的距离就是cellspacing了，如若表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

cellpadding：内容与边框距离。指该单元格里的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。

width：表格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800×600的显示分辨率下，如果表格设置成1000个像素的宽度，那么，得出的效果将导致IE的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比，如widht="100%"，这种赋值法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。

background：表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突，也建议这么做，这样，当图片不能显示时，表格的外观依然是好看的。

bgcolor：背景颜色

border：边框宽度。此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框。

borderColor：边框颜色

borderColorLight：为亮边框

borderColorDark：为暗边框

<tbody></tbody>：表体的起始符、终止符。紧跟在<table>之后，表示表体开始。必须有结尾符，放在</table>之前。在纯网页中可以不要tbody元素，但在论坛一定要使用，否则，当帖子用到较多的表格时，论坛的自动填充功能将可能会导致代码出错。

<tr></tr>：行的起始符、终止符。tr的作用是规定表格的行，其中，t是table，r是row（行）。有多少组tr，这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。

<td></td>：列的起始符、终止符。td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

以上就是边框的基本结构，现在我们来看一个实例。

代码： <table borderColor=#115522 cellSpacing=2 width="100%" background=http://image68.360doc.com/DownloadImg/2014/01/0515/38030329_4.jpg border=8><tr><td>
<table borderColor=#115522 cellSpacing=30 cellPadding=0 width="100%" background=http://image68.360doc.com/DownloadImg/2014/01/0515/38030329_5.jpg border=2>
<tr><td><table borderColor=#115522 cellPadding=2 width="100%" background=http://image68.360doc.com/DownloadImg/2014/01/0515/38030329_6.jpg border=3><tr><td>
<table borderColor=#115522 cellSpacing=0 cellPadding=4 width="100%" background=http://image68.360doc.com/DownloadImg/2014/01/0515/38030329_7.jpg border=2>
<tr><td> 加入文字</td>
</tr></table></td></tr></table></td></tr></table></td></tr></table>

效果：

加入文字

将以上边框颜色borderColor=#115522 换成borderColorLight=#119944 borderColorDark=#115522，有如下效果：

加入文字

加入文字

边框制作方法及代码01

边框制作采用的是表格代码，通过表格属性代码和颜色代码的运用来实现。

1、一层边框

代码： <TABLE borderColor=#666699 cellSpacing=2 cellPadding=8 width=470 align=center bgColor=#FFCCCC border=10>
<TBODY><TR><TD ><BR><BR>
</TD></TR></TBODY></TABLE>

其中： borderColor="边框颜色" cellSpacing="单元格之间的距离" cellPadding="内容与边框之

间的距离" width="表格宽度" align="水平对齐" bgColor=#"背景颜色" border="边框宽度"

效果：（图01）

表格的大小是设在表格标签的上方。表格实际显示的大小：如所设表格的大小大于表中的实际内容，表格按所设的大小显示；如所设表格的大小小于表中的实际内容，表格按实际内容大小显示。表宽470＝（外框线10＋单元格间距2＋内框线1＋内容与边框的间距8）×2 ＋内容宽表高＝（外框线10＋单元格间距2＋内框线1＋内容与边框的间距8）×2 ＋2个空行高 2、一层边框加图片 方法一：图的地址加在表格标签的上方方法一代码： <table borderColor=#666699 height=350 cellSpacing=2 cellPadding=2 width=470 align=centerbackground=http://image68.360doc.com/DownloadImg/2014/01/0515/38030329_25.gif border=10><tr><td></td></tr></table> 其中： background="背景图片地址" height="高度" 图片原大小：500×400 方法一效果：（图02）

用图片做背景，要用图片背景代码，图片地址是放在表格标签的上方。图片显示的大小，是按表格实际显示的大小显示的。图片显示的方式，是按图片背景代码的性质显示的：当图片原大小大于表格实际显示的大小时，图片只能显示左上方的一部分；当图片小于表格实际显示的大小时，图片在表格实际显示的范围内重复显示。用图片做背景，当图片大于内框线的范围时，内框线不能显示。方法二：图的地址加在列标签的中间方法二代码： <TABLE borderColor=#666699 height=270 cellSpacing=2 cellPadding=2 width=470 align=center bgColor=#ffcccc border=10><TR><TD>
<IMG height=240 src="http://image68.360doc.com/DownloadImg/2014/01/0515/38030329_1.gif" width=440></TD></TR></TABLE> 方法二效果：（图03）

图片的地址是放在图片标签内的，当图片标签放在列标签的中间时，图片则能完整的显示。图片显示的大小：是按在图片标签内设置的宽高来显示的，这点很重要，它可使图片变形。如在图片标签内不设图片的宽高，图片按图片原大小显示，与表格大小设置无关。

3、二层边框

代码： <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=470

align=center bgColor=#ffcccc border=10><tr><td>
<table borderColor=#666699 cellSpacing=2 cellPadding=8 width=465 align=center

bgColor=#d9ffff border=3><tr><td><BR><BR><BR></td></tr></table></td></tr></table>

应用表格代码制作多层边框，内一层边框表格标签是套在外一层表格列标签中。由于内一层是外一层的

实际内容，因此，不论外一层如何设置，内一层都会完整地显示出来。当内一层设置的大小大于外一层

内框线的范围时，外一层的外框线则向外扩展，同时外一层的内框线不显示；当内一层设置的大小小于

外一层内框线的范围时，则各显示各的，相互不干涉，包括外一层的内框线。

内框线的范围：

内框线宽=表格宽－（边框宽度＋单元格之间的距离）×2

内框线高=表格高－（边框宽度＋单元格之间的距离）×2

本例内框线的宽：446 高：96

边框编辑后的生效效果，除了最

内一层是显示双边框（即外框和内框细线），其余仅显示外框，因此，多套一层边框。仅增加一条线框。同时，

还要注意的是：编辑同样一个边框代码，在日志中、在HTML在线编辑器进行编辑，以及在编辑时、预览时、生

效时，所显示的效果有时可能不一样，了解掌握不同的情况，有利于达到自己所想要的效果。

在HTML在线编辑器或日志中编辑时的效果（图04）

在HTML在线编辑器中预览时，则完全显示代码效果（图05）

在日志中预览与在日志中发表生效后的效果一样（图06）

去掉外一层边框的内容与边框之间的距离的效果与图06一样（图07）

4、二层边框加图片

代码：   <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=470 align=center bgColor=#ffcccc border=10>
    <tr><td>
        <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=465 align=center bgColor=#ffffff border=3><tr>
            <td background=http://image68.360doc.com/DownloadImg/2014/01/0515/38030329_26.jpg height=300></td></tr></table></td></tr></table>

效果：

5代码：<TABLE borderColor=#2f4f4f cellSpacing=8 cellPadding=2 align=center bgColor=#408080 border=15>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD width=470 background=http://image68.360doc.com/DownloadImg/2014/01/0515/38030329_27.jpg height=350></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

5效果：

代码： <table borderColor=#2f4f4f cellSpacing=8 cellPadding=5 align=center bgColor=#408080 border=16>
<tr><td><table border=1><tr>
<td width=450 background=http://image68.360doc.com/DownloadImg/2014/01/0515/38030329_28.jpg height=300 border="3"></td></tr></table></td></tr></table>

其中： background="背景图片的地址" height="高度"

效果：

漂浮代码：

代码说明：
MARQUEE：移动标签名
scrollamount="移动速度" 1为速度为最慢；数字越大移动的越快。
direction="移动方向" ： up向上 down向下 left向左 right向右
behavior="移动方式" ： scroll 一圈一圈绕着走 slide 只走一次 alternate 来回走
width="移动宽度" height="移动高度"

漂浮图片浮代码：

漂浮文字浮代码：

浮动文字

图文+连接浮代码：

浮动文字

1.添加图片代码：

2.图片居中代码：

<p align="center" ><img src="图片地址"; width="图片宽" height="图片高">
将其中的center换为left或者right即为图片居左或居右

3.横向渐变代码：
<center><img src="图片网址" style="filter=alpha(opacity=100,style=1,finishopacity=0)">

4.圆形渐变代码：
<center><img src="图片网址" style="filter=alpha(opacity=100,style=2,finishopacity=0)"></center> 　

5.X形渐变代码：
<center><img src="图片网址" style="filter=alpha(opacity=100,style=3,finishopacity=0)"></center> 　

6.黑白效果代码：
<center><img src="图片网址" style="filter:'gray'"></center>

7.X光效果（底片）代码：
<center><img src="图片网址" style="filter:'xray'"></center>

8.浮雕效果代码：
<center><img src="图片网址" style="filter:progid:DXImageTransform.Microsoft.Emboss()"></center>

9.上下颠倒代码：
<center><img src="图片网址" style="filter:flipv">

10.左右颠倒代码：
<center><img src="图片网址" style="filter:fliph"></center> 　

11.色彩颠倒代码：
<center><img src="图片网址" style="filter:invert"></center>

12.粒状阴影代码：
<center><img src="图片网址" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)"></center>

13.模糊效果代码：
<center><img src="图片网址" style="filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)"></center>

14.水波效果（风吹）代码：
<center><img src="图片网址" style="filter:wave(freq=11, strength=4, phase=6, lightstrength=10)"></center>

15.图片静态倒影代码：
<P align=center><IMG height=高度 src="图片地址" width=宽度><BR> <IMG style="FILTER: wave
(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()" height=高度 src="图片地址" width=宽度> </p>