|
、
文本框制作采用的是表格代碼,，通過表格屬性代碼和顏色代碼的運用來實現(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>
|
<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./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（最佳數(shù)值1到6） 注意：當數(shù)值設定為0時無效
borderColor=#003333表示邊框格線顏色，顏色碼是“003333”
有關(guān)顏色的選取請參照〓博客顏色代碼表〓
|
五,、用顏色碼制作簡單日志文本框效果：
|
顏色碼制作簡單日志邊框代碼說明：
borderColor=#00FF00 表示邊框格線顏色碼
height=300 表示邊框高度數(shù)值
cellSpacing=0 表示格線的距離數(shù)值
width=500 表示邊框?qū)挾葦?shù)值
bgColor=#FFFFCC 表示邊框內(nèi)背景顏色碼
border=6 表示邊框格線厚度
更多代碼邊框制作樣式請參照〓如何運用代碼做邊框〓
|
六,、素材文本框加標題欄及背景效果：
| 素材邊框加標題欄及背景代碼說明 |
|
標題欄背景圖片地址 表示標題欄的背景圖片屬性地址
height=38 表示標題欄的高度
日志背景圖片地址表示日志背景圖片屬性地址
height=250 表示日志背景的高度
標題背景高度還是日志背景高度都無需太大的修改，因為兩者的高度都會隨文字的大小和數(shù)量增加，所以,，只設初步就好,。這樣在日志目錄瀏覽中才不會顯得過大。
更詳細的制作方法請參照〓讓你的日志靚起來!〓
|
七,、顏色框加標題欄及背景色效果：
| 顏色邊框加標題欄及背景色代碼說明 |
|
borderColor=#00FF00 表示邊框格線顏色碼
bgColor=#FFFFCC 表示日志背景顏色碼
bgColor=#00FF00 表示標題欄顏色碼
有關(guān)顏色的選取請參照〓博客顏色代碼表〓
|
八,、多層素材文本框效果：
|
多層素材邊框效果代碼說明
橙色代碼部份表示第一層格線寬度
藍色代碼部份表示第一層背景圖片地址
粉色代碼部份表示第二層格線寬度
青色代碼部份表示第二層背景圖片地址
紫色代碼部份表示第三層格線寬度
綠色代碼部份表示第三層背景圖片地址
黃色代碼部份表示日志背景圖片地址
<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 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="圖框?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時設置此值有效),。
bordercolorlight：亮邊框(表格的左邊和上邊框)顏色。屬性值為各種顏色代碼(當border值不為0時設置此值有效),。
bordercolordark：暗邊框(表格的右邊和下邊框)顏色,。屬性值為各種顏色代碼(當border值不為0時設置此值有效)。
align：表格的對齊方式。屬性值為left(左對齊,，默認),、center(居中)以及right(右對齊)。
colspan：定義合并表格的列數(shù),。屬性值是數(shù)字,。
rowspan定義合并表格的行數(shù)，屬性值是數(shù)字,。
|
|
|
|
|
|
