|
框的簡單製作
見下圖:
代碼為:(代碼1)
<table width="450" height="350" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#55632F" bordercolor=#6b8e23><tr><td>文字和圖片</td></tr></table>
先看懂這個代碼:
1.<table>...</table>這是一個做表格的元素,它的屬性常用的有:
width=
表格寬度，接受絕對值（如 80）及相對值（如 80%）
height=
表格高度，接受絕對值（如 80）
border=
表格框的厚度.
cellspacing=
表格格線離邊框距離
cellpadding=
文字圖片離格線的距離.
align=
表格的擺放位置（水準），可選值為： left, right,center(左，右，中心)
valign=
表格內字畫等的擺放貼位置（垂直）可選值為： top, middle, bottom。(頂，中間，底部 )
background=
表格的背景圖，與 bgcolor 不要同用。
bgcolor=
表格背景顏色，與background 不要同用.
bordercolor=
表格邊框顏色.
bordercolorlight=
表格邊框向光部分的顏色.
bordercolordark=
表格邊框背光部分的顏色,(使用 bordercolorlight 或 bordercolordark 時 bordercolor 將會失效)
2. <tr>...</tr> 用以標示表格列的元素, <td>...</td> 用以標示儲存格的元素,就好像<tr>...</tr> 規定了列,由<td>...</td> 來描述這每個列裏的表格.它們的屬性下次一起學.
其實所謂的框就是巧妙地利用表格的製作所產生的效果.上面的這三個標記(<table>,<tr>.<td>)是定義表格的最重要的標記，可以說只學這三個己足夠了.
例子:用代碼(1)再做一個框:
代碼為:(代碼2)
<table width="400" height="300" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#da70d6" bordercolor=#c71585><tr><td>文字和圖片</td></tr></table>
將代碼(2)代替代碼(1)中的"文字和圖片"效果如下:
再將圖片:
<img src="http://wallcoo.com/star/Enya2_Miki_Munemasa/mxxx01/es_mimu010.jpg" width="322">
代替代碼(2)中的"文字和圖片"效果如下:
代碼如下:
<table width="450" height="350" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#55632F" bordercolor=#6b8e23><tr><td><table width="400" height="300" border="18" cellspacing="10" cellpadding="10" align="center" valign="middle" bgcolor="#da70d6" bordercolor=#c71585><tr><td><img src="http://bbs.e-yu.cn/attachments/ext_jpg/200463015161624_lmWRwaD8Y8pl.jpg" width="322"></td></tr></table></td></tr></table>
|
|
加為好友
這朵玫瑰吧！謝謝分享！
