文本框的制作方法

文本框的制作方法  、           文本框制作采用的是表格代码，通过表格属性代码和颜色代码的运用来实现的。表格代码我在《各种表格制作代码》一文中详细的做了解释，在这里主要以各种边框的制作为例来加以说明。            一、单层文本框     <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=1> <TBODY> <TR> <TD> <DIV align=center>单实线边框表格</DIV></TD> </TR></TBODY></TABLE>   代码为 <fieldset style="WIDTH: 468px" align=center><legend align=center><strong>代码为</strong></legend> <div align=left>添加内容</div> <div> </div> </fieldset>     <TABLE borderColor=#ff0000 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="边框宽度"             二、双层文本框   <TABLE borderColor=#666699 cellSpacing=2 cellPadding=8 width=470 align=center bgColor=#FFCCCC border=10><TBODY><TR><TD><TABLE borderColor=#000000 cellSpacing=2 cellPadding=8 width=465 align=center bgColor=#F0F0F0 border=3><TBODY><TR><TD> <BR><BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>             加入图片效果：              代码如下：   <table borderColor=#666699 cellSpacing=2 cellPadding=8 width=460 align=center bgColor=#ffcccc border=10>                                                                 <tbody>                                                                     <tr>                                                                         <td>                                                                         <table borderColor=#666699 cellSpacing=2 cellPadding=2 width=450 align=center bgColor=#f0f0f0 border=2>                                                                             <tbody>                                                                                 <tr>                                                                                     <td>                                                                                     <div c><img style="WIDTH: 450px; HEIGHT: 328px" height=328 src="http://image24.360doc.com/DownloadImg/2011/03/0514/9708452_1.jpg" width=466></div>                                                                                     </td>                                                                                 </tr>                                                                             </tbody>                                                                         </table>                                                                         <div></div>                                                                         </td>                                                                     </tr>                                                                 </tbody>                                                             </table>            三、立体文本框            代码如下：    <table style="BORDER-RIGHT: #3333cc 19px ridge; BORDER-TOP: #3333cc 19px ridge; BORDER-LEFT: #3333cc 19px ridge; BORDER-BOTTOM: #3333cc 19px ridge" cellSpacing=0 cellPadding=0 width=480 align=center background=http://bbs./attachments/ext_jpg/029_mS674YcNXDnk.jpg border=0>                                                                 <tbody>                                                                     <tr>                                                                         <td><img src="http://image24.360doc.com/DownloadImg/2011/03/0514/9710089_1.jpg"><br></td>                                                                     </tr>                                                                 </tbody>                                                             </table>     添加标题 添加文字或图片     四、在图片上写日志效果： 图片上写日志代码说明： height=300表示图片的高度为300 width=500 表示图片的宽度为500 图片地址表示图片属性地址 查找图片地址方法请参照〓一分钟学会查找图片地址〓 border=3 表示框线厚度为3（当设定为0时只是简单的图片加字效果） cellSpacing=3表示为边框格线设置距离为3（最佳数值1到6） 注意：当数值设定为0时无效 borderColor=#003333表示边框格线颜色，颜色码是“003333” 有关颜色的选取请参照〓博客颜色代码表〓 代 码 如 下 <TABLE borderColor=#003333 height=300 cellSpacing=3 cellPadding=0 width=500 align=center background=图片地址 border=3> <TBODY> <TR> <TD align=middle> <P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE>   五、用颜色码制作简单日志文本框效果： 颜色码制作简单日志边框代码说明： borderColor=#00FF00 表示边框格线颜色码 height=300 表示边框高度数值 cellSpacing=0 表示格线的距离数值 width=500 表示边框宽度数值 bgColor=#FFFFCC 表示边框内背景颜色码 border=6 表示边框格线厚度 更多代码边框制作样式请参照〓如何运用代码做边框〓 代 码 如 下 <TABLE borderColor=#00FF00 height=300 cellSpacing=0 cellPadding=0 width=500 align=center bgColor=#FFFFCC border=6> <TBODY> <TR> <TD align=middle> <P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE>    六、素材文本框加标题栏及背景效果： 素材边框加标题栏及背景代码说明 标题栏背景图片地址 表示标题栏的背景图片属性地址 height=38 表示标题栏的高度 日志背景图片地址表示日志背景图片属性地址 height=250 表示日志背景的高度 标题背景高度还是日志背景高度都无需太大的修改，因为两者的高度都会随文字的大小和数量增加，所以，只设初步就好。这样在日志目录浏览中才不会显得过大。 更详细的制作方法请参照〓让你的日志靓起来!〓 代 码 如 下 <TABLE height=300 cellSpacing=2 cellPadding=0 width=500 align=center border=2> <TBODY> <TR> <TD align=middle background=标题栏背景图片地址 height=38><STRONG><FONT color=#ff0000 size=5>添加标题</FONT></STRONG></TD></TR> <TR> <TD align=middle background=日志背景图片地址 height=250> <P><FONT color=#ff00ff size=3>添加文字或图片</FONT></P></TD></TR></TBODY></TABLE>   七、颜色框加标题栏及背景色效果：  颜色边框加标题栏及背景色代码说明     borderColor=#00FF00 表示边框格线颜色码     bgColor=#FFFFCC 表示日志背景颜色码     bgColor=#00FF00 表示标题栏颜色码     有关颜色的选取请参照〓博客颜色代码表〓 代 码 如 下 <TABLE borderColor=#00FF00 height=300 cellSpacing=3 cellPadding=0 width=500 align=center bgColor=#FFFFFF border=6> <TBODY> <TR> <TD align=middle bgColor=#00FF00 height=38><FONT face=宋体 color=#FFFFFF size=5><STRONG>添加标题</STRONG></FONT></TD></TR> <TR> <TD align=middle height=250> <FONT face=宋体 color=#222222 size=3><STRONG>添加文字或图片</STRONG></FONT></TD></TR></TBODY></TABLE>   八、多层素材文本框效果： 多层素材边框效果代码说明     橙色代码部份表示第一层格线宽度     蓝色代码部份表示第一层背景图片地址     粉色代码部份表示第二层格线宽度     青色代码部份表示第二层背景图片地址     紫色代码部份表示第三层格线宽度     绿色代码部份表示第三层背景图片地址     黄色代码部份表示日志背景图片地址  <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center background=边框背景图片地址 border=1><TBODY> <TR> <TD align=middle> 表示边框的一层代码，如果要加多层就只需在所有代码前加一段这个代码就行，减少也是删除这一段。 更多素材边框请参照〓日志边框素材中心〓 代 码 如 下 <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center background=第一层边框背景图片地址 border=1> <TBODY> <TR> <TD align=middle> <TABLE borderColor=#003366 height=300 cellSpacing=16 cellPadding=0 width=500 align=center background=第二层边框背景图片地址 border=1> <TBODY> <TR> <TD align=middle> <TABLE borderColor=#000000 height=300 cellSpacing=8 cellPadding=0 width=500 align=center background=第三层边框背景图片地址 border=1> <TBODY> <TR> <TD align=middle> <TABLE borderColor=#000000 height=300 cellSpacing=3 cellPadding=0 width=500 align=center background=日志背景图片地址 border=3> <TBODY> <TR> <TD align=middle> <P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE> 九、 添加多层颜色框效果： 添加多层颜色框代码说明： 蓝色代码表示第一层边框颜色代码 绿色代码表示第二层边框颜色代码 青色代码表示第三层边框颜色代码 粉色代码表示日志背景颜色 <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center bgColor=#00FF00 border=1> <TBODY> <TR> <TD align=middle> 表示边框的一层代码，如果要加多层就只需在所有代码前加一段这个代码就行，减少也是删除这一段。 更多代码边框请参照〓一组漂亮的纯代码边框〓 代 码 如 下 <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center bgColor=#00FF00 border=1> <TBODY> <TR> <TD align=middle> <TABLE borderColor=#FFFFFF height=300 cellSpacing=12 cellPadding=0 width=500 align=center bgColor=#000000 border=1> <TBODY> <TR> <TD align=middle> <TABLE borderColor=#000000 height=300 cellSpacing=8 cellPadding=0 width=500 align=center bgColor=#00FF00 border=1> <TBODY> <TR> <TD align=middle> <TABLE borderColor=#000000 height=300 cellSpacing=2 cellPadding=0 width=500 align=center bgColor=#FFFFFF border=1> <TBODY> <TR> <TD align=middle> <P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE> 常用的文本框代码      １、全屏（相对定位）代码： &<DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px"> <br><br> </DIV><br><br>      ２、颜色背景图框代码： <TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 bgColor="图框背景颜色代码" width="图框宽度" height="图框高度" border=20> <TR><<TD> </TD></TR></TABLE>      3、图片背景的图框代码： <TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 background="背景图片地址" width="图框宽度" height="图框高度" border=20> <TR><<TD> </TD></TR></TABLE> 文本框（表格）属性说明        border：表格的边框宽度。如border=1，表示表格边框的粗细为1个像素(默认值)，为0表示没有边框。        cellspacing：表格中各单元格的间距。属性值为数字。当表格只有一个单元格时，则表示该单元格与表格边框的距离。        cellpadding：单元格内容与单元格边框之间的距离，属性值是数字。        width：表格的宽度。属性值为像素和百分比两种。        height：表格的高度。取值方法同width。        bgcolor：表格的背景颜色。属性值为各种颜色代码。        background：表格的背景图案。属性值为有效的图片地址。        bordercolor：表格边框的颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。        bordercolorlight：亮边框(表格的左边和上边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。        bordercolordark：暗边框(表格的右边和下边框)颜色。属性值为各种颜色代码(当border值不为0时设置此值有效)。        align：表格的对齐方式。属性值为left(左对齐，默认)、center(居中)以及right(右对齐)。        colspan：定义合并表格的列数。属性值是数字。        rowspan定义合并表格的行数，属性值是数字。