|
框的简单制作
见下图:
代码为:(代码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>
|
|
加为好友
这朵玫瑰吧！谢谢分享！
