| 本帖最后由 北克 于 2012-12-6 20:17 编辑
整理:北克
我们来学习一下边框的制作。
1:边框的基格式:
<TABLE cellSpacing=边框宽度 width="网页宽度" background=第一层边框图片网址> <TBODY> <TR> <TD> <TABLE cellSpacing=1 borderColorDark=#0d1737 cellPadding=边框宽度 width="网页宽度" borderColorLight=#24387a background=第二层边框图片网址 border=1> <TBODY> <TR> <TD> <TABLE cellPadding=边框宽度 width="网页宽度"background=第三层边框图片网址> <TBODY> <TR> <TD> <TABLE width="网页宽度" background=背景图片网址 border=0> <TBODY> <TR> <TD>
标识符分析:
<table>:表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>。
cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。
width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。
background:表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。
<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配合构成单元格。
以上就第一层边框的基本要素,现在我们在看看第二层边框:
<TABLE cellSpacing=0 borderColorDark=#0d1737 cellPadding=边框宽度 width="网页宽度" borderColorLight=#24387a background=第二层边框图片网址 border=1> <TBODY> <TR> <TD>
其它的全和第一层一样,但多了这几组:
1:borderColorDark=#0d1737 暗边框,颜色为0d1737 当border值不为0时设置有效。暗边框指表格的右边和下边的边框。
2:borderColorLight=#24387a 亮边框,颜色为0d1737 当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。
3:cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元格里的内容与表格周边边框的距离。
第三层边框和第一层一样,现在我们来看最后一层边框也就是背景。
<TABLE width="网页宽度" background=背景图片网址 border=0> <TBODY> <TR> <TD>
它只有背景的宽度width="网页宽度",背景展示的网址:background=背景图片网址,还多了一个border=0它是什么意思呢?
border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。
以上就是边框的基本结构,现在我们来看一个实例:看看它的效果:
例:
<TABLE cellSpacing=38 width="100%" background=http://wz./../../admin/uploadpic/2005043018225680611.jpg> <TBODY> <TR> <TD> <TABLE cellSpacing=0 borderColorDark=#0d1737 cellPadding=12 width="100%" borderColorLight=#24387a background=http://tw./eden/img/forumupload/711609/11389736641137020.gif border=1> <TBODY> <TR> <TD> <TABLE cellPadding=5 width="100%" background=http://blog./model/luntan/upload_pic/1332743.jpg> <TBODY> <TR> <TD> <TABLE width="100%" background=http://www./asahi/syaraku/kichinyado/hana2/suiren/suiren22/suiren222.jpg border=0> <TBODY> <TR> <TD>
朋友们做贴想要设置字体的颜色时可能会说:不懂英语如何设置啊?(懂的朋友可直接用英语颜色的单词来表示) 不要紧,不必着急,我们用代码一定可以做出漂亮的颜色来,你只需在表示字体颜色的color=的后面加上色码表中提供的代码就可以了.加入时不要忘了加个“#”号噢. 比如说你要选择大红为字体色,那就用“color=#FF0000”表示它.当然,色码一样也可用于亮边框、暗边框和背景色的设置,明白了吗?想用什么色只管来拿吧,呵呵。 |
|