、
文本框制作采用的是表格代碼,通過表格屬性代碼和顏色代碼的運用來實現(xiàn)的。表格代碼我在《
各種表格制作代碼》一文中詳細的做了解釋,在這里主要以各種邊框的制作為例來加以說明。
一、單層文本框
<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>添加內(nèi)容</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="單元格內(nèi)容與單元格邊框間的距離" width="表格寬度"
align="水平對齊" bgColor=#"背景顏色" border="邊框?qū)挾?
二、雙層文本框
<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>
添加標題
添加文字或圖片
四、在圖片上寫日志效果:
圖片上寫日志代碼說明:
height=300表示圖片的高度為300
width=500 表示圖片的寬度為500
圖片地址表示圖片屬性地址
查找圖片地址方法請參照
〓一分鐘學會查找圖片地址〓border=3 表示框線厚度為3(當設(shè)定為0時只是簡單的圖片加字效果)
cellSpacing=3表示為邊框格線設(shè)置距離為3(最佳數(shù)值1到6) 注意:當數(shù)值設(shè)定為0時無效
borderColor=#003333表示邊框格線顏色,顏色碼是“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>
五、用顏色碼制作簡單日志文本框效果:
顏色碼制作簡單日志邊框代碼說明:
borderColor=#00FF00 表示邊框格線顏色碼
height=300 表示邊框高度數(shù)值
cellSpacing=0 表示格線的距離數(shù)值
width=500 表示邊框?qū)挾葦?shù)值
bgColor=#FFFFCC 表示邊框內(nèi)背景顏色碼
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 表示日志背景的高度
標題背景高度還是日志背景高度都無需太大的修改,因為兩者的高度都會隨文字的大小和數(shù)量增加,所以,只設(shè)初步就好。這樣在日志目錄瀏覽中才不會顯得過大。
更詳細的制作方法請參照
〓讓你的日志靚起來!〓代 碼 如 下 <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 表示標題欄顏色碼
有關(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>
八、多層素材文本框效果:
多層素材邊框效果代碼說明
橙色代碼部份表示第一層格線寬度
藍色代碼部份表示第一層背景圖片地址
粉色代碼部份表示第二層格線寬度
青色代碼部份表示第二層背景圖片地址
紫色代碼部份表示第三層格線寬度
綠色代碼部份表示第三層背景圖片地址
黃色代碼部份表示日志背景圖片地址
<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>
常用的文本框代碼
1、全屏(相對定位)代碼:
&<DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px">
<br><br>
</DIV><br><br>
2、顏色背景圖框代碼:
<TABLE borderColor="邊框顏色代碼" cellSpacing=15 cellpadding=20 bgColor="圖框背景顏色代碼" width="圖框?qū)挾? height="圖框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>
3、圖片背景的圖框代碼:
<TABLE borderColor="邊框顏色代碼" cellSpacing=15 cellpadding=20 background="背景圖片地址" width="圖框?qū)挾? height="圖框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>
文本框(表格)屬性說明
border:表格的邊框?qū)挾?。如border=1,表示表格邊框的粗細為1個像素(默認值),為0表示沒有邊框。
cellspacing:表格中各單元格的間距。屬性值為數(shù)字。當表格只有一個單元格時,則表示該單元格與表格邊框的距離。
cellpadding:單元格內(nèi)容與單元格邊框之間的距離,屬性值是數(shù)字。
width:表格的寬度。屬性值為像素和百分比兩種。
height:表格的高度。取值方法同width。
bgcolor:表格的背景顏色。屬性值為各種顏色代碼。
background:表格的背景圖案。屬性值為有效的圖片地址。
bordercolor:表格邊框的顏色。屬性值為各種顏色代碼(當border值不為0時設(shè)置此值有效)。
bordercolorlight:亮邊框(表格的左邊和上邊框)顏色。屬性值為各種顏色代碼(當border值不為0時設(shè)置此值有效)。
bordercolordark:暗邊框(表格的右邊和下邊框)顏色。屬性值為各種顏色代碼(當border值不為0時設(shè)置此值有效)。
align:表格的對齊方式。屬性值為left(左對齊,默認)、center(居中)以及right(右對齊)。
colspan:定義合并表格的列數(shù)。屬性值是數(shù)字。
rowspan定義合并表格的行數(shù),屬性值是數(shù)字。