、
文本框制作采用的是表格代碼，通過(guò)表格屬性代碼和顏色代碼的運用來(lái)實(shí)現的。表格代碼我在《
各種表格制作代碼》一文中詳細的做了解釋?zhuān)谶@里主要以各種邊框的制作為例來(lái)加以說(shuō)明。
一、單層文本框
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#99FF66 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY> <TR> <TD> <DIV align=center>單實(shí)線(xiàn)邊框表格</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>
說(shuō)明：
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.e-yu.cn/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>
添加標題
添加文字或圖片
四、在圖片上寫(xiě)日志效果：
圖片上寫(xiě)日志代碼說(shuō)明：
height=300表示圖片的高度為300
width=500 表示圖片的寬度為500
圖片地址表示圖片屬性地址
查找圖片地址方法請參照
〓一分鐘學(xué)會(huì )查找圖片地址〓border=3 表示框線(xiàn)厚度為3（當設定為0時(shí)只是簡(jiǎn)單的圖片加字效果）
cellSpacing=3表示為邊框格線(xiàn)設置距離為3（最佳數值1到6） 注意：當數值設定為0時(shí)無(wú)效
borderColor=#003333表示邊框格線(xiàn)顏色，顏色碼是“003333”
有關(guān)顏色的選取請參照
〓博客顏色代碼表〓代 碼 如 下 <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>
五、用顏色碼制作簡(jiǎn)單日志文本框效果：
顏色碼制作簡(jiǎn)單日志邊框代碼說(shuō)明：
borderColor=#00FF00 表示邊框格線(xiàn)顏色碼
height=300 表示邊框高度數值
cellSpacing=0 表示格線(xiàn)的距離數值
width=500 表示邊框寬度數值
bgColor=#FFFFCC 表示邊框內背景顏色碼
border=6 表示邊框格線(xiàn)厚度
更多代碼邊框制作樣式請參照
〓如何運用代碼做邊框〓代 碼 如 下 <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>
六、素材文本框加標題欄及背景效果：
素材邊框加標題欄及背景代碼說(shuō)明
標題欄背景圖片地址 表示標題欄的背景圖片屬性地址
height=38 表示標題欄的高度
日志背景圖片地址表示日志背景圖片屬性地址
height=250 表示日志背景的高度
標題背景高度還是日志背景高度都無(wú)需太大的修改，因為兩者的高度都會(huì )隨文字的大小和數量增加，所以，只設初步就好。這樣在日志目錄瀏覽中才不會(huì )顯得過(guò)大。
更詳細的制作方法請參照
〓讓你的日志靚起來(lái)!〓代 碼 如 下 <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>
七、顏色框加標題欄及背景色效果：
顏色邊框加標題欄及背景色代碼說(shuō)明
borderColor=#00FF00 表示邊框格線(xiàn)顏色碼
bgColor=#FFFFCC 表示日志背景顏色碼
bgColor=#00FF00 表示標題欄顏色碼
有關(guān)顏色的選取請參照
〓博客顏色代碼表〓代 碼 如 下 <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>
八、多層素材文本框效果：
多層素材邊框效果代碼說(shuō)明
橙色代碼部份表示第一層格線(xiàn)寬度
藍色代碼部份表示第一層背景圖片地址
粉色代碼部份表示第二層格線(xiàn)寬度
青色代碼部份表示第二層背景圖片地址
紫色代碼部份表示第三層格線(xiàn)寬度
綠色代碼部份表示第三層背景圖片地址
黃色代碼部份表示日志背景圖片地址
<TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center background=邊框背景圖片地址 border=1><TBODY>
<TR>
<TD align=middle>
表示邊框的一層代碼，如果要加多層就只需在所有代碼前加一段這個(gè)代碼就行，減少也是刪除這一段。
更多素材邊框請參照
〓日志邊框素材中心〓代 碼 如 下 <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>
九、 添加多層顏色框效果：
添加多層顏色框代碼說(shuō)明：
藍色代碼表示第一層邊框顏色代碼
綠色代碼表示第二層邊框顏色代碼
青色代碼表示第三層邊框顏色代碼
粉色代碼表示日志背景顏色
<TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center bgColor=#00FF00 border=1>
<TBODY>
<TR>
<TD align=middle>
表示邊框的一層代碼，如果要加多層就只需在所有代碼前加一段這個(gè)代碼就行，減少也是刪除這一段。
更多代碼邊框請參照
〓一組漂亮的純代碼邊框〓代 碼 如 下 <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>
文本框（表格）屬性說(shuō)明
border：表格的邊框寬度。如border=1，表示表格邊框的粗細為1個(gè)像素(默認值)，為0表示沒(méi)有邊框。
cellspacing：表格中各單元格的間距。屬性值為數字。當表格只有一個(gè)單元格時(shí)，則表示該單元格與表格邊框的距離。
cellpadding：?jiǎn)卧駜热菖c單元格邊框之間的距離，屬性值是數字。
width：表格的寬度。屬性值為像素和百分比兩種。
height：表格的高度。取值方法同width。
bgcolor：表格的背景顏色。屬性值為各種顏色代碼。
background：表格的背景圖案。屬性值為有效的圖片地址。
bordercolor：表格邊框的顏色。屬性值為各種顏色代碼(當border值不為0時(shí)設置此值有效)。
bordercolorlight：亮邊框(表格的左邊和上邊框)顏色。屬性值為各種顏色代碼(當border值不為0時(shí)設置此值有效)。
bordercolordark：暗邊框(表格的右邊和下邊框)顏色。屬性值為各種顏色代碼(當border值不為0時(shí)設置此值有效)。
align：表格的對齊方式。屬性值為left(左對齊，默認)、center(居中)以及right(右對齊)。
colspan：定義合并表格的列數。屬性值是數字。
rowspan定義合并表格的行數，屬性值是數字。
