引用边框代码属性注解[引用]

各类边框 2009-09-16 07:34:25 阅读8 评论0 字号：大中小

引用

huchosan 的边框代码属性注解[引用]

引用

腾飞的边框代码注解

边框代码注解

2009年3月9日腾飞

（资料来源：网络）

边框其实就是一种表格。要制作边框或者要调节边框中的具体细节，首先要明确表格语法与表格代码的基本属性。

一、基本代码简介：

<table>：表格的起始符。任意一个表格的开始都必须以它开头，且必须有终止符</table>。

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

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

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

</TD></TR></TBODY></TABLE>：这些都是相应元素的终止符，表示相应元素所规范的内容结束。必须注意它们的排列顺序，不能有错。从表格的代码框架分析得出：表格标签里，所有元素都成对出现，而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大，它占在起始和终结的位置，tbody是老二，tr是老三，td最小，它在最里层。

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

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

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

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

height：表格的高度，取值方法同width。提示：如果不是特别需要，建议不用设置表格的高度，系统会根据表格的内容自动设置高度。所谓特别的需要，是指一些特殊的情形下，需要表格的高度精确，比如，当我们通过表格的背景来发一张图片时，如果表格的高度不精确定义，图片就不可能完整或完美地显示。

bgcolor：表格的背景色。取值方法举例：bgcolor=#ff0000或bgcolor=red。单元格td也可有此属性，如果设置了表格的背景色，又设置表格单元格的背景色，得出的效果将是值得试试的，这种情况主要用于多单元格的表格。

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

bordercolor：表格的边框颜色，当border值不为0时设置此值有效。取值同bgcolor。

bordercolorlight：亮边框颜色，当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

bordercolordark：暗边框颜色，当border值不为0时设置有效。暗边框指表格的右边和下边的边框。

align：表格的对齐方式，值有left（左对齐，默认）、center（居中）以及right（右对齐）。align定义的是表格自身的位置，这是一个很有用的属性。

二、表格语法：

表格语法：

<table aling=left>...</table>表格位置,置左

<TABLE aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割窗口

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架.

三、其它参考： <TABLE> ● 表格标记设定该表格的各项参数

<CAPTION> ● 表格标题做成一打通列以填入表格标题

<TR> ● 表格列设定该表格的列

<TD> ● 表格栏设定该表格的栏

<TH> ● 表格标头相等于<TD>，但其内之字体会变粗

表单标记

<FORM> ● 表单标记决定单一表单的运作模式

<TEXTAREA> ● 文字区块提供文字方盒以输入较大量文字

<INPUT> ○ 输入标记决定输入形式

<SELECT> ● 选择标记建立 pop-up 卷动清单

<OPTION> ○ 选项每一标记标示一个选项

图形标记

<IMG> ○ 图形标记用以插入图形及设定图形属性

连结标记

<A> ● 连结标记加入连结

<BASE> ○ 基准标记可将相对 URL 转绝对及指定连结目标

框架标记

<FRAMESET> ● 框架设定设定框架

<FRAME> ○ 框窗设定设定框窗

<IFRAME> ○ 页内框架于网页中间插入框架

<NOFRAMES> ● 不支援框架设定当浏览器不支援框架时的提示

HTML最基本的代码认识

做音画代码帖首先我们先打破对代码的困惑，而我们最先接触的代码就是

<table><tr><td>必须成对出现，缺一不可，

table这一项是具体的工作场，如吧整个音画做为一出戏，那table就是戏中的舞台

要是吧整个音画做为一顿美餐。table就是桌子

tr是拓展工作区域的标识工具。

td就是舞台上的装饰品

例：代码<table bgcolor=#000066 width=300 height=200><tr><td></td></tr></table>

效果如下：

这个代码中多了大家不认得的代码bgcolor。 bgcolor是设置舞台背景色的代码

</TD></TR></TABLE>这是结束代码

有多少个

<TABLE>

<TBODY>

<TR>

<TD>,就有多少个</TD></TR></TBODY></TABLE>而顺序也是刚好相反

再看一下另外一个贴代码为：

<TBODY>

<TR>

<TD align=middle><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。</FONT></TD></TR></TBODY></TABLE>

效果如下：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

上面这个贴的代码中多了文字代码

<TD align=middle>时文字得位置。当中。

align=cneter(居中，align:文字对齐方式的标识），还有一种是right(居右）left（居左），

<FONT color=#ff0000 size=6>时文字得属性。color=#ff0000 。字得色彩。可以用英文代替。size=6字体大小

</FONT></TD></TR></TBODY></TABLE>对应的收尾代码。

我们再看另外一个贴代码为

<TBODY>

<TR>

<TD align=middle><BR><MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。 </STRONG></FONT></P></MARQUEE></TD></TR></TBODY></TABLE>

上面这个舞台的代码。已经接近我们一般做帖的代码了。但文字代码多了一个属性：marouee

marouee是文字的移动代码。

scrollamount=3:文字滚动速度，数字越大速度越快

direction=UP: 文字滚动方向，它有四个参数：UP（向上），down(向下），left（向左），right(向右）

height:滚动文本框的高度，width: 滚动文本框的宽度，数值多少自已可以定，高度太小了，视觉会很窄，高度太了，字又很少，滚动一次和第二次的间隔会很长，宽度小了字不能完全显示

效果如下：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

我们上面所有的贴只是在一个舞台上展示。下面我们就来看看变动多一点的舞台看看。

代码为：

<MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。 </STRONG></FONT>

</td></tr> </TBODY></table></center><BR>

效果如下：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

上面这个代码中多了给音画定位的center（中间）代码。关键是多了这两个代码：border(设定边框宽度）bordercolor(设定边框颜色）。如果我们想让边框理漂亮一点，就要用到这个工具：cellspacing(设定内部细小格线的工具）看一下下面这个舞台设计：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

上面的边框代码为：

</td></tr> </TBODY></table></center><BR>

这里我们设的cellspacing＝10，你做的时候可以任意更改，想设为多少都行，上面所有的代码我们都没有用到图片，而在我们做音画必不可少的就是图片，我们现在就看看怎样吧色彩代码变为图片代码。我们现在把bgcolor换成background。把色彩代码换成图片链接地址：http://img.blog.163.com/photo/ieJjc4eOJLshbzHI-4DRTg==/3739113590625184963.jpg看一下效果：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

分享到网易微博

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。