热门文章 | 热门软件| 热门源码 | 热门电影 | 知识库 | 联系我们
软件 源码 教程 影视 健康 招聘
  HTML | JavaScript | ASP | PHP | JSP | NET | VB | VC | VF | Windows | Linux | Mysql | Mssql | Oracle | Struts 
当前位置: 创世纪计算机资源网 -> 文章频道 ->html 
站内搜索:
活用表格美化网页(5)
作者:星河 来源:yesky 整理日期:2007-3-18

  第二种制作方法:

1. 准备工作:制作两个小圆角图片,如右图。可以先制作一个,让后用相关软件翻转就可以了

     
2. 制作一个一行三列的表格。表格的cellpadding、cellspacing均设置为零。(此处为了便于说明,暂时将border设置为"1")

 
3. 将第一步的两个小图片分别插入第一、第三单元格

 
4. 设置第一个单元格的align=left、valign=top,使图片在单元格的左上方,第三个单元格的align=right 、valign=top,使图片在单元格的右上方。并调整单元格的大小
 
5. 将单元格的背景色(注意是单元格)设置为插入的图片颜色相同。

 
这种表格是不是很眼熟啊?的确,们可以在很多的大网站找到它的身影。
6. 将表格的border设置为"0",然后在下面再插入一个同样边框颜色的细线表格(此步骤省略,如果不会,可参照上面的细线表格技巧),现在就可以在细线表格里写入内容了。

代码如下:
<table width="150" cellpadding="0" cellspacing="0" border="0"
<tr bgcolor="#7090ff"
<td valign="top" align="left" width="10"><img src="411-w03.gif" width="7" height="7"></td>
<td width="127" bgcolor="#7090ff"> </td>
<td align="right" valign="top" width="10"><img src="411-w04.gif" width="7" height="7"></td>
</tr>
</table>
<table width="150" cellspacing="1" cellpadding="0" border="0" bgcolor="#7090ff">
<tr>
<td bgcolor="#FFFFFF">这种表格是不是很眼熟啊?的确,们可以在很多的大网站找到它的身影。</td>
</tr>
</table>


  说明:它由两个单独的表格组成,其中第一个表格是出现圆角的关键!


  5、两个并排的表格
[1]  [2]  [3]  [4]  [5]  [6]  
相关文章